Merge branch 'canary' into add-contentful-image-component

docs/advanced-features/multi-zones.md

@@ -1,6 +1,6 @@
 # Multi Zones
 
-<details>
+<details open>
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-zones">With Zones</a></li>
@@ -21,27 +21,10 @@ With multi zones support, you can merge both these apps into a single one allowi
 There are no special zones related APIs. You only need to do following:
 
 - Make sure to keep only the pages you need in your app, meaning that an app can't have pages from another app, if app `A` has `/blog` then app `B` shouldn't have it too.
-- Make sure to add an [assetPrefix](/docs/api-reference/next.config.js/cdn-support-with-asset-prefix.md) to avoid conflicts with static files.
+- Make sure to configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files.
 
 ## How to merge zones
 
-You can merge zones using any HTTP proxy.
-
-For [Vercel](https://vercel.com/), you can use a single `vercel.json` to deploy both apps. It allows you to define routing routes for multiple apps like below:
-
-```json
-{
-  "version": 2,
-  "builds": [
-    { "src": "blog/package.json", "use": "@vercel/next" },
-    { "src": "home/package.json", "use": "@vercel/next" }
-  ],
-  "routes": [
-    { "src": "/blog/_next(.*)", "dest": "blog/_next$1" },
-    { "src": "/blog(.*)", "dest": "blog/blog$1" },
-    { "src": "(.*)", "dest": "home$1" }
-  ]
-}
-```
-
-You can also configure a proxy server to route using a set of routes like the ones above, e.g deploy the blog app to `https://blog.example.com` and the home app to `https://home.example.com` and then add a proxy server for both apps in `https://example.com`.
+You can merge zones using [Rewrites](/docs/api-reference/next.config.js/rewrites.md) in one of the apps or any HTTP proxy.
+
+For [Vercel](https://vercel.com/), you can use a [monorepo](https://vercel.com/blog/monorepos) to deploy both apps. Check the [Monorepos blog post](https://vercel.com/blog/monorepos) for more details on how it works and our [`with-zones` example](https://github.com/vercel/next.js/tree/canary/examples/with-zones) for a detailed guide using multiple Next.js applications.

docs/api-reference/next.config.js/headers.md

@@ -175,3 +175,41 @@ module.exports = {
   },
 }
 ```
+
+### Headers with i18n support
+
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with headers each `source` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the header:
+
+```js
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async headers() {
+    return [
+      {
+        source: '/with-locale', // automatically handles all locales
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+      {
+        // does not handle locales automatically since locale: false is set
+        source: '/nl/with-locale-manual',
+        locale: false,
+        headers: [
+          {
+            key: 'x-hello',
+            value: 'world',
+          },
+        ],
+      },
+    ]
+  },
+}
+```

docs/api-reference/next.config.js/redirects.md

@@ -120,4 +120,34 @@ module.exports = {
 }
 ```
 
+### Redirects with i18n support
+
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with redirects each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the redirect:
+
+```js
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async redirects() {
+    return [
+      {
+        source: '/with-locale', // automatically handles all locales
+        destination: '/another', // automatically passes the locale on
+        permanent: false,
+      },
+      {
+        // does not handle locales automatically since locale: false is set
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+        permanent: false,
+      },
+    ]
+  },
+}
+```
+
 In some rare cases, you might need to assign a custom status code for older HTTP Clients to properly redirect. In these cases, you can use the `statusCode` property instead of the `permanent` property, but not both. Note: to ensure IE11 compatibility a `Refresh` header is automatically added for the 308 status code.

docs/api-reference/next.config.js/rewrites.md

@@ -163,3 +163,31 @@ module.exports = {
   },
 }
 ```
+
+### Rewrites with i18n support
+
+When leveraging [`i18n` support](/docs/advanced-features/i18n-routing.md) with rewrites each `source` and `destination` is automatically prefixed to handle the configured `locales` unless you add `locale: false` to the rewrite:
+
+```js
+module.exports = {
+  i18n: {
+    locales: ['en', 'fr', 'de'],
+    defaultLocale: 'en',
+  },
+
+  async rewrites() {
+    return [
+      {
+        source: '/with-locale', // automatically handles all locales
+        destination: '/another', // automatically passes the locale on
+      },
+      {
+        // does not handle locales automatically since locale: false is set
+        source: '/nl/with-locale-manual',
+        destination: '/nl/another',
+        locale: false,
+      },
+    ]
+  },
+}
+```

docs/api-reference/next.config.js/runtime-configuration.md

@@ -32,6 +32,7 @@ To get access to the runtime configs in your app use `next/config`, like so:
 
 ```jsx
 import getConfig from 'next/config'
