diff --git a/examples/image-legacy-component/app/background/page.tsx b/examples/image-legacy-component/app/background/page.tsx new file mode 100644 index 0000000000000..f0a08df543dfa --- /dev/null +++ b/examples/image-legacy-component/app/background/page.tsx @@ -0,0 +1,25 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; +import styles from "@/styles/styles.module.css"; + +export default function Background() { + return ( +
+ +
+ Mountains +
+

+ Image Component +
+ as a Background +

+
+ ); +} diff --git a/examples/image-legacy-component/pages/color.tsx b/examples/image-legacy-component/app/color/page.tsx similarity index 50% rename from examples/image-legacy-component/pages/color.tsx rename to examples/image-legacy-component/app/color/page.tsx index 74aa6968ada2c..01bb22dfade13 100644 --- a/examples/image-legacy-component/pages/color.tsx +++ b/examples/image-legacy-component/app/color/page.tsx @@ -1,5 +1,5 @@ import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; +import ViewSource from "@/components/view-source"; // Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535 const keyStr = @@ -16,27 +16,27 @@ const rgbDataURL = (r: number, g: number, b: number) => triplet(0, r, g) + triplet(b, 255, 255) }/yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==`; -const Color = () => ( -
- -

Image Component With Color Data URL

- Dog - Cat -
-); - -export default Color; +export default function Color() { + return ( +
+ +

Image Component With Color Data URL

+ Dog + Cat +
+ ); +} diff --git a/examples/image-legacy-component/app/layout-fill/page.tsx b/examples/image-legacy-component/app/layout-fill/page.tsx new file mode 100644 index 0000000000000..ded080b62493d --- /dev/null +++ b/examples/image-legacy-component/app/layout-fill/page.tsx @@ -0,0 +1,36 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; + +export default function LayoutFill() { + return ( +
+ +

Image Component With Layout Fill

+
+ Mountains +
+
+ Mountains +
+
+ Mountains +
+
+ ); +} diff --git a/examples/image-legacy-component/app/layout-fixed/page.tsx b/examples/image-legacy-component/app/layout-fixed/page.tsx new file mode 100644 index 0000000000000..8756079484fb2 --- /dev/null +++ b/examples/image-legacy-component/app/layout-fixed/page.tsx @@ -0,0 +1,18 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; + +export default function LayoutFixed() { + return ( +
+ +

Image Component With Layout Fixed

+ Mountains +
+ ); +} diff --git a/examples/image-legacy-component/app/layout-intrinsic/page.tsx b/examples/image-legacy-component/app/layout-intrinsic/page.tsx new file mode 100644 index 0000000000000..2c25244c894bb --- /dev/null +++ b/examples/image-legacy-component/app/layout-intrinsic/page.tsx @@ -0,0 +1,18 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; + +export default function LayoutIntrinsic() { + return ( +
+ +

Image Component With Layout Intrinsic

+ Mountains +
+ ); +} diff --git a/examples/image-legacy-component/app/layout-responsive/page.tsx b/examples/image-legacy-component/app/layout-responsive/page.tsx new file mode 100644 index 0000000000000..b29acf92e990e --- /dev/null +++ b/examples/image-legacy-component/app/layout-responsive/page.tsx @@ -0,0 +1,18 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; + +export default function LayoutResponsive() { + return ( +
+ +

Image Component With Layout Responsive

+ Mountains +
+ ); +} diff --git a/examples/image-legacy-component/app/layout.tsx b/examples/image-legacy-component/app/layout.tsx new file mode 100644 index 0000000000000..094a7ecfc9ae9 --- /dev/null +++ b/examples/image-legacy-component/app/layout.tsx @@ -0,0 +1,19 @@ +import type { Metadata } from "next"; +import "@/styles/globals.css"; + +export const metadata: Metadata = { + title: "Next.js", + description: "Generated by Next.js", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/examples/image-legacy-component/app/page.tsx b/examples/image-legacy-component/app/page.tsx new file mode 100644 index 0000000000000..a4ab423e9e7e3 --- /dev/null +++ b/examples/image-legacy-component/app/page.tsx @@ -0,0 +1,125 @@ +import Image from "next/legacy/image"; +import Link from "next/link"; +import ViewSource from "@/components/view-source"; +import Code from "@/components/code"; +import styles from "@/styles/styles.module.css"; + +export default function Home() { + return ( +
+ +
+

Image Component with Next.js

+

+ This page demonstrates the usage of the{" "} + + next/legacy/image + {" "} + component with live examples. +

+

+ This component is designed to{" "} + + automatically optimize + {" "} + images on-demand as the browser requests them. +

+
+

Layout

+

+ External images must be configured in next.config.js{" "} + using the remotePatterns property. +

+

+ Select a layout below and try resizing the window or rotating your + device to see how the image reacts. +

+
    +
  • + layout="intrinsic" +
    • +
  • + layout="responsive" +
    • +
  • + layout="fixed" +
    • +
  • + layout="fill" +
    • +
  • + background demo +
    • +
+
+

Placeholder

+

+ The placeholder property tells the image what to do while + loading. +

+

+ You can optionally enable a blur-up placeholder while the high + resolution image loads. +

+

+ Try it out below (you may need to disable cache in dev tools to see + the effect if you already visited): +

+
    +
  • + placeholder="blur" +
    • +
  • + + placeholder="blur" with animated shimmer blurDataURL + +
    • +
  • + + placeholder="blur" with solid color blurDataURL + +
    • +
+
+

Internal Image

+

+ The following is an example of a reference to an internal image from + the public directory. +

+

+ This image is intentionally large so you have to scroll down to the + next image. +

+ Vercel logo +
+

External Image

+

+ The following is an example of a reference to an external image at{" "} + assets.vercel.com. +

+

+ External images must be configured in next.config.js{" "} + using the remotePatterns property. +

+ Next.js logo +
+

Learn More

+

+ You can optionally configure a cloud provider, device sizes, and more! +

+

+ Checkout the{" "} + + Image Optimization documentation + {" "} + to learn more. +

+
+
+ ); +} diff --git a/examples/image-legacy-component/app/placeholder/page.tsx b/examples/image-legacy-component/app/placeholder/page.tsx new file mode 100644 index 0000000000000..c861a301cb5f0 --- /dev/null +++ b/examples/image-legacy-component/app/placeholder/page.tsx @@ -0,0 +1,19 @@ +import Image from "next/legacy/image"; +import ViewSource from "@/components/view-source"; +import mountains from "@/public/mountains.jpg"; + +export default function Placeholder() { + return ( +
+ +

Image Component With Placeholder Blur

+ Mountains +
+ ); +} diff --git a/examples/image-legacy-component/pages/shimmer.tsx b/examples/image-legacy-component/app/shimmer/page.tsx similarity index 63% rename from examples/image-legacy-component/pages/shimmer.tsx rename to examples/image-legacy-component/app/shimmer/page.tsx index a931063f4d37d..76d2972d85570 100644 --- a/examples/image-legacy-component/pages/shimmer.tsx +++ b/examples/image-legacy-component/app/shimmer/page.tsx @@ -1,5 +1,5 @@ import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; +import ViewSource from "@/components/view-source"; const shimmer = (w: number, h: number) => ` @@ -20,19 +20,19 @@ const toBase64 = (str: string) => ? Buffer.from(str).toString("base64") : window.btoa(str); -const Shimmer = () => ( -
- -

Image Component With Shimmer Data URL

- Mountains -
-); - -export default Shimmer; +export default function Shimmer() { + return ( +
+ +

Image Component With Shimmer Data URL

+ Mountains +
+ ); +} diff --git a/examples/image-legacy-component/components/code.tsx b/examples/image-legacy-component/components/code.tsx new file mode 100644 index 0000000000000..dbe47d3accb87 --- /dev/null +++ b/examples/image-legacy-component/components/code.tsx @@ -0,0 +1,9 @@ +import styles from "@/styles/styles.module.css"; + +export default function Code({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return {children}; +} diff --git a/examples/image-legacy-component/next-env.d.ts b/examples/image-legacy-component/next-env.d.ts index 52e831b434248..1b3be0840f3f6 100644 --- a/examples/image-legacy-component/next-env.d.ts +++ b/examples/image-legacy-component/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/examples/image-legacy-component/next.config.js b/examples/image-legacy-component/next.config.ts similarity index 69% rename from examples/image-legacy-component/next.config.js rename to examples/image-legacy-component/next.config.ts index 056abb8a3b311..8963e4fa1f83b 100644 --- a/examples/image-legacy-component/next.config.js +++ b/examples/image-legacy-component/next.config.ts @@ -1,5 +1,6 @@ -/** @type {import('next').NextConfig} */ -module.exports = { +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { images: { formats: ["image/avif", "image/webp"], remotePatterns: [ @@ -12,3 +13,5 @@ module.exports = { ], }, }; + +export default nextConfig; diff --git a/examples/image-legacy-component/package.json b/examples/image-legacy-component/package.json index e800958c58829..1d486bbf5f6a8 100644 --- a/examples/image-legacy-component/package.json +++ b/examples/image-legacy-component/package.json @@ -7,12 +7,12 @@ }, "dependencies": { "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@types/node": "18.7.14", - "@types/react": "16.9.17", - "typescript": "4.8.2" + "@types/node": "^22.10.1", + "@types/react": "^18.3.12", + "typescript": "^5.7.2" } } diff --git a/examples/image-legacy-component/pages/_app.tsx b/examples/image-legacy-component/pages/_app.tsx deleted file mode 100644 index 396b932c16ad1..0000000000000 --- a/examples/image-legacy-component/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { AppProps } from "next/app"; -import "../app.css"; - -export default function MyApp({ Component, pageProps }: AppProps) { - return ; -} diff --git a/examples/image-legacy-component/pages/background.tsx b/examples/image-legacy-component/pages/background.tsx deleted file mode 100644 index ed411687e08ed..0000000000000 --- a/examples/image-legacy-component/pages/background.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import styles from "../styles.module.css"; - -const BackgroundPage = () => ( -
- -
- Mountains -
-

- Image Component -
- as a Background -

-
-); - -export default BackgroundPage; diff --git a/examples/image-legacy-component/pages/index.tsx b/examples/image-legacy-component/pages/index.tsx deleted file mode 100644 index ef052dd3f273c..0000000000000 --- a/examples/image-legacy-component/pages/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import styles from "../styles.module.css"; -import Image from "next/legacy/image"; -import Link from "next/link"; -import ViewSource from "../components/view-source"; -import vercel from "../public/vercel.png"; -import type { PropsWithChildren } from "react"; - -const Code = (props: PropsWithChildren<{}>) => ( - -); - -const Index = () => ( -
- -
-

Image Component with Next.js

-

- This page demonstrates the usage of the{" "} - - next/legacy/image - {" "} - component with live examples. -

-

- This component is designed to{" "} - - automatically optimize - {" "} - images on-demand as the browser requests them. -

-
-

Layout

-

- External images must be configured in next.config.js using - the remotePatterns property. -

-

- Select a layout below and try resizing the window or rotating your - device to see how the image reacts. -

-
    -
  • - layout="intrinsic" -
    • -
  • - layout="responsive" -
    • -
  • - layout="fixed" -
    • -
  • - layout="fill" -
    • -
  • - background demo -
    • -
-
-

Placeholder

-

- The placeholder property tells the image what to do while - loading. -

-

- You can optionally enable a blur-up placeholder while the high - resolution image loads. -

-

- Try it out below (you may need to disable cache in dev tools to see the - effect if you already visited): -

-
    -
  • - placeholder="blur" -
    • -
  • - - placeholder="blur" with animated shimmer blurDataURL - -
    • -
  • - - placeholder="blur" with solid color blurDataURL - -
    • -
-
-

Internal Image

-

- The following is an example of a reference to an internal image from the{" "} - public directory. -

-

- This image is intentionally large so you have to scroll down to the next - image. -

- Vercel logo -
-

External Image

-

- The following is an example of a reference to an external image at{" "} - assets.vercel.com. -

-

- External images must be configured in next.config.js using - the remotePatterns property. -

- Next.js logo -
-

Learn More

-

- You can optionally configure a cloud provider, device sizes, and more! -

-

- Checkout the{" "} - - Image Optimization documentation - {" "} - to learn more. -

-
-
-); - -export default Index; diff --git a/examples/image-legacy-component/pages/layout-fill.tsx b/examples/image-legacy-component/pages/layout-fill.tsx deleted file mode 100644 index f91bd71a7af17..0000000000000 --- a/examples/image-legacy-component/pages/layout-fill.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import mountains from "../public/mountains.jpg"; - -const Fill = () => ( -
- -

Image Component With Layout Fill

-
- Mountains -
-
- Mountains -
-
- Mountains -
-
-); - -export default Fill; diff --git a/examples/image-legacy-component/pages/layout-fixed.tsx b/examples/image-legacy-component/pages/layout-fixed.tsx deleted file mode 100644 index 2d217692f1f59..0000000000000 --- a/examples/image-legacy-component/pages/layout-fixed.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import mountains from "../public/mountains.jpg"; - -const Fixed = () => ( -
- -

Image Component With Layout Fixed

- Mountains -
-); - -export default Fixed; diff --git a/examples/image-legacy-component/pages/layout-intrinsic.tsx b/examples/image-legacy-component/pages/layout-intrinsic.tsx deleted file mode 100644 index 0e6d13e952c44..0000000000000 --- a/examples/image-legacy-component/pages/layout-intrinsic.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import mountains from "../public/mountains.jpg"; - -const Intrinsic = () => ( -
- -

Image Component With Layout Intrinsic

- Mountains -
-); - -export default Intrinsic; diff --git a/examples/image-legacy-component/pages/layout-responsive.tsx b/examples/image-legacy-component/pages/layout-responsive.tsx deleted file mode 100644 index a6f8cab71edd2..0000000000000 --- a/examples/image-legacy-component/pages/layout-responsive.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import mountains from "../public/mountains.jpg"; - -const Responsive = () => ( -
- -

Image Component With Layout Responsive

- Mountains -
-); - -export default Responsive; diff --git a/examples/image-legacy-component/pages/placeholder.tsx b/examples/image-legacy-component/pages/placeholder.tsx deleted file mode 100644 index b13ab53f9f489..0000000000000 --- a/examples/image-legacy-component/pages/placeholder.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Image from "next/legacy/image"; -import ViewSource from "../components/view-source"; -import mountains from "../public/mountains.jpg"; - -const PlaceholderBlur = () => ( -
- -

Image Component With Placeholder Blur

- Mountains -
-); - -export default PlaceholderBlur; diff --git a/examples/image-legacy-component/app.css b/examples/image-legacy-component/styles/globals.css similarity index 100% rename from examples/image-legacy-component/app.css rename to examples/image-legacy-component/styles/globals.css diff --git a/examples/image-legacy-component/styles.module.css b/examples/image-legacy-component/styles/styles.module.css similarity index 100% rename from examples/image-legacy-component/styles.module.css rename to examples/image-legacy-component/styles/styles.module.css diff --git a/examples/image-legacy-component/tsconfig.json b/examples/image-legacy-component/tsconfig.json index 3859fdbcde1ff..d8b93235f205e 100644 --- a/examples/image-legacy-component/tsconfig.json +++ b/examples/image-legacy-component/tsconfig.json @@ -1,19 +1,27 @@ { "compilerOptions": { - "target": "es5", + "target": "ES2017", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, - "forceConsistentCasingInFileNames": true, "noEmit": true, - "incremental": true, "esModuleInterop": true, "module": "esnext", + "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve" + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] }