Merge branch 'canary' into respect-cache-headers

# Conflicts:
#	packages/next/server/image-optimizer.ts

.github/CODEOWNERS

@@ -1,6 +1,6 @@
 # Learn how to add code owners here:
 # https://help.github.com/en/articles/about-code-owners
 
-*          @timneutkens @ijjk @lfades @divmain @shuding
-/docs/     @timneutkens @ijjk @lfades @divmain @shuding @leerob
-/examples/ @timneutkens @ijjk @lfades @divmain @shuding @leerob
+*          @timneutkens @ijjk @shuding @styfle @huozhi @padmaia
+/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades
+/examples/ @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades

.github/labeler.json

@@ -9,13 +9,22 @@
       "packages/react-refresh-utils/**",
       "packages/next-codemod/**"
     ],
-    "type: chrome": [
+    "created-by: Chrome Aurora": [
       { "type": "user", "pattern": "spanicker" },
       { "type": "user", "pattern": "housseindjirdeh" },
       { "type": "user", "pattern": "devknoll" },
       { "type": "user", "pattern": "janicklas-ralph" },
       { "type": "user", "pattern": "atcastle" },
       { "type": "user", "pattern": "Joonpark13" }
+    ],
+    "created-by: Next.js team": [
+      { "type": "user", "pattern": "ijjk" },
+      { "type": "user", "pattern": "padmaia" },
+      { "type": "user", "pattern": "huozhi" },
+      { "type": "user", "pattern": "shuding" },
+      { "type": "user", "pattern": "sokra" },
+      { "type": "user", "pattern": "styfle" },
+      { "type": "user", "pattern": "timneutkens" }
     ]
   }
 }

.github/pull_request_template.md

@@ -8,6 +8,7 @@ Choose the right checklist for the change that you're making:
 
 - [ ] Related issues linked using `fixes #number`
 - [ ] Integration tests added
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Feature
 
@@ -16,6 +17,7 @@ Choose the right checklist for the change that you're making:
 - [ ] Integration tests added
 - [ ] Documentation added
 - [ ] Telemetry added. In case of a feature if it's used or not.
+- [ ] Errors have helpful link attached, see `contributing.md`
 
 ## Documentation / Examples
 

.github/workflows/build_test_deploy.yml

@@ -55,7 +55,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./check-pre-compiled.sh
+      - run: ./scripts/check-pre-compiled.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testUnit:
@@ -146,7 +146,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: bash ./test-pnp.sh
+      - run: bash ./scripts/test-pnp.sh
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
   testsPass:
@@ -251,7 +251,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
 
-      - run: ./publish-release.sh
+      - run: ./scripts/publish-release.sh
 
   prStats:
     name: Release Stats
