Merge branch 'canary' of git://github.com/vercel/next.js into client-…

…nav-a11y

.github/workflows/build_test_deploy.yml

@@ -153,12 +153,7 @@ jobs:
       - 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
-      - run: node run-tests.js test/integration/font-optimization/test/index.test.js
-      - run: node run-tests.js test/acceptance/*
+      - run: xvfb-run node run-tests.js test/integration/link-ref/test/index.test.js test/integration/production/test/index.test.js test/integration/basic/test/index.test.js test/integration/async-modules/test/index.test.js test/integration/font-optimization/test/index.test.js test/acceptance/*.test.js
 
   testFirefox:
     name: Test Firefox (production)

.gitignore

@@ -25,6 +25,7 @@ test/**/next-env.d.ts
 
 # Editors
 **/.idea
+**/.#*
 
 # examples
 examples/**/out

.vscode/launch.json

@@ -22,7 +22,8 @@
       "runtimeExecutable": "yarn",
       "runtimeArgs": ["run", "debug", "build", "test/integration/basic"],
       "skipFiles": ["<node_internals>/**"],
-      "port": 9229
+      "port": 9229,
+      "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
     },
     {
       "name": "Launch app production",

.vscode/settings.json

@@ -4,5 +4,6 @@
     "javascriptreact",
     { "language": "typescript", "autoFix": true },
     { "language": "typescriptreact", "autoFix": true }
-  ]
+  ],
+  "debug.javascript.unmapMissingSources": true
 }

azure-pipelines.yml

