updated image-legacy-component example to utilize the app router. (#7…

…3344) This PR updates the image-legacy-component example for using the App Router. Here are the changes that have been made: - I renamed the `pages` folder and moved it to the `app` folder. - Added the `layout.tsx` file as part of the App Router. - Moved `component` folder to `app` folder. - Updated the `package.json` file. CC: @samcx --------- Co-authored-by: Sam Ko <[email protected]>
vercel · Nov 29, 2024 · 1efa3c2 · 1efa3c2
1 parent 803dca3
commit 1efa3c2
Show file tree

Hide file tree

Showing 25 changed files with 353 additions and 324 deletions.
diff --git a/examples/image-legacy-component/app/background/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/background.tsx" />
+      <div className={styles.bgWrap}>
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+        />
+      </div>
+      <p className={styles.bgText}>
+        Image Component
+        <br />
+        as a Background
+      </p>
+    </div>
+  );
+}
diff --git a/...es/image-legacy-component/pages/color.tsx → ...image-legacy-component/app/color/page.tsx b/...es/image-legacy-component/pages/color.tsx → ...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 = () => (
-  <div>
-    <ViewSource pathname="pages/color.tsx" />
-    <h1>Image Component With Color Data URL</h1>
-    <Image
-      alt="Dog"
-      src="/dog.jpg"
-      placeholder="blur"
-      blurDataURL={rgbDataURL(237, 181, 6)}
-      width={750}
-      height={1000}
-    />
-    <Image
-      alt="Cat"
-      src="/cat.jpg"
-      placeholder="blur"
-      blurDataURL={rgbDataURL(2, 129, 210)}
-      width={750}
-      height={1000}
-    />
-  </div>
-);
-
-export default Color;
+export default function Color() {
+  return (
+    <div>
+      <ViewSource pathname="pages/color.tsx" />
+      <h1>Image Component With Color Data URL</h1>
+      <Image
+        alt="Dog"
+        src="/dog.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(237, 181, 6)}
+        width={750}
+        height={1000}
+      />
+      <Image
+        alt="Cat"
+        src="/cat.jpg"
+        placeholder="blur"
+        blurDataURL={rgbDataURL(2, 129, 210)}
+        width={750}
+        height={1000}
+      />
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/layout-fill/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/layout-fill.tsx" />
+      <h1>Image Component With Layout Fill</h1>
+      <div style={{ position: "relative", width: "300px", height: "500px" }}>
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="cover"
+        />
+      </div>
+      <div style={{ position: "relative", width: "300px", height: "500px" }}>
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="contain"
+        />
+      </div>
+      <div style={{ position: "relative", width: "300px", height: "500px" }}>
+        <Image
+          alt="Mountains"
+          src="/mountains.jpg"
+          layout="fill"
+          objectFit="none"
+          quality={100}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/layout-fixed/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/layout-fixed.tsx" />
+      <h1>Image Component With Layout Fixed</h1>
+      <Image
+        alt="Mountains"
+        src="/mountains.jpg"
+        layout="fixed"
+        width={700}
+        height={475}
+      />
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/layout-intrinsic/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/layout-intrinsic.tsx" />
+      <h1>Image Component With Layout Intrinsic</h1>
+      <Image
+        alt="Mountains"
+        src="/mountains.jpg"
+        layout="intrinsic"
+        width={700}
+        height={475}
+      />
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/layout-responsive/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/layout-responsive.tsx" />
+      <h1>Image Component With Layout Responsive</h1>
+      <Image
+        alt="Mountains"
+        src="/mountains.jpg"
+        layout="responsive"
+        width={700}
+        height={475}
+      />
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/layout.tsx 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 (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/examples/image-legacy-component/app/page.tsx 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 (
+    <div className={styles.container}>
+      <ViewSource pathname="pages/index.tsx" />
+      <div className={styles.card}>
+        <h1>Image Component with Next.js</h1>
+        <p>
+          This page demonstrates the usage of the{" "}
+          <a href="https://nextjs.org/docs/api-reference/next/legacy/image">
+            next/legacy/image
+          </a>{" "}
+          component with live examples.
+        </p>
+        <p>
+          This component is designed to{" "}
+          <a href="https://nextjs.org/docs/basic-features/image-optimization">
+            automatically optimize
+          </a>{" "}
+          images on-demand as the browser requests them.
+        </p>
+        <hr className={styles.hr} />
+        <h2 id="layout">Layout</h2>
+        <p>
+          External images must be configured in <Code>next.config.js</Code>{" "}
+          using the <Code>remotePatterns</Code> property.
+        </p>
+        <p>
+          Select a layout below and try resizing the window or rotating your
+          device to see how the image reacts.
+        </p>
+        <ul>
+          <li>
+            <Link href="/layout-intrinsic">layout="intrinsic"</Link>
+          </li>
+          <li>
+            <Link href="/layout-responsive">layout="responsive"</Link>
+          </li>
+          <li>
+            <Link href="/layout-fixed">layout="fixed"</Link>
+          </li>
+          <li>
+            <Link href="/layout-fill">layout="fill"</Link>
+          </li>
+          <li>
+            <Link href="/background">background demo</Link>
+          </li>
+        </ul>
+        <hr className={styles.hr} />
+        <h2 id="placeholder">Placeholder</h2>
+        <p>
+          The <Code>placeholder</Code> property tells the image what to do while
+          loading.
+        </p>
+        <p>
+          You can optionally enable a blur-up placeholder while the high
+          resolution image loads.
+        </p>
+        <p>
+          Try it out below (you may need to disable cache in dev tools to see
+          the effect if you already visited):
+        </p>
+        <ul>
+          <li>
+            <Link href="/placeholder">placeholder="blur"</Link>
+          </li>
+          <li>
+            <Link href="/shimmer">
+              placeholder="blur" with animated shimmer blurDataURL
+            </Link>
+          </li>
+          <li>
+            <Link href="/color">
+              placeholder="blur" with solid color blurDataURL
+            </Link>
+          </li>
+        </ul>
+        <hr className={styles.hr} />
+        <h2 id="internal">Internal Image</h2>
+        <p>
+          The following is an example of a reference to an internal image from
+          the <Code>public</Code> directory.
+        </p>
+        <p>
+          This image is intentionally large so you have to scroll down to the
+          next image.
+        </p>
+        <Image alt="Vercel logo" src="/vercel.png" width={1000} height={1000} />
+        <hr className={styles.hr} />
+        <h2 id="external">External Image</h2>
+        <p>
+          The following is an example of a reference to an external image at{" "}
+          <Code>assets.vercel.com</Code>.
+        </p>
+        <p>
+          External images must be configured in <Code>next.config.js</Code>{" "}
+          using the <Code>remotePatterns</Code> property.
+        </p>
+        <Image
+          alt="Next.js logo"
+          src="https://assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js-bg.png"
+          width={1200}
+          height={400}
+        />
+        <hr className={styles.hr} />
+        <h2 id="more">Learn More</h2>
+        <p>
+          You can optionally configure a cloud provider, device sizes, and more!
+        </p>
+        <p>
+          Checkout the{" "}
+          <a href="https://nextjs.org/docs/basic-features/image-optimization">
+            Image Optimization documentation
+          </a>{" "}
+          to learn more.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/app/placeholder/page.tsx 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 (
+    <div>
+      <ViewSource pathname="pages/placeholder.tsx" />
+      <h1>Image Component With Placeholder Blur</h1>
+      <Image
+        alt="Mountains"
+        src={mountains}
+        placeholder="blur"
+        width={700}
+        height={475}
+      />
+    </div>
+  );
+}
diff --git a/.../image-legacy-component/pages/shimmer.tsx → ...age-legacy-component/app/shimmer/page.tsx b/.../image-legacy-component/pages/shimmer.tsx → ...age-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) => `
 <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -20,19 +20,19 @@ const toBase64 = (str: string) =>
     ? Buffer.from(str).toString("base64")
     : window.btoa(str);
 
-const Shimmer = () => (
-  <div>
-    <ViewSource pathname="pages/shimmer.tsx" />
-    <h1>Image Component With Shimmer Data URL</h1>
-    <Image
-      alt="Mountains"
-      src="/mountains.jpg"
-      placeholder="blur"
-      blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
-      width={700}
-      height={475}
-    />
-  </div>
-);
-
-export default Shimmer;
+export default function Shimmer() {
+  return (
+    <div>
+      <ViewSource pathname="pages/shimmer.tsx" />
+      <h1>Image Component With Shimmer Data URL</h1>
+      <Image
+        alt="Mountains"
+        src="/mountains.jpg"
+        placeholder="blur"
+        blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
+        width={700}
+        height={475}
+      />
+    </div>
+  );
+}
diff --git a/examples/image-legacy-component/components/code.tsx 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 <code className={styles.inlineCode}>{children}</code>;
+}