Merge branch 'canary' into shu/0b33

vercel · Apr 19, 2022 · 5994ad0 · 5994ad0
2 parents 3d2dba0 + 0e2fd92
commit 5994ad0
Show file tree

Hide file tree

Showing 92 changed files with 1,287 additions and 631 deletions.
diff --git a/.alexrc b/.alexrc
@@ -16,6 +16,7 @@
     "hook",
     "hooks",
     "host-hostess",
-    "invalid"
+    "invalid",
+    "remains"
   ]
 }
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -2,9 +2,9 @@
 # https://help.github.com/en/articles/about-code-owners
 
 *          @timneutkens @ijjk @shuding @huozhi
-/.github/  @timneutkens @ijjk @shuding @styfle @huozhi @padmaia
-/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @lfades @molebox
-/examples/ @timneutkens @ijjk @shuding @leerob @lfades @steven-tey
+/.github/  @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @balazsorban44
+/docs/     @timneutkens @ijjk @shuding @styfle @huozhi @padmaia @leerob @balazsorban44
+/examples/ @timneutkens @ijjk @shuding @leerob @steven-tey @balazsorban44
 
 # SWC Build (@padmaia)
 

diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -68,7 +68,7 @@ jobs:
         id: cache-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
   lint:
     runs-on: ubuntu-latest
@@ -84,7 +84,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
       - run: ./scripts/check-manifests.js
       - run: yarn lint
 
@@ -119,7 +119,7 @@ jobs:
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - name: Check
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -157,7 +157,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - run: rm -rf .git && mv .git-bak .git
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -190,7 +190,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -230,7 +230,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -281,7 +281,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -335,7 +335,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -386,7 +386,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -440,7 +440,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -481,7 +481,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -525,7 +525,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -566,7 +566,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -611,7 +611,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: pnpm/action-setup@v2.2.1
         with:
@@ -659,7 +659,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -709,7 +709,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
@@ -751,7 +751,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -795,7 +795,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -828,7 +828,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
       - uses: actions/download-artifact@v2
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
@@ -864,7 +864,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         with:
@@ -894,7 +894,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - uses: actions/download-artifact@v2
         with:
@@ -1284,7 +1284,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - name: Setup node
         uses: actions/setup-node@v2
