Add example notion

.alexignore

@@ -0,0 +1,2 @@
+CODE_OF_CONDUCT.md
+examples/

.alexrc

@@ -0,0 +1,21 @@
+{
+  "allow": [
+    "attacks",
+    "color",
+    "dead",
+    "execute",
+    "executed",
+    "executes",
+    "execution",
+    "executions",
+    "failed",
+    "failure",
+    "failures",
+    "fire",
+    "fires",
+    "hook",
+    "hooks",
+    "host-hostess",
+    "invalid"
+  ]
+}

.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
@@ -46,7 +60,7 @@ Running a specific test suite inside of the `test/integration` directory:
 yarn testonly --testPathPattern "production"
 ```
 
-Running just one test in the `production` test suite:
+Running one test in the `production` test suite:
 
 ```sh
 yarn testonly --testPathPattern "production" -t "should allow etag header support"
@@ -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/advanced-features/codemods.md

@@ -169,7 +169,7 @@ export default withRouter(
 )
 ```
 
-This is just one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
+This is one case. All the cases that are transformed (and tested) can be found in the [`__testfixtures__` directory](https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter).
 
 #### Usage
 

docs/advanced-features/custom-app.md

@@ -42,7 +42,7 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 ### Caveats
 
-- If your app is running and you just added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
+- If your app is running and you added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.
 - Adding a custom `getInitialProps` in your `App` will disable [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) in pages without [Static Generation](/docs/basic-features/data-fetching.md#getstaticprops-static-generation).
 - When you add `getInitialProps` in your custom app, you must `import App from "next/app"`, call `App.getInitialProps(appContext)` inside `getInitialProps` and merge the returned object into the return value.
 - `App` currently does not support Next.js [Data Fetching methods](/docs/basic-features/data-fetching.md) like [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) or [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering).

docs/advanced-features/debugging.md

@@ -69,7 +69,7 @@ Now hit <kdb>F5</kbd> or select **Debug: Start Debugging** from the Command Pale
 
 Now you can use the [`debugger`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statement to pause your backend or frontend code anytime you want to observe and debug your code more precisely.
 
-If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will pop up.
+If you trigger the underlying code by refreshing the current page, clicking on a page link or fetching an API route, your code will be paused and the debugger window will appear.
 
 To learn more on how to use a JavaScript debugger, take a look at the following documentation:
 

docs/advanced-features/dynamic-import.md

@@ -45,7 +45,7 @@ export default function Page() {
 
 You can think of dynamic imports as another way to split your code into manageable chunks.
 
-React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works just like any other React Component. Check out the sections below for more details on how it works.
+React components can also be imported using dynamic imports, but in this case we use it in conjunction with `next/dynamic` to make sure it works like any other React Component. Check out the sections below for more details on how it works.
 
 ## Basic usage
 

docs/advanced-features/i18n-routing.md

@@ -52,6 +52,9 @@ module.exports = {
       {
         domain: 'example.fr',
         defaultLocale: 'fr',
+        // an optional http field can also be used to test
+        // locale domains locally with http instead of https
+        http: true,
       },
     ],
   },

docs/advanced-features/multi-zones.md

@@ -18,7 +18,7 @@ With multi zones support, you can merge both these apps into a single one allowi
 
 ## How to define a zone
 
-There are no special zones related APIs. You only need to do following:
+There are no zone 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 configure a [basePath](/docs/api-reference/next.config.js/basepath.md) to avoid conflicts with pages and static files.

docs/advanced-features/security-headers.md

@@ -11,16 +11,18 @@ To improve the security of your application, you can use [`headers`](/docs/api-r
 
 // You can choose which headers to add to the list
 // after learning more below.
-const securityHeaders = [];
-
-async headers() {
-  return [
-    {
-      // Apply these headers to all routes in your application.
-      source: '/(.*)',
-      headers: securityHeaders
-    }
-  ]
+const securityHeaders = []
+
+module.exports = {
+  async headers() {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: '/(.*)',
+        headers: securityHeaders,
+      },
+    ]
+  },
 }
 ```
 

docs/advanced-features/static-html-export.md

@@ -17,7 +17,7 @@ The exported app supports almost every feature of Next.js, including dynamic rou
 
 `next export` works by prerendering all pages to HTML. For [dynamic routes](/docs/routing/dynamic-routes.md), your page can export a [`getStaticPaths`](/docs/basic-features/data-fetching.md#getstaticpaths-static-generation) function to let the exporter know which HTML pages to generate for that route.
 
-> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side) just fine).
+> `next export` is intended for scenarios where **none** of your pages have server-side or incremental data requirements (though statically-rendered pages can still [fetch data on the client side](/docs/basic-features/data-fetching.md#fetching-data-on-the-client-side)).
 >
 > If you're looking to make a hybrid site where only _some_ pages are prerendered to static HTML, Next.js already does that automatically for you! Read up on [Automatic Static Optimization](/docs/advanced-features/automatic-static-optimization.md) for details.
 >

docs/api-reference/cli.md

@@ -46,7 +46,7 @@ NODE_OPTIONS='--inspect' next
 - **Size** – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
 - **First Load JS** – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.
 
-The first load is colored green, yellow, or red. Aim for green for performant applications.
+The first load is indicated by green, yellow, or red. Aim for green for performant applications.
 
 You can enable production profiling for React with the `--profile` flag in `next build`. This requires [Next.js 9.5](https://nextjs.org/blog/next-9-5):
 

docs/api-reference/create-next-app.md

@@ -4,7 +4,7 @@ description: Create Next.js apps in one command with create-next-app.
 
 # Create Next App
 
-The easiest way to get started with Next.js is by using `create-next-app`. This simple CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
+The easiest way to get started with Next.js is by using `create-next-app`. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the [official Next.js examples](https://github.com/vercel/next.js/tree/canary/examples). To get started, use the following command:
 
 ```bash
 npx create-next-app

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

@@ -102,7 +102,7 @@ When `responsive`, the image will scale the dimensions down for smaller
 viewports and scale up for larger viewports.
 
 When `fill`, the image will stretch both width and height to the dimensions of
-the parent element, usually paired with the [`objectFit`](#objectFit) property.
+the parent element, provided the parent element is relative. This is usually paired with the [`objectFit`](#objectFit) property.
 
 Try it out:
 
@@ -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/api-reference/next/link.md

@@ -65,7 +65,7 @@ export default Home
 
 ## If the route has dynamic segments
 
-There is nothing special to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link.
+There is nothing to do when linking to a [dynamic route](/docs/routing/dynamic-routes.md), including [catch all routes](/docs/routing/dynamic-routes.md#catch-all-routes), since Next.js 9.5.3 (for older versions check our [previous docs](https://nextjs.org/docs/tag/v9.5.2/api-reference/next/link#dynamic-routes)). However, it can become quite common and handy to use [interpolation](/docs/routing/introduction.md#linking-to-dynamic-paths) or an [URL Object](#with-url-object) to generate the link.
 
 For example, the dynamic route `pages/blog/[slug].js` will match the following link: