Merge branch 'canary' into chore/image-domain-docs-update

.github/ISSUE_TEMPLATE/1.Bug_report.md

@@ -1,6 +1,7 @@
 ---
 name: Bug report
 about: Create a bug report for the Next.js core / examples
+labels: 'template: bug'
 ---
 
 # Bug report

.github/ISSUE_TEMPLATE/2.Feature_request.md

@@ -1,6 +1,7 @@
 ---
 name: Feature request
 about: Create a feature request for the Next.js core
+labels: 'template: story'
 ---
 
 # Feature request

.github/workflows/build_test_deploy.yml

@@ -107,10 +107,12 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
-      - run: cat packages/next/package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp packages/next/package.json
-      - run: cat packages/next/package.json | jq '.resolutions.react = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
-      - run: cat packages/next/package.json | jq '.resolutions."react-dom" = "^17.0.0-rc.1"' > package.json.tmp && mv package.json.tmp packages/next/package.json
+      - run: cat package.json | jq '.resolutions.webpack = "^5.0.0-beta.30"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions.react = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
+      - run: cat package.json | jq '.resolutions."react-dom" = "^17.0.1"' > package.json.tmp && mv package.json.tmp package.json
       - run: yarn install --check-files
+      - run: yarn list webpack react react-dom
+      - run: node run-tests.js test/integration/link-ref/test/index.test.js
       - run: node run-tests.js test/integration/production/test/index.test.js
       - run: node run-tests.js test/integration/basic/test/index.test.js
       - run: node run-tests.js test/integration/async-modules/test/index.test.js

docs/advanced-features/automatic-static-optimization.md

@@ -34,8 +34,6 @@ And if you add `getServerSideProps` to the page, it will then be JavaScript, lik
 .next/server/static/${BUILD_ID}/about.js
 ```
 
-In development you'll know if `pages/about.js` is optimized or not thanks to the included [static optimization indicator](/docs/api-reference/next.config.js/static-optimization-indicator.md).
-
 ## Caveats
 
 - If you have a [custom `App`](/docs/advanced-features/custom-app.md) with `getInitialProps` then this optimization will be turned off in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).

docs/advanced-features/i18n-routing.md

@@ -131,6 +131,21 @@ When using Domain Routing, if a user with the `Accept-Language` header `fr;q=0.9
 
 When using Sub-path Routing, the user would be redirected to `/fr`.
 