+import Image from 'next/image'
 
 // Only holds serverRuntimeConfig and publicRuntimeConfig
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
@@ -43,7 +44,11 @@ console.log(publicRuntimeConfig.staticFolder)
 function MyImage() {
   return (
     <div>
-      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} alt="logo" />
+      <Image
+        src={`${publicRuntimeConfig.staticFolder}/logo.png`}
+        alt="logo"
+        layout="fill"
+      />
     </div>
   )
 }

docs/api-reference/next/image.md

@@ -139,7 +139,11 @@ When true, the source image will be served as-is instead of changing quality, si
 
 ## Other Props
 
-All other properties on the `Image` component will be passed to the underlying `img` element, except for `style`. Use `className` instead.
+Other properties on the `Image` component will be passed to the underlying `img` element with the exception of the following:
+
+- `style`. Use `className` instead.
+- `srcSet`. Use [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes) instead.
+- `decoding`. It is always `"async"`.
 
 ## Related
 

docs/api-reference/next/link.md

@@ -202,12 +202,21 @@ The default behavior of the `Link` component is to `push` a new URL into the `hi
 `Link` supports any component that supports the `onClick` event, in the case you don't provide an `<a>` tag, consider the following example:
 
 ```jsx
-<Link href="/about">
-  <img src="/static/image.png" alt="image" />
-</Link>
+import Link from 'next/link'
+import Image from 'next/image'
+
+function Avatar() {
+  return (
+    <Link href="/about">
+      <Image src="/me.png" alt="me" width="64" height="64" />
+    </Link>
+  )
+}
+
+export default Avatar
 ```
 
-The child of `Link` is `<img>` instead of `<a>`. `Link` will send the `onClick` property to `<img>` but won't pass the `href` property.
+The child of `Link` is [`Image`](/docs/api-reference/next/image.md) instead of `<a>`. `Link` will send the `onClick` property to `Image` but won't pass the `href` property.
 
 ## Disable scrolling to the top of the page
 

docs/api-routes/response-helpers.md

@@ -25,4 +25,4 @@ The included helpers are:
 - `res.status(code)` - A function to set the status code. `code` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
 - `res.json(json)` - Sends a JSON response. `json` must be a valid JSON object
 - `res.send(body)` - Sends the HTTP response. `body` can be a `string`, an `object` or a `Buffer`
-- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Found".
+- `res.redirect([status,] path)` - Redirects to a specified path or URL. `status` must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). If not specified, `status` defaults to "307" "Temporary redirect".

docs/basic-features/static-file-serving.md

@@ -6,14 +6,16 @@ description: Next.js allows you to serve static files, like images, in the publi
 
 Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`).
 
-For example, if you add an image to `public/my-image.png`, the following code will access the image:
+For example, if you add an image to `public/me.png`, the following code will access the image:
 
 ```jsx
-function MyImage() {
-  return <img src="/my-image.png" alt="my image" />
+import Image from 'next/image'
+
+function Avatar() {
+  return <Image src="/me.png" alt="me" width="64" height="64" />
 }
 
-export default MyImage
+export default Avatar
 ```
 
 This folder is also useful for `robots.txt`, `favicon.ico`, Google Site Verification, and any other static files (including `.html`)!

docs/manifest.json

@@ -25,14 +25,14 @@
               "title": "Image Optimization",
               "path": "/docs/basic-features/image-optimization.md"
             },
-            {
-              "title": "Fast Refresh",
-              "path": "/docs/basic-features/fast-refresh.md"
-            },
             {
               "title": "Static File Serving",
               "path": "/docs/basic-features/static-file-serving.md"
             },
+            {
+              "title": "Fast Refresh",
+              "path": "/docs/basic-features/fast-refresh.md"
+            },
             {
               "title": "TypeScript",
               "path": "/docs/basic-features/typescript.md"

examples/cms-cosmic/components/cover-image.js

@@ -7,7 +7,7 @@ export default function CoverImage({ title, url, slug }) {
     <Imgix
       src={url}
       alt={`Cover Image for ${title}`}
-      className={cn('lazyload shadow-small', {
+      className={cn('lazyload shadow-small w-full', {
         'hover:shadow-medium transition-shadow duration-200': slug,
       })}
       sizes="100vw"

examples/cms-cosmic/lib/api.js

@@ -40,6 +40,7 @@ export async function getAllPostsForHome(preview) {
   const params = {
     type: 'posts',
     props: 'title,slug,metadata,created_at',
+    sort: '-created_at',
     ...(preview && { status: 'all' }),
   }
   const data = await bucket.getObjects(params)

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
 

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>
 )