@@ -263,7 +263,7 @@ jobs:
         with:
           path: ./*
           key: ${{ github.sha }}
-      - run: ./release-stats.sh
+      - run: ./scripts/release-stats.sh
       - uses: ./.github/actions/next-stats-action
         env:
           PR_STATS_COMMENT_TOKEN: ${{ secrets.PR_STATS_COMMENT_TOKEN }}

azure-pipelines.yml

@@ -111,36 +111,37 @@ stages:
           - script: |
               node run-tests.js -g 1/1 --timings --azure --type unit
             displayName: 'Run tests'
-
-      - job: test_chrome_integration
-        pool:
-          vmImage: 'windows-2019'
-        strategy:
-          matrix:
-            nodejs-1:
-              group: 1/4
-            nodejs-2:
-              group: 2/4
-            nodejs-3:
-              group: 3/4
-            nodejs-4:
-              group: 4/4
-        steps:
-          - checkout: none
-          - script: |
-              wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
-            displayName: 'List Chrome version'
-          - task: NodeTool@0
-            inputs:
-              versionSpec: $(node_version)
-            displayName: 'Install Node.js'
-          - task: Cache@2
-            inputs:
-              # use deterministic cache key that is specific
-              # to this test run
-              key: $(Build.SourceVersion)
-              path: $(System.DefaultWorkingDirectory)
-            displayName: Cache Build
-          - script: |
-              node run-tests.js -g $(group) --timings --azure
-            displayName: 'Run tests'
+      # TODO: investigate re-enabling when stability matches running in
+      # tests in ubuntu environment
+      # - job: test_chrome_integration
+      #   pool:
+      #     vmImage: 'windows-2019'
+      #   strategy:
+      #     matrix:
+      #       nodejs-1:
+      #         group: 1/4
+      #       nodejs-2:
+      #         group: 2/4
+      #       nodejs-3:
+      #         group: 3/4
+      #       nodejs-4:
+      #         group: 4/4
+      #   steps:
+      #     - checkout: none
+      #     - script: |
+      #         wmic datafile where name="C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe" get Version /value
+      #       displayName: 'List Chrome version'
+      #     - task: NodeTool@0
+      #       inputs:
+      #         versionSpec: $(node_version)
+      #       displayName: 'Install Node.js'
+      #     - task: Cache@2
+      #       inputs:
+      #         # use deterministic cache key that is specific
+      #         # to this test run
+      #         key: $(Build.SourceVersion)
+      #         path: $(System.DefaultWorkingDirectory)
+      #       displayName: Cache Build
+      #     - script: |
+      #         node run-tests.js -g $(group) --timings --azure
+      #       displayName: 'Run tests'

contributing.md

@@ -14,6 +14,20 @@ Read about our [Commitment to Open Source](https://vercel.com/oss).
 
 To contribute to [our examples](examples), take a look at the [“Adding examples” section](#adding-examples).
 
+## Adding warning/error descriptions
+
+In Next.js we have a system to add helpful links to warnings and errors.
+
+This allows for the logged message to be short while giving a broader description and instructions on how to solve the warning/error.
+
+In general all warnings and errors added should have these links attached.
+
+Below are the steps to add a new link:
+
+- Create a new markdown file under the `errors` directory based on `errors/template.md`: `cp errors/template.md errors/<error-file-name>.md`
+- Add the newly added file to `errors/manifest.json`
+- Add the following url to your warning/error: `https://nextjs.org/docs/messages/<file-path-without-dotmd>`. For example to link to `errors/api-routes-static-export.md` you use the url: `https://nextjs.org/docs/messages/api-routes-static-export`
+
 ## To run tests
 
 Make sure you have `chromedriver` installed for your Chrome version. You can install it with
@@ -155,3 +169,7 @@ yarn create next-app --example DIRECTORY_NAME DIRECTORY_NAME-app
 
 Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
 ````
+
+## Publishing
+
+Repository maintainers can use `yarn publish-canary` to publish a new version of all packages to npm.

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

@@ -26,7 +26,7 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
-`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`:
+`phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/constants.ts#L1-L4). Phases can be imported from `next/constants`:
 
 ```js
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
@@ -44,7 +44,7 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
-The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/next-server/server/config-shared.ts#L68).
+The commented lines are the place where you can put the configs allowed by `next.config.js`, which are [defined in this file](https://github.com/vercel/next.js/blob/canary/packages/next/server/config-shared.ts#L68).
 
 However, none of the configs are required, and it's not necessary to understand what each config does. Instead, search for the features you need to enable or modify in this section and they will show you what to do.
 

docs/api-reference/next/image.md

@@ -195,6 +195,10 @@ The image position when using `layout="fill"`.
 
 [Learn more](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
 
+### onLoadingComplete
+
+A callback function that is invoked once the image is completely loaded and the placeholder has been removed.
+
 ### loading
 
 > **Attention**: This property is only meant for advanced usage. Switching an
@@ -242,6 +246,7 @@ Other properties on the `<Image />` component will be passed to the underlying
 - `srcSet`. Use
   [Device Sizes](/docs/basic-features/image-optimization.md#device-sizes)
   instead.
+- `ref`. Use [`onLoadingComplete`](#onloadingcomplete) instead.
 - `decoding`. It is always `"async"`.
 
 ## Related

docs/basic-features/environment-variables.md

@@ -16,7 +16,7 @@ description: Learn to add and access environment variables in your Next.js appli
 Next.js comes with built-in support for environment variables, which allows you to do the following:
 
 - [Use `.env.local` to load environment variables](#loading-environment-variables)
-- [Expose environment variables to the browser](#exposing-environment-variables-to-the-browser)
+- [Expose environment variables to the browser by prefixing with `NEXT_PUBLIC_`](#exposing-environment-variables-to-the-browser)
 
 ## Loading Environment Variables
 

docs/basic-features/typescript.md

@@ -152,7 +152,7 @@ The `next.config.js` file must be a JavaScript file as it does not get parsed by
 // @ts-check
 
 /**
- * @type {import('next/dist/next-server/server/config').NextConfig}
+ * @type {import('next').NextConfig}
  **/
 const nextConfig = {
   /* config options here */

docs/manifest.json

@@ -29,6 +29,10 @@
               "title": "Font Optimization",
               "path": "/docs/basic-features/font-optimization.md"
             },
+            {
+              "title": "Script Optimization",
+              "path": "/docs/basic-features/script.md"
+            },
             {
               "title": "Static File Serving",
               "path": "/docs/basic-features/static-file-serving.md"
@@ -52,10 +56,6 @@
             {
               "title": "Supported Browsers and Features",
               "path": "/docs/basic-features/supported-browsers-features.md"
-            },
-            {
-              "title": "Script",
-              "path": "/docs/basic-features/script.md"
             }
           ]
         },