+### Disabling Automatic Locale Detection
+
+The automatic locale detection can be disabled with:
+
+```js
+// next.config.js
+module.exports = {
+  i18n: {
+    localeDetection: false,
+  },
+}
+```
+
+When `localeDetection` is set to `false` Next.js will no longer automatically redirect based on the user's preferred locale and will only provide locale information detected from either the locale based domain or locale path as described above.
+
 ## Accessing the locale information
 
 You can access the locale information via the Next.js router. For example, using the [`useRouter()`](https://nextjs.org/docs/api-reference/next/router#userouter) hook the following properties are available:

docs/api-reference/next/image.md

@@ -46,13 +46,14 @@ export default Home
 `Image` accepts the following props:
 
 - `src` - The path or URL to the source image. This is required.
-- `width` - The intrinsic width of the source image in pixels. Must be an integer without a unit. Required unless `unsized` is true.
-- `height` - The intrinsic height of the source image, in pixels. Must be an integer without a unit. Required unless `unsized` is true.
+- `width` - The width of the image, in pixels. Must be an integer without a unit. Required unless `layout="fill"`.
+- `height` - The height of the image, in pixels. Must be an integer without a unit. Required unless `layout="fill"`.
+- `layout` - The rendered layout of the image. If `fixed`, the image dimensions will not change as the viewport changes (no responsiveness). If `intrinsic`, the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports. If `responsive`, the image will scale the dimensions down for smaller viewports and scale up for larger viewports. If `fill`, the image will stretch both width and height to the dimensions of the parent element. Default `intrinsic`.
 - `sizes` - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
 - `quality` - The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Default 75.
 - `loading` - The loading behavior. When `lazy`, defer loading the image until it reaches a calculated distance from the viewport. When `eager`, load the image immediately. Default `lazy`. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
 - `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
 - `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.
-- `unsized` - When true, the `width` and `height` requirement can by bypassed. Should _not_ be used with above-the-fold images. Should _not_ be used with `priority`.
+- `unsized` - **Deprecated** When true, the `width` and `height` requirement can by bypassed. Use the `layout` property instead!
 
 All other properties on the `<Image>` component will be passed to the underlying `<img>` element.

docs/basic-features/data-fetching.md

@@ -63,6 +63,7 @@ The `context` parameter is an object containing the following keys:
 - `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
 - `revalidate` - An **optional** amount in seconds after which a page re-generation can occur. More on [Incremental Static Regeneration](#incremental-static-regeneration)
 - `notFound` - An optional boolean value to allow the page to return a 404 status and page. More on [Incremental Static Regeneration](#incremental-static-regeneration)
+- `redirect` - An optional redirect value to allow redirecting to internal and external resources. It should match the shape of `{ destination: string, permanent: boolean }`. 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**: You can import modules in top-level scope for use in `getStaticProps`.
 > Imports used in `getStaticProps` will [not be bundled for the client-side](#write-server-side-code-directly).
@@ -552,6 +553,12 @@ The `context` parameter is an object containing the following keys:
 - `locales` contains all supported locales (if enabled).
 - `defaultLocale` contains the configured default locale (if enabled).
 
+`getServerSideProps` should return an object with:
+
+- `props` - A **required** object with the props that will be received by the page component. It should be a [serializable object](https://en.wikipedia.org/wiki/Serialization)
+- `notFound` - An optional boolean value to allow the page to return a 404 status and page. More on [Incremental Static Regeneration](#incremental-static-regeneration)
+- `redirect` - An optional redirect value to allow redirecting to internal and external resources. It should match the shape of `{ destination: string, permanent: boolean }`. 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**: You can import modules in top-level scope for use in `getServerSideProps`.
 > Imports used in `getServerSideProps` will not be bundled for the client-side.
 >

docs/basic-features/image-optimization.md

@@ -62,8 +62,8 @@ If no configuration is provided, the following default configuration will be use
 ```js
 module.exports = {
   images: {
-    deviceSizes: [320, 420, 768, 1024, 1200],
-    imageSizes: [],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     domains: [],
     path: '/_next/image',
     loader: 'default',
@@ -77,24 +77,24 @@ This means you only need to configure the properties you wish to change.
 
 ### Device Sizes
 
-You can specify a list of device width breakpoints using the `deviceSizes` property. Since images maintain their aspect ratio using the `width` and `height` attributes of the source image, there is no need to specify height in `next.config.js` – only the width. These values will be used by the browser to determine which size image should load.
+You can specify a list of device width breakpoints using the `deviceSizes` property. These widths are used when the [`next/image`](/docs/api-reference/next/image.md) component uses `layout="responsive"` or `layout="fill"` so that the correct image is served for the device visiting your website.
 
 ```js
 module.exports = {
   images: {
-    deviceSizes: [320, 420, 768, 1024, 1200],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
   },
 }
 ```
 
 ### Image Sizes
 
-You can specify a list of exact image widths using the `imageSizes` property. These widths should be different than the widths defined in `deviceSizes`. The purpose is for images that don't scale with the browser window, such as icons, badges, or profile images. If the `width` property of a [`next/image`](/docs/api-reference/next/image.md) component matches a value in `imageSizes`, the image will be rendered at that exact width.
+You can specify a list of image widths using the `imageSizes` property. These widths should be different than the widths defined in `deviceSizes` because the arrays will be concatentated. These widths are used when the [`next/image`](/docs/api-reference/next/image.md) component uses `layout="fixed"` or `layout="intrinsic"`.
 
 ```js
 module.exports = {
   images: {
-    imageSizes: [16, 32, 64],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
   },
 }
 ```
@@ -143,7 +143,7 @@ The expiration (or rather Max Age) is defined by the upstream server's `Cache-Co
 
 If `s-maxage` is found in `Cache-Control`, it is used. If no `s-maxage` is found, then `max-age` is used. If no `max-age` is found, then 60 seconds is used.
 
-You can configure [`deviceSizes`](#device-sizes) to reduce the total number of possible generated images.
+You can configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#device-sizes) to reduce the total number of possible generated images.
 
 ## Related
 

docs/manifest.json

@@ -292,10 +292,6 @@
               "title": "Compression",
               "path": "/docs/api-reference/next.config.js/compression.md"
             },
-            {
-              "title": "Static Optimization Indicator",
-              "path": "/docs/api-reference/next.config.js/static-optimization-indicator.md"
-            },
             {
               "title": "Runtime Configuration",
               "path": "/docs/api-reference/next.config.js/runtime-configuration.md"

errors/install-sharp.md

@@ -2,27 +2,24 @@
 
 #### Why This Error Occurred
 
-Using Next.js' built-in Image Optimization requires that you install `sharp`.
+Using Next.js' built-in [Image Optimization](https://nextjs.org/docs/basic-features/image-optimization) requires [sharp](https://www.npmjs.com/package/sharp) as a dependency.
 
-Since `sharp` is optional, it may have been skipped if you installed `next` with the [`--no-optional`](https://docs.npmjs.com/cli/install) flag or it may have been skipped if your platform does not support `sharp`.
+You are seeing this error because your OS was unable to [install sharp](https://sharp.pixelplumbing.com/install) properly, either using pre-built binaries or building from source.
 
 #### Possible Ways to Fix It
 
-Option 1: Install the `sharp` package in your project.
+Option 1: Use a different version of Node.js and try to install `sharp` again.
 
 ```bash
 npm i sharp
 # or
 yarn add sharp
 ```
 
-Option 2: Configure an external loader in `next.config.js` such as [imgix](https://imgix.com).
+Option 2: If using macOS, ensure XCode Build Tools are installed and try to install `sharp` again.
 
-```js
-module.exports = {
-  images: {
-    path: 'https://example.com/myaccount/',
-    loader: 'imgix',
-  },
-}
-```
+For example, see [macOS Catalina instructions](https://github.com/nodejs/node-gyp/blob/66c0f0446749caa591ad841cd029b6d5b5c8da42/macOS_Catalina.md).
+
+Option 3: Use a different OS and try to install `sharp` again.
+
+For example, if you're using Windows, try using [WSL](https://docs.microsoft.com/en-us/windows/wsl/about) (Windows Subsystem for Linux).

errors/invalid-images-config.md

@@ -12,9 +12,9 @@ Make sure your `images` field follows the allowed config shape and values:
 module.exports = {
   images: {
     // limit of 25 deviceSizes values
-    deviceSizes: [320, 420, 768, 1024, 1200],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
     // limit of 25 imageSizes values
-    imageSizes: [],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
     // limit of 50 domains values
     domains: [],
     path: '/_next/image',

errors/invalid-redirect-gssp.md

@@ -13,16 +13,16 @@ export const getStaticProps = ({ params }) => {
   if (params.slug === 'deleted-post') {
     return {
       redirect: {
-        permanent: true // or false
-        destination: '/some-location'
-      }
+        permanent: true, // or false
+        destination: '/some-location',
+      },
     }
   }
 
   return {
     props: {
       // data
-    }
+    },
   }
 }
 ```

examples/cms-wordpress/components/avatar.js

@@ -1,17 +1,22 @@
 export default function Avatar({ author }) {
-  const name =
-    author.firstName && author.lastName
+  const name = author
+    ? author.firstName && author.lastName
       ? `${author.firstName} ${author.lastName}`
       : author.name
+    : null
 
   return (
-    <div className="flex items-center">
-      <img
-        src={author.avatar.url}
-        className="w-12 h-12 rounded-full mr-4"
-        alt={name}
-      />
-      <div className="text-xl font-bold">{name}</div>
-    </div>
+    <>
+      {author && (
+        <div className="flex items-center">
+          <img
+            src={author.avatar.url}
+            className="w-12 h-12 rounded-full mr-4"
+            alt={name}
+          />
+          <div className="text-xl font-bold">{name}</div>
+        </div>
+      )}
+    </>
   )
 }

examples/cms-wordpress/components/hero-post.js

@@ -14,7 +14,9 @@ export default function HeroPost({
   return (
     <section>
       <div className="mb-8 md:mb-16">
-        <CoverImage title={title} coverImage={coverImage} slug={slug} />
+        {coverImage && (
+          <CoverImage title={title} coverImage={coverImage} slug={slug} />
+        )}
       </div>
       <div className="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28">
         <div>

examples/cms-wordpress/components/more-stories.js

@@ -11,9 +11,9 @@ export default function MoreStories({ posts }) {
           <PostPreview
             key={node.slug}
             title={node.title}
-            coverImage={node.featuredImage.node}
+            coverImage={node.featuredImage?.node}
             date={node.date}
-            author={node.author.node}
+            author={node.author?.node}
             slug={node.slug}
             excerpt={node.excerpt}
           />

examples/cms-wordpress/pages/index.js

@@ -22,9 +22,9 @@ export default function Index({ allPosts: { edges }, preview }) {
           {heroPost && (
             <HeroPost
               title={heroPost.title}
-              coverImage={heroPost.featuredImage.node}
+              coverImage={heroPost.featuredImage?.node}
               date={heroPost.date}
-              author={heroPost.author.node}
+              author={heroPost.author?.node}
               slug={heroPost.slug}
               excerpt={heroPost.excerpt}
             />

examples/cms-wordpress/pages/posts/[slug].js

@@ -41,9 +41,9 @@ export default function Post({ post, posts, preview }) {
               </Head>
               <PostHeader
                 title={post.title}
-                coverImage={post.featuredImage.node}
+                coverImage={post.featuredImage?.node}
                 date={post.date}
-                author={post.author.node}
+                author={post.author?.node}
                 categories={post.categories}
               />
               <PostBody content={post.content} />

examples/i18n-routing/README.md

@@ -8,7 +8,7 @@ For further documentation on this feature see the documentation [here](https://n
 
 Deploy the example using [Vercel](https://vercel.com):
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/amp)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/i18n-routing)
 
 ## How to use
 

examples/i18n-routing/pages/gsp/[slug].js

@@ -11,7 +11,7 @@ export default function GspPage(props) {
 
   return (
     <div>
-      <h1>getServerSideProps page</h1>
+      <h1>getStaticProps page</h1>
       <p>Current slug: {query.slug}</p>
       <p>Current locale: {props.locale}</p>
       <p>Default locale: {defaultLocale}</p>

examples/i18n-routing/pages/gsp/index.js

@@ -7,7 +7,7 @@ export default function GspPage(props) {
 
   return (
     <div>
-      <h1>getServerSideProps page</h1>
+      <h1>getStaticProps page</h1>
       <p>Current locale: {props.locale}</p>
       <p>Default locale: {defaultLocale}</p>
       <p>Configured locales: {JSON.stringify(props.locales)}</p>