@@ -1336,7 +1336,7 @@ jobs:
         id: restore-build
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - name: Setup node
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
@@ -1413,7 +1413,7 @@ jobs:
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           path: ./*
-          key: ${{ github.sha }}-${{ github.run_number }}-${{ github.run_attempt }}
+          key: ${{ github.sha }}-${{ github.run_number }}
 
       - name: Set Git Short sha Env
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}

diff --git a/docs/advanced-features/react-18/server-components.md b/docs/advanced-features/react-18/server-components.md
@@ -32,7 +32,11 @@ To run a component on the server, append `.server.js` to the end of the filename
 
 For client components, append `.client.js` to the filename. For example, `./components/avatar.client.js`.
 
-You can then import other server or client components from any server component. Note: a server component **can not** be imported by a client component. Components without "server/client" extensions will be treated as shared components and can be used and rendered by both sides, depending on where it is imported. For example:
+Server components can import server components and client components.
+
+Client components **cannot** import server components.
+
+Components without a `server` or `client` extension will be treated as shared components and can be imported by server components and client components. For example:
 
 ```jsx
 // pages/home.server.js

diff --git a/docs/api-reference/next/router.md b/docs/api-reference/next/router.md
@@ -113,8 +113,6 @@ export default function Page() {
 }
 ```
 
-> **Note:** When navigating to the same page in Next.js, the page's state **will not** be reset by default, as the top-level React component is the same. You can manually ensure the state is updated using `useEffect`.
-
 Redirecting the user to `pages/login.js`, useful for pages behind [authentication](/docs/authentication):
 
 ```jsx
@@ -138,6 +136,58 @@ export default function Page() {
 }
 ```
 
+#### Resetting state after navigation
+
+When navigating to the same page in Next.js, the page's state **will not** be reset by default as react does not unmount unless the parent component has changed.
+
+```jsx
+// pages/[slug].js
+import Link from 'next/link'
+import { useState } from 'react'
+import { useRouter } from 'next/router'
+
+export default function Page(props) {
+  const router = useRouter()
+  const [count, setCount] = useState(0)
+  return (
+    <div>
+      <h1>Page: {router.query.slug}</h1>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>Increase count</button>
+      <Link href="/one">
+        <a>one</a>
+      </Link> <Link href="/two">
+        <a>two</a>
+      </Link>
+    </div>
+  )
+}
+```
+
+In the above example, navigating between `/one` and `/two` **will not** reset the count . The `useState` is maintained between renders because the top-level React component, `Page`, is the same.
+
+If you do not want this behavior, you have a couple of options:
+
+1. Manually ensure each state is updated using `useEffect`. In the above example, that could look like:
+
+```jsx
+useEffect(() => {
+  setCount(0)
+}, [router.query.slug])
+```
+
+2. Use a React `key` to [tell React to remount the component](https://reactjs.org/docs/lists-and-keys.html#keys). To do this for all pages, you can use a custom app:
+
+```jsx
+// pages/_app.js
+import { useRouter } from 'next/router'
+
+export default function MyApp({ Component, pageProps }) {
+  const router = useRouter()
+  return <Component key={router.asPath} {...pageProps} />
+}
+```
+
 #### With URL object
 
 You can use a URL object in the same way you can use it for [`next/link`](/docs/api-reference/next/link.md#with-url-object). Works for both the `url` and `as` parameters:

diff --git a/docs/basic-features/data-fetching/get-static-props.md b/docs/basic-features/data-fetching/get-static-props.md
@@ -20,8 +20,8 @@ You should use `getStaticProps` if:
 
 - The data required to render the page is available at build time ahead of a user’s request
 - The data comes from a headless CMS
-- The data can be publicly cached (not user-specific)
 - The page must be pre-rendered (for SEO) and be very fast — `getStaticProps` generates `HTML` and `JSON` files, both of which can be cached by a CDN for performance
+- The data can be publicly cached (not user-specific). This condition can be bypassed in certain specific situation by using a Middleware to rewrite the path.
 
 ## When does getStaticProps run
 

diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
@@ -256,6 +256,8 @@ export default function Home() {
 }
 ```
 
+> **Note: `onLoad` can't be used with the `beforeInteractive` loading strategy.**
+
 Sometimes it is helpful to catch when a script fails to load. These errors can be handled with the `onError` property:
 
 ```jsx

diff --git a/docs/migrating/from-create-react-app.md b/docs/migrating/from-create-react-app.md
@@ -39,7 +39,7 @@ Here's an example `package.json`:
 
 ## Static Assets and Compiled Output
 
-Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder), whereas Next.js uses it for static assets. It's possible to add static assets here, but Create React App recommends importing them directly from JavaScript files.
+Create React App uses the `public` directory for the [entry HTML file](https://create-react-app.dev/docs/using-the-public-folder) as well as static assets, but Next.js only uses it for static assets. When migrating from Create React App, the location of the `public` directory remains the same.
 
 - Move any images, fonts, or other static assets to `public`.
 - Convert `index.html` (the entry point of your application) to Next.js. Any `<head>` code should be moved to a [custom `_document.js`](/docs/advanced-features/custom-document.md). Any shared layout between all pages should be moved to a [custom `_app.js`](/docs/advanced-features/custom-app.md).
@@ -50,7 +50,9 @@ Create React App uses the `public` directory for the [entry HTML file](https://c
 
 With Create React App, you're likely using React Router. Instead of using a third-party library, Next.js includes its own [file-system based routing](/docs/routing/introduction.md).
 
-- Convert all `Route` components to new files in the `pages` directory.
+- Create a [`pages`](/docs/basic-features/pages.md) directory at the root of your project.
+- Then, move the `src/App.js` file to `pages/index.js`. This file is the [index page](https://nextjs.org/docs/routing/introduction#index-routes) of your Next.js application. Populate this file with code that is used to display the index route in your Create React App.
+- Convert all other `Route` components to new files in the `pages` directory.
 - For routes that require dynamic content (e.g. `/blog/:slug`), you can use [Dynamic Routes](/docs/routing/dynamic-routes.md) with Next.js (e.g. `pages/blog/[slug].js`). The value of `slug` is accessible through a [query parameter](/docs/routing/dynamic-routes.md). For example, the route `/blog/first-post` would forward the query object `{ 'slug': 'first-post' }` to `pages/blog/[slug].js` ([learn more here](/docs/basic-features/data-fetching/get-static-paths.md)).
 
 For more information, see [Migrating from React Router](/docs/migrating/from-react-router.md).

diff --git a/docs/upgrading.md b/docs/upgrading.md
@@ -12,7 +12,7 @@ The minimum Node.js version has been bumped from 12.0.0 to 12.22.0 which is the
 
 ### Upgrade React version to latest
 
-To upgrade you can run the following command:
+The minimum required React version is `17.0.2`. To upgrade you can run the following command in the terminal:
 
 ```
 npm install react@latest react-dom@latest

diff --git a/errors/manifest.json b/errors/manifest.json
@@ -649,6 +649,10 @@
         {
           "title": "invalid-getserversideprops-return-value",
           "path": "/errors/invalid-getserversideprops-return-value.md"
+        },
+        {
+          "title": "no-assign-module-variable",
+          "path": "/errors/no-assign-module-variable.md"
         }
       ]
     }

diff --git a/errors/no-assign-module-variable.md b/errors/no-assign-module-variable.md
@@ -0,0 +1,13 @@
+# No assign module variable
+
+#### Why This Error Occurred
+
+A value is being assigned to the `module` variable. The `module` variable is already used and it is highly likely that assigning to this variable will cause errors.
+
+#### Possible Ways to Fix It
+
+Use a different variable name:
+
+```js
+let myModule = {...}
+```