errors/api-routes-body-size-limit.md

@@ -0,0 +1,13 @@
+# API Routes Body Size Limited to 4MB
+
+#### Why This Error Occurred
+
+API Routes are meant to respond quickly and are not intended to support responding with large amounts of data. The maximum size of responses is 4 MB.
+
+#### Possible Ways to Fix It
+
+Limit your API Route responses to less than 4 MB. If you need to support sending large files to the client, you should consider using a dedicated media host for those assets. See link below for suggestions.
+
+### Useful Links
+
+[Tips to avoid the 5 MB limit](https://vercel.com/support/articles/how-to-bypass-vercel-5mb-body-size-limit-serverless-functions)

errors/manifest.json

@@ -13,6 +13,10 @@
           "title": "amp-export-validation",
           "path": "/errors/amp-export-validation.md"
         },
+        {
+          "title": "api-routes-body-size-limit",
+          "path": "/errors/api-routes-body-size-limit.md"
+        },
         {
           "title": "api-routes-static-export",
           "path": "/errors/api-routes-static-export.md"

errors/template.md

@@ -0,0 +1,13 @@
+# <!-- INSERT TITLE HERE -->
+
+#### Why This Error Occurred
+
+<!-- Explain why the error occurred. Ensure the description makes it clear why the warning/error exists -->
+
+#### Possible Ways to Fix It
+
+<!-- Explain how to fix the warning/error, potentially by providing alternative approaches. Ensure this section is actionable by users -->
+
+### Useful Links
+
+<!-- Add links to relevant documentation -->

examples/cms-prismic/lib/api.js

@@ -1,8 +1,8 @@
 import Prismic from 'prismic-javascript'
 
 const REPOSITORY = process.env.PRISMIC_REPOSITORY_NAME
-const REF_API_URL = `https://${REPOSITORY}.prismic.io/api/v2`
-const GRAPHQL_API_URL = `https://${REPOSITORY}.prismic.io/graphql`
+const REF_API_URL = `https://${REPOSITORY}.cdn.prismic.io/api/v2`
+const GRAPHQL_API_URL = `https://${REPOSITORY}.cdn.prismic.io/graphql`
 // export const API_URL = 'https://your-repo-name.cdn.prismic.io/api/v2'
 export const API_TOKEN = process.env.PRISMIC_API_TOKEN
 export const API_LOCALE = process.env.PRISMIC_REPOSITORY_LOCALE

examples/layout-component/README.md

@@ -1,6 +1,6 @@
 # Layout component example
 
-This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same `<head>` settings, the `<nav>` and the `<footer>`. Further more, the title (and potentially other head elements) can be sent as a prop to the layout component so that it's customizable in all pages.
+This example shows a very common use case when building websites where you need to repeat some sort of layout for all your pages. Our pages are: `home`, `about` and `contact` and they all share the same layout and sidebar.
 
 ## Preview
 

examples/layout-component/components/layout.js

@@ -1,36 +1,13 @@
-import Link from 'next/link'
 import Head from 'next/head'
+import styles from './layout.module.css'
 
-export default function Layout({
-  children,
-  title = 'This is the default title',
-}) {
+export default function Layout({ children }) {
   return (
-    <div>
+    <>
       <Head>
-        <title>{title}</title>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+        <title>Layouts Example</title>
       </Head>
-      <header>
-        <nav>
-          <Link href="/">
-            <a>Home</a>
-          </Link>{' '}
-          |
-          <Link href="/about">
-            <a>About</a>
-          </Link>{' '}
-          |
-          <Link href="/contact">
-            <a>Contact</a>
-          </Link>
-        </nav>
-      </header>
-
-      {children}
-
-      <footer>{'I`m here to stay'}</footer>
-    </div>
+      <main className={styles.main}>{children}</main>
+    </>
   )
 }

examples/layout-component/components/layout.module.css

@@ -0,0 +1,9 @@
+.main {
+  display: flex;
+  height: calc(100vh - 64px);
+  background-color: white;
+}
+
+.main > section {
+  padding: 32px;
+}

examples/layout-component/components/sidebar.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import styles from './sidebar.module.css'
+
+export default function Sidebar() {
+  return (
+    <nav className={styles.nav}>
+      <input className={styles.input} placeholder="Search..." />
+      <Link href="/">
+        <a>Home</a>
+      </Link>
+      <Link href="/about">
+        <a>About</a>
+      </Link>
+      <Link href="/contact">
+        <a>Contact</a>
+      </Link>
+    </nav>
+  )
+}