Merge branch 'canary' into fix/cookies-type

.github/workflows/build_test_deploy.yml

@@ -160,7 +160,7 @@ jobs:
       NEXT_TELEMETRY_DISABLED: 1
       NEXT_TEST_JOB: 1
       HEADLESS: true
-      NEXT_WEBPACK5: 1
+      NEXT_PRIVATE_TEST_WEBPACK5_MODE: 1
 
     steps:
       - uses: actions/checkout@v2
@@ -174,7 +174,7 @@ jobs:
       - run: yarn install --check-files
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx,worker-loader}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs-only' }}
 
   testLegacyReact:

.vscode/launch.json

@@ -42,6 +42,16 @@
       "port": 9229,
       "skipFiles": ["<node_internals>/**"],
       "outFiles": ["${workspaceFolder}/packages/next/dist/**/*"]
+    },
+    {
+      "name": "Launch this example",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceFolder}",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": ["run", "debug", "dev", "${fileDirname}"],
+      "skipFiles": ["<node_internals>/**"],
+      "port": 9229
     }
   ]
 }

docs/advanced-features/i18n-routing.md

@@ -39,6 +39,7 @@ module.exports = {
     defaultLocale: 'en-US',
     // This is a list of locale domains and the default locale they
     // should handle (these are only required when setting up domain routing)
+    // Note: subdomains must be included in the domain value to be matched e.g. "fr.example.com".
     domains: [
       {
         domain: 'example.com',

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

@@ -224,3 +224,7 @@ module.exports = {
   },
 }
 ```
+
+### Cache-Control
+
+Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) function.

docs/api-reference/next/router.md

@@ -402,3 +402,26 @@ function Page({ router }) {
 
 export default withRouter(Page)
 ```
+
+### Typescript
+
+To use class components with `withRouter`, the component needs to accept a router prop:
+
+```tsx
+import React from 'react'
+import { withRouter, NextRouter } from 'next/router'
+
+interface WithRouterProps {
+  router: NextRouter
+}
+
+interface MyComponentProps extends WithRouterProps {}
+
+class MyComponent extends React.Component<MyComponentProps> {
+  render() {
+    return <p>{this.props.router.pathname}</p>
+  }
+}
+
+export default withRouter(MyComponent)
+```

docs/basic-features/data-fetching.md

@@ -289,7 +289,7 @@ Since Next.js compiles your code into a separate directory you can't use `__dirn
 Instead you can use `process.cwd()` which gives you the directory where Next.js is being executed.
 
 ```jsx
-import fs from 'fs'
+import { promises as fs } from 'fs'
 import path from 'path'
 
 // posts will be populated at build time by getStaticProps()
@@ -311,11 +311,11 @@ function Blog({ posts }) {
 // direct database queries. See the "Technical details" section.
 export async function getStaticProps() {
   const postsDirectory = path.join(process.cwd(), 'posts')
-  const filenames = fs.readdirSync(postsDirectory)
+  const filenames = await fs.readdir(postsDirectory)
 
-  const posts = filenames.map((filename) => {
+  const posts = filenames.map(async (filename) => {
     const filePath = path.join(postsDirectory, filename)
-    const fileContents = fs.readFileSync(filePath, 'utf8')
+    const fileContents = await fs.readFile(filePath, 'utf8')
 
     // Generally you would parse/transform the contents
     // For example you can transform markdown to HTML here
@@ -329,7 +329,7 @@ export async function getStaticProps() {
   // will receive `posts` as a prop at build time
   return {
     props: {
-      posts,
+      posts: await Promise.all(posts),
     },
   }
 }

docs/manifest.json

@@ -265,6 +265,10 @@
             }
           ]
         },
+        {
+          "title": "Static Optimization Indicator",
+          "path": "/docs/api-reference/next.config.js/static-optimization-indicator.md"
+        },
         {
           "title": "next.config.js",
           "routes": [

examples/amp-story/README.md

@@ -13,9 +13,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example amp-story amp-app
+npx create-next-app --example amp-story amp-story-app
 # or
-yarn create next-app --example amp-story amp-app
+yarn create next-app --example amp-story amp-story-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)).

examples/auth0/README.md

@@ -16,9 +16,9 @@ Read more: [https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/](
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example auth0 auth0
+npx create-next-app --example auth0 auth0-app
 # or
-yarn create next-app --example auth0 auth0
+yarn create next-app --example auth0 auth0-app
 ```
 
 ## Configuring Auth0

examples/blog-starter-typescript/package.json

@@ -26,7 +26,6 @@
     "@types/react-dom": "^16.9.8",
     "autoprefixer": "^10.2.1",
     "postcss": "^8.2.4",
-    "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^2.0.2"
   },
   "license": "MIT"

examples/blog-starter-typescript/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ['tailwindcss', 'postcss-preset-env'],
+  plugins: ['tailwindcss', 'autoprefixer'],
 }

examples/blog-starter/package.json

@@ -19,7 +19,6 @@
   "devDependencies": {
     "autoprefixer": "^10.2.1",
     "postcss": "^8.2.4",
-    "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^2.0.2"
   },
   "license": "MIT"

examples/blog-starter/postcss.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ['tailwindcss', 'postcss-preset-env'],
+  plugins: ['tailwindcss', 'autoprefixer'],
 }

examples/cms-sanity/schemas/schema.js

@@ -71,6 +71,9 @@ export default createSchema({
           name: 'slug',
           title: 'Slug',
           type: 'slug',
+          options: {
+            source: 'title',
+          },
         },
       ],
     },

examples/fast-refresh-demo/README.md

@@ -15,9 +15,9 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example fast-refresh-demo fast-refresh-demo
+npx create-next-app --example fast-refresh-demo fast-refresh-demo-app
 # or
-yarn create next-app --example fast-refresh-demo fast-refresh-demo
+yarn create next-app --example fast-refresh-demo fast-refresh-demo-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)).

examples/with-draft-js/README.md

@@ -15,7 +15,7 @@ Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_mediu
 Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-draft-js
+npx create-next-app --example with-draft-js with-draft-js-app
 # or
 yarn create next-app --example with-draft-js with-draft-js-app
 ```

examples/with-electron-typescript/electron-src/index.ts

@@ -36,5 +36,6 @@ app.on('window-all-closed', app.quit)
 
 // listen the channel `message` and resend the received message to the renderer process
 ipcMain.on('message', (event: IpcMainEvent, message: any) => {
-  event.sender.send('message', message)
+  console.log(message)
+  setTimeout(() => event.sender.send('message', 'hi from electron'), 500)
 })

examples/with-electron-typescript/renderer/interfaces/index.ts

@@ -3,6 +3,17 @@
 // example, to import the interface below do:
 //
 // import User from 'path/to/interfaces';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { IpcRenderer } from 'electron'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace NodeJS {
+    interface Global {
+      ipcRenderer: IpcRenderer
+    }
+  }
+}
 
 export type User = {
   id: number

examples/with-electron-typescript/renderer/pages/index.tsx

@@ -1,10 +1,23 @@
+import { useEffect } from 'react'
 import Link from 'next/link'
 import Layout from '../components/Layout'
 
 const IndexPage = () => {
+  useEffect(() => {
+    // add a listener to 'message' channel
+    global.ipcRenderer.addListener('message', (_event, args) => {
+      alert(args)
+    })
+  }, [])
+
+  const onSayHiClick = () => {
+    global.ipcRenderer.send('message', 'hi from next')
+  }
+
   return (
     <Layout title="Home | Next.js + TypeScript + Electron Example">
       <h1>Hello Next.js 👋</h1>
+      <button onClick={onSayHiClick}>Say hi to electron</button>
       <p>
         <Link href="/about">
           <a>About</a>

examples/with-emotion-vanilla/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [["next/babel"]],
+  "plugins": ["@emotion/babel-plugin"]
+}

examples/with-emotion-vanilla/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-emotion-vanilla/README.md

@@ -0,0 +1,24 @@
+# Emotion Vanilla Example
+
+Extract and inline critical css with
+[emotion](https://github.com/emotion-js/emotion/tree/master/packages/emotion),
+[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
+[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css)
+
+## 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/with-emotion-vanilla)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-emotion-vanilla with-emotion-vanilla-app
+# or
+yarn create next-app --example with-emotion-vanilla with-emotion-vanilla-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-emotion-vanilla/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "with-emotion-vanilla",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@emotion/babel-plugin": "11.0.0"
+  },
+  "dependencies": {
+    "@emotion/css": "11.0.0",
+    "@emotion/server": "11.0.0",
+    "next": "latest",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}

examples/with-emotion-vanilla/pages/_document.js

@@ -0,0 +1,34 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import * as React from 'react'
+import { renderStatic } from '../shared/renderer'
+export default class AppDocument extends Document {
+  static async getInitialProps(ctx) {
+    const page = await ctx.renderPage()
+    const { css, ids } = await renderStatic(page.html)
+    const initialProps = await Document.getInitialProps(ctx)
+    return {
+      ...initialProps,
+      styles: (
+        <React.Fragment>
+          {initialProps.styles}
+          <style
+            data-emotion={`css ${ids.join(' ')}`}
+            dangerouslySetInnerHTML={{ __html: css }}
+          />
+        </React.Fragment>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}