@@ -1,3 +1,25 @@
+trigger:
+  # Only run latest commit for branches:
+  batch: true
+  # Do not run Azure CI for docs-only/example-only changes:
+  paths:
+    include:
+      - '*'
+    exclude:
+      - bench/*
+      - docs/*
+      - errors/*
+      - examples/*
+  # Do not run Azure on `canary`, `master`, or release tags. This unnecessarily
+  # increases the backlog, and the change was already tested on the PR.
+  branches:
+    include:
+      - '*'
+    exclude:
+      - canary
+      - master
+      - refs/tags/*
+
 variables:
   YARN_CACHE_FOLDER: $(Pipeline.Workspace)/.yarn
   NEXT_TELEMETRY_DISABLED: '1'

docs/api-reference/next/image.md

@@ -11,6 +11,16 @@ description: Enable Image Optimization with the built-in Image component.
   </ul>
 </details>
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                  |
+| --------- | ------------------------ |
+| `v10.0.1` | `layout` prop added.     |
+| `v10.0.0` | `next/image` introduced. |
+
+</details>
+
 > Before moving forward, we recommend you to read [Image Optimization](/docs/basic-features/image-optimization.md) first.
 
 Image Optimization can be enabled via the `Image` component exported by `next/image`.
@@ -103,11 +113,11 @@ We recommend setting `sizes` when `layout="responsive"` and your image will not
 
 The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Defaults to 75.
 
-### priority
+<!-- ### priority
 
 When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
 
-Should only be used when the image is visible above the fold. Defaults to false.
+Should only be used when the image is visible above the fold. Defaults to false. -->
 
 ## Advanced Props
 

docs/basic-features/data-fetching.md

@@ -39,6 +39,17 @@ In addition, we’ll talk briefly about how to fetch data on the client side.
 
 ## `getStaticProps` (Static Generation)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                                                                                                           |
+| --------- | ----------------------------------------------------------------------------------------------------------------- |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added.                                               |
+| `v9.5.0`  | Stable [Incremental Static Regeneration](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) |
+| `v9.3.0`  | `getStaticProps` introduced.                                                                                      |
+
+</details>
+
 If you export an `async` function called `getStaticProps` from a page, Next.js will pre-render this page at build time using the props returned by `getStaticProps`.
 
 ```jsx
@@ -364,6 +375,16 @@ This use case is supported by Next.js by the feature called **Preview Mode**. Le
 
 ## `getStaticPaths` (Static Generation)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version  | Changes                                                                                                           |
+| -------- | ----------------------------------------------------------------------------------------------------------------- |
+| `v9.5.0` | Stable [Incremental Static Regeneration](https://nextjs.org/blog/next-9-5#stable-incremental-static-regeneration) |
+| `v9.3.0` | `getStaticPaths` introduced.                                                                                      |
+
+</details>
+
 If a page has dynamic routes ([documentation](/docs/routing/dynamic-routes.md)) and uses `getStaticProps` it needs to define a list of paths that have to be rendered to HTML at build time.
 
 If you export an `async` function called `getStaticPaths` from a page that uses dynamic routes, Next.js will statically pre-render all the paths specified by `getStaticPaths`.
@@ -453,7 +474,7 @@ export default Post
 <details>
   <summary><b>Examples</b></summary>
   <ul>
-    <li><a href="https://static-tweet.now.sh">Static generation of a large number of pages</a></li>
+    <li><a href="https://static-tweet.vercel.app">Static generation of a large number of pages</a></li>
   </ul>
 </details>
 
@@ -587,6 +608,16 @@ In development (`next dev`), `getStaticPaths` will be called on every request.
 
 ## `getServerSideProps` (Server-side Rendering)
 
+<details>
+  <summary><b>Version History</b></summary>
+
+| Version   | Changes                                                             |
+| --------- | ------------------------------------------------------------------- |
+| `v10.0.0` | `locale`, `locales`, `defaultLocale`, and `notFound` options added. |
+| `v9.3.0`  | `getServerSideProps` introduced.                                    |
+
+</details>
+
 If you export an `async` function called `getServerSideProps` from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`.
 
 ```js

docs/basic-features/image-optimization.md

@@ -59,7 +59,7 @@ In addition to [using properties](/docs/api-reference/next/image.md) available t
 ### Domains
 
 To enable Image Optimization for images hosted on an external website, use an absolute url for the Image `src` and specify which
-`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused.
+`domains` are allowed to be optimized. This is needed to ensure that external urls can't be abused. When `loader` is set to an external image service, this option is ignored.
 
 ```js
 module.exports = {

errors/invalid-webpack-5-version.md

@@ -0,0 +1,13 @@
+# Invalid webpack 5 version
+
+#### Why This Error Occurred
+
+While leveraging webpack 5 support in Next.js the minimum required version of `v5.11.1` was not met. This version is needed while leveraging webpack 5 support with Next.js as early versions are missing patches that cause unexpected behavior.
+
+#### Possible Ways to Fix It
+
+Upgrade the version of webpack 5 being used with Next.js to at least `v5.11.1` by updating your resolutions field for `webpack` in your `package.json`.
+
+### Useful Links
+
+- [Yarn Selective Dependency Resolutions Documentation](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/)

examples/api-routes-apollo-server-and-client-auth/README.md

@@ -4,6 +4,12 @@
 
 In this simple example, we integrate Apollo seamlessly with [Next.js data fetching methods](https://nextjs.org/docs/basic-features/data-fetching) to fetch queries in the server and hydrate them in the browser.
 
+## Deploy your own
+
+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/api-routes-apollo-server-and-client-auth)
+
 ## How to use
 
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

examples/api-routes-apollo-server-and-client-auth/lib/auth.js

@@ -21,7 +21,9 @@ export async function getLoginSession(req) {
   const expiresAt = session.createdAt + session.maxAge * 1000
 
   // Validate the expiration date of the session
-  if (Date.now() < expiresAt) {
-    return session
+  if (Date.now() > expiresAt) {
+    throw new Error('Session expired')
   }
+
+  return session
 }

examples/with-iron-session/package.json

@@ -8,7 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.4.4",
+    "next": "latest",
     "next-iron-session": "4.1.7",
     "prop-types": "15.7.2",
     "react": "16.13.1",

examples/with-iron-session/pages/profile-sg.js

@@ -25,7 +25,7 @@ const SgProfile = () => {
         <a href={githubUrl(user.login)}>{githubUrl(user.login)}</a>, reduced to
         `login` and `avatar_url`.
       </p>
-      <pre>{JSON.stringify(user, undefined, 2)}</pre>
+      <pre>{JSON.stringify(user, null, 2)}</pre>
     </Layout>
   )
 }

examples/with-iron-session/pages/profile-ssr.js

@@ -24,7 +24,7 @@ const SsrProfile = ({ user }) => {
             <a href={githubUrl(user.login)}>{githubUrl(user.login)}</a>, reduced
             to `login` and `avatar_url`.
           </p>
-          <pre>{JSON.stringify(user, undefined, 2)}</pre>
+          <pre>{JSON.stringify(user, null, 2)}</pre>
         </>
       )}
     </Layout>
@@ -34,11 +34,13 @@ const SsrProfile = ({ user }) => {
 export const getServerSideProps = withSession(async function ({ req, res }) {
   const user = req.session.get('user')
 
-  if (user === undefined) {
-    res.setHeader('location', '/login')
-    res.statusCode = 302
-    res.end()
-    return { props: {} }
+  if (!user) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      },
+    }
   }
 
   return {

examples/with-magic/.env.local.example

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=
 MAGIC_SECRET_KEY=
+TOKEN_SECRET="this-is-a-secret-value-with-at-least-32-characters"

examples/with-magic/README.md

@@ -1,6 +1,6 @@
 # Magic Example
 
-This example show how to use [Magic](https://magic.link) with Next.js. The example features cookie-based, passwordless authentication with email-based magic links.
+This example shows how to use [Magic](https://magic.link) with Next.js. The example features cookie-based, passwordless authentication with email-based magic links.
 
 The example shows how to do a login and logout; and to get the user info using a hook with [SWR](https://swr.now.sh).
 
@@ -10,9 +10,9 @@ The login cookie is `httpOnly`, meaning it can only be accessed by the API, and
 
 ## Deploy your own
 
-Deploy the example using [Vercel Now](https://vercel.com/docs/now-cli#commands/overview/basic-usage):
+Once you have access to [the environment variables you'll need](#configuration), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
 
-[![Deploy with Vercel Now](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-magic)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-magic&env=NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY,MAGIC_SECRET_KEY,TOKEN_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Magic&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-magic%23configuration)
 
 ## How to use
 
@@ -40,11 +40,30 @@ Then set each variable on `.env.local`:
 
 - `NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY` should look like `pk_test_abc` or `pk_live_ABC`
 - `MAGIC_SECRET_KEY` should look like `sk_test_ABC` or `sk_live_ABC`
+- `TOKEN_SECRET` should be a string with at least 32 characters
 
-To deploy on Vercel, you need to set up the environment variables with the [Environment Variables UI](https://vercel.com/blog/environment-variables-ui) using the [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/cli#commands/env)).
-
-Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, link your project and run the following command to add the `NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY` and `MAGIC_SECRET_KEY` environment variables.
+Now, run Next.js in development mode
 
 ```bash
-vercel env add
+npm run dev
+# or
+yarn dev
 ```
+
+Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions).
+
+## Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+#### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-magic&env=NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY,MAGIC_SECRET_KEY,TOKEN_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Magic&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-magic%23configuration)

examples/with-magic/lib/auth-cookies.js

@@ -1,7 +1,8 @@
 import { serialize, parse } from 'cookie'
 
 const TOKEN_NAME = 'token'
-const MAX_AGE = 60 * 60 * 8 // 8 hours
+
+export const MAX_AGE = 60 * 60 * 8 // 8 hours
 
 export function setTokenCookie(res, token) {
   const cookie = serialize(TOKEN_NAME, token, {
@@ -12,6 +13,7 @@ export function setTokenCookie(res, token) {
     path: '/',
     sameSite: 'lax',
   })
+
   res.setHeader('Set-Cookie', cookie)
 }
 

examples/with-magic/lib/auth.js

@@ -0,0 +1,29 @@
+import Iron from '@hapi/iron'
+import { MAX_AGE, setTokenCookie, getTokenCookie } from './auth-cookies'
+
+const TOKEN_SECRET = process.env.TOKEN_SECRET
+
+export async function setLoginSession(res, session) {
+  const createdAt = Date.now()
+  // Create a session object with a max age that we can validate later
+  const obj = { ...session, createdAt, maxAge: MAX_AGE }
+  const token = await Iron.seal(obj, TOKEN_SECRET, Iron.defaults)
+
+  setTokenCookie(res, token)
+}
+
+export async function getLoginSession(req) {
+  const token = getTokenCookie(req)
+
+  if (!token) return
+
+  const session = await Iron.unseal(token, TOKEN_SECRET, Iron.defaults)
+  const expiresAt = session.createdAt + session.maxAge * 1000
+
+  // Validate the expiration date of the session
+  if (Date.now() > expiresAt) {
+    throw new Error('Session expired')
+  }
+
+  return session
+}

examples/with-magic/pages/api/login.js

@@ -1,15 +1,14 @@
 import { magic } from '../../lib/magic'
-import { encryptSession } from '../../lib/iron'
-import { setTokenCookie } from '../../lib/auth-cookies'
+import { setLoginSession } from '../../lib/auth'
 
 export default async function login(req, res) {
   try {
     const didToken = req.headers.authorization.substr(7)
     const metadata = await magic.users.getMetadataByToken(didToken)
     const session = { ...metadata }
-    // The token is a string with the encrypted session
-    const token = await encryptSession(session)
-    setTokenCookie(res, token)
+
+    await setLoginSession(res, session)
+
     res.status(200).send({ done: true })
   } catch (error) {
     res.status(error.status || 500).end(error.message)