Merge remote-tracking branch 'upstream/canary' into i18n/custom-routes

vercel · Nov 14, 2020 · e2e6bc1 · e2e6bc1
2 parents 24ba836 + 17a53e2
commit e2e6bc1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 42 deletions.
diff --git a/examples/image-component/README.md b/examples/image-component/README.md
@@ -2,7 +2,7 @@
 
 This example shows how to use the [Image Component in Next.js](https://nextjs.org/docs/api-reference/next/image) serve optimized, responsive images.
 
-The index page ([`pages/index.js`](pages/index.js)) has a couple images, one internal image and one external image. In [`next.config.js`](next.config.js), the `domains` property is used to enable external images. Run or deploy the app to see how it works!
+The index page ([`pages/index.js`](pages/index.js)) has a couple images, one internal image and one external image. In [`next.config.js`](next.config.js), the `domains` property is used to enable external images. The other pages demonstrate the different layouts. Run or deploy the app to see how it works!
 
 ## Deploy your own
 

diff --git a/examples/image-component/pages/index.js b/examples/image-component/pages/index.js
@@ -11,52 +11,28 @@ const Index = () => (
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>
-        The images below use the{' '}
+        This page demonstrates the usage of the{' '}
         <a href="https://nextjs.org/docs/api-reference/next/image">
           next/image
         </a>{' '}
-        component to ensure optimal format and size for this browser.
+        component with live examples.
       </p>
       <p>
-        Images are also lazy loaded by default which means they don't load until
-        scrolled into view.
-      </p>
-      <p>Try scolling down to try it out!</p>
-      <hr className={styles.hr} />
-      <p>
-        The following is an example of a reference to an interal image from the{' '}
-        <Code>public</Code> directory.
-      </p>
-      <p>
-        Notice that the image is responsive. As you adjust your browser width, a
-        different sized image is loaded.
-      </p>
-      <Image alt="Vercel logo" src="/vercel.png" width={1000} height={1000} />
-      <hr className={styles.hr} />
-      <p>
-        The following is an example of a reference to an external image at{' '}
-        <Code>assets.vercel.com</Code>.
-      </p>
-      <p>
-        External domains must be configured in <Code>next.config.js</Code> using
-        the <Code>domains</Code> property.
+        This component is designed to{' '}
+        <a href="https://nextjs.org/docs/basic-features/image-optimization">
+          automatically optimizate
+        </a>{' '}
+        images on-demand as the browser requests them.
       </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>Layouts</h2>
+      <h2 id="layout">Layout</h2>
       <p>
-        The following pages demonstrate possible <Code>layout</Code> property
-        values.
+        The <Code>layout</Code> property tells the image to respond differently
+        depending on the device size or the container size.
       </p>
       <p>
-        Click on one to try it out with your current device and be sure to
-        change the window size or rotate your device to see how the image
-        reacts.
+        Select a layout below and try resizing the window or rotating your
+        device to see how the image reacts.
       </p>
       <ul>
         <li>
@@ -86,11 +62,44 @@ const Index = () => (
         </li>
       </ul>
       <hr className={styles.hr} />
-      Checkout the documentation for{' '}
-      <a href="https://nextjs.org/docs/basic-features/image-optimization">
-        Image Optimization
-      </a>{' '}
-      to learn more.
+      <h2 id="internal">Internal Image</h2>
+      <p>
+        The following is an example of a reference to an interal 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 domains must be configured in <Code>next.config.js</Code> using
+        the <Code>domains</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>
 )