Merge branch 'canary' into canary

.github/workflows/build_test_deploy.yml

@@ -121,6 +121,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -150,6 +151,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -201,6 +203,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -247,6 +250,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -288,6 +292,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -317,6 +322,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -357,6 +363,7 @@ jobs:
           path: ./*
           key: ${{ github.sha }}
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -389,6 +396,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -426,6 +434,7 @@ jobs:
           key: ${{ github.sha }}
 
       - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
@@ -436,6 +445,36 @@ jobs:
       - run: '[[ -z "$BROWSERSTACK_ACCESS_KEY" ]] && echo "Skipping for PR" || node run-tests.js test/integration/production-nav/test/index.test.js'
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
+  testFirefoxNode17:
+    name: Test Firefox Node.js 17
+    runs-on: ubuntu-latest
+    needs: [build, testFirefox, build-native-dev]
+    env:
+      BROWSER_NAME: 'firefox'
+      NEXT_TELEMETRY_DISABLED: 1
+    steps:
+      - name: Setup node
+        uses: actions/setup-node@v2
+        if: ${{ steps.docs-change.outputs.docsChange != 'docs only change' }}
+        with:
+          node-version: 17
+          check-latest: true
+      - uses: actions/cache@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}
+      - uses: actions/download-artifact@v2
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+        with:
+          name: next-swc-dev-binary
+          path: packages/next/native
+      - run: npx playwright install-deps && npx playwright install firefox
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+      - run: node run-tests.js test/integration/production/test/index.test.js
+        if: ${{needs.build.outputs.docsChange != 'docs only change'}}
+
   publishRelease:
     if: ${{ needs.build.outputs.isRelease == 'true' }}
     name: Potentially publish release
@@ -970,7 +1009,7 @@ jobs:
           sudo apt-get install gcc-aarch64-linux-gnu -y
 
       - name: Cache native binary
-        if: ${{ steps.binary-cache.outputs.cache-hit != 'true' && steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         id: binary-cache
         uses: actions/cache@v2
         with:

.github/workflows/pull_request_stats.yml

@@ -96,14 +96,17 @@ jobs:
         with:
           fetch-depth: 25
 
+      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
+        id: docs-change
+
       - uses: actions/download-artifact@v2
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           name: next-swc-dev-binary
           path: packages/next/native
 
       - run: cp -r packages/next/native .github/actions/next-stats-action/native
+        if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
-      - run: echo ::set-output name=DOCS_CHANGE::$(node skip-docs-change.js echo 'not-docs-only-change')
-        id: docs-change
       - uses: ./.github/actions/next-stats-action
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

docs/advanced-features/i18n-routing.md

@@ -139,6 +139,48 @@ When using Domain Routing, if a user with the `Accept-Language` header `fr;q=0.9
 
 When using Sub-path Routing, the user would be redirected to `/fr`.
 
+### Prefixing the Default Locale
+
+With Next.js 12 and [Middleware](/docs/middleware.md), we can add a prefix to the default locale with a [workaround](https://github.com/vercel/next.js/discussions/18419).
+
+For example, here's a `next.config.js` file with support for a few languages. Note the `"default"` locale has been added intentionally.
+
+```js
+// next.config.js
+
+module.exports = {
+  i18n: {
+    locales: ['default', 'en', 'de', 'fr'],
+    defaultLocale: 'default',
+    localeDetection: false,
+  },
+  trailingSlash: true,
+}
+```
+
+Next, we can use [Middleware](/docs/middleware.md) to add custom routing rules:
+
+```js
+// pages/_middleware.ts
+
+import { NextRequest, NextResponse } from 'next/server'
+
+const PUBLIC_FILE = /\.(.*)$/
+
+export function middleware(request: NextRequest) {
+  const shouldHandleLocale =
+    !PUBLIC_FILE.test(request.nextUrl.pathname) &&
+    !request.nextUrl.pathname.includes('/api/') &&
+    request.nextUrl.locale === 'default'
+
+  return shouldHandleLocale
+    ? NextResponse.redirect(`/en${request.nextUrl.href}`)
+    : undefined
+}
+```
+
+This [Middleware](/docs/middleware.md) skips adding the default prefix to [API Routes](/docs/api-routes/introduction.md) and [public](/docs/basic-features/static-file-serving.md) files like fonts or images. If a request is made to the default locale, we redirect to our prefix `/en`.
+
 ### Disabling Automatic Locale Detection
 
 The automatic locale detection can be disabled with:
@@ -306,4 +348,4 @@ export async function getStaticProps({ locale }) {
 - `locales`: 100 total locales
 - `domains`: 100 total locale domain items
 
-> **Note:** These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getStaticProps-pages). We are continuing to evaluate if these limits are sufficient.
+> **Note:** These limits have been added initially to prevent potential [performance issues at build time](#dynamic-routes-and-getStaticProps-pages). You can workaround these limits with custom routing using [Middleware](/docs/middleware.md) in Next.js 12.

docs/advanced-features/react-18.md

@@ -77,7 +77,7 @@ module.exports = {
 }
 ```
 
-Next, you need to customize your `pages/_document` component to be a functional component by removing any static methods like `getInitialProps` or exports like `getServerSideProps`
+Next, if you already have customized `pages/_document` component, you need to remove the `getInitialProps` static method and the `getServerSideProps` export if there’s any, otherwise it won't work with server components. If no custom Document component is provided, Next.js will fallback to a default one like below.
 
 ```jsx
 // pages/_document.js
@@ -142,6 +142,7 @@ To see a full example, check out [link to the demo and repository](https://githu
 While RSC and SSR streaming is still in the alpha stage, not all Next.js APIs are supported. The following Next.js APIs have limited functionality inside Server Components:
 
 - React internals: Most of React hooks such as `useContext`, `useState`, `useReducer`, `useEffect` and `useLayoutEffect` are not supported as of today since Server Components are executed per requests and aren't stateful.
+- `next/head`
 - Partial: Note that Inside `.client.js` components `useRouter` is supported
 - Styled JSX
 - CSS Modules

docs/api-reference/next.config.js/url-imports.md

@@ -1,10 +1,10 @@
 ---
-description: Configure Next.js to allow importing modules from external URLs.
+description: Configure Next.js to allow importing modules from external URLs (experimental).
 ---
 
-# URL imports
+# URL Imports
 
-URL Imports are an experimental feature that allows you to import modules directly from external servers (instead of from the local disk).
+URL imports are an experimental feature that allows you to import modules directly from external servers (instead of from the local disk).
 
 > **Warning**: This feature is experimental. Only use domains that you trust to download and execute on your machine. Please exercise
 > discretion, and caution until the feature is flagged as stable.
@@ -27,6 +27,10 @@ import { a, b, c } from 'https://example.com/modules/some/module.js'
 
 URL Imports can be used everywhere normal package imports can be used.
 
+## Security Model
+
+This feature is being designed with **security as the top priority**. To start, we added an experimental flag forcing you to explicitly allow the domains you accept URL imports from. We're working to take this further by limiting URL imports to execute in the browser sandbox using the [Edge Runtime](/docs/api-reference/edge-runtime.md). This runtime is used by [Middleware](/docs/middleware.md) as well as [Next.js Live](https://vercel.com/live).
+
 ## Lockfile
 
 When using URL imports, Next.js will create a lockfile in the `next.lock` directory.
@@ -41,7 +45,7 @@ These resources will have a `no-cache` entry in the lockfile and will always be
 
 ## Examples
 
-From skypack CDN:
+#### Skypack
 
 ```js
 import confetti from 'https://cdn.skypack.dev/canvas-confetti'
@@ -55,7 +59,7 @@ export default () => {
 }
 ```
 
-Static image imports:
+#### Static Image Imports
 
 ```js
 import Image from 'next/image'
@@ -68,15 +72,15 @@ export default () => (
 )
 ```
 
-URLs in CSS:
+#### URLs in CSS
 
 ```css
 .className {
   background: url('https://github.com/vercel/next.js/raw/canary/test/integration/production/public/vercel.png');
 }
 ```
 
-Asset imports:
+#### Asset Imports
 
 ```js
 import Image from 'next/image'

docs/api-reference/next/image.md

@@ -302,7 +302,7 @@ module.exports = {
 
 You can specify a list of image widths using the `images.imageSizes` property in your `next.config.js` file. These widths are concatenated with the array of [device sizes](#device-sizes) to form the full array of sizes used to generate image [srcset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset)s.
 
-The reason there are two seperate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.**
+The reason there are two separate lists is that imageSizes is only used for images which provide a [`sizes`](#sizes) prop, which indicates that the image is less than the full width of the screen. **Therefore, the sizes in imageSizes should all be smaller than the smallest size in deviceSizes.**
 
 If no configuration is provided, the default below is used.
 

docs/deployment.md

@@ -127,12 +127,14 @@ USER nextjs
 
 EXPOSE 3000
 
+ENV PORT 3000
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry.
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["yarn", "start"]
+CMD ["node_modules/.bin/next", "start"]
 ```
 
 Make sure to place this Dockerfile in the root folder of your project.

docs/upgrading.md

@@ -56,6 +56,21 @@ The `className` prop is unchanged and will still be passed to the underlying `<i
 
 See the [documentation](https://nextjs.org/docs/basic-features/image-optimization#styling) for more info.
 
+### Next.js' HMR connection now uses a WebSocket
+
+Previously, Next.js used a [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events) connection to receive HMR events. Next.js 12 now uses a WebSocket connection.
+
+In some cases when proxying requests to the Next.js dev server, you will need to ensure the upgrade request is handled correctly. For example, in `nginx` you would need to add the following configuration:
+
+```nginx
+location /_next/webpack-hmr {
+    proxy_pass http://localhost:3000/_next/webpack-hmr;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+}
+```
+
 ### Webpack 4 support has been removed
 
 If you are already using webpack 5 you can skip this section.

examples/with-docker/Dockerfile

@@ -33,9 +33,11 @@ USER nextjs
 
 EXPOSE 3000
 
+ENV PORT 3000
+
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
 # Uncomment the following line in case you want to disable telemetry.
 # ENV NEXT_TELEMETRY_DISABLED 1
 
-CMD ["yarn", "start"]
+CMD ["node_modules/.bin/next", "start"]

examples/with-elasticsearch/README.md

@@ -4,7 +4,7 @@
 
 If you want to learn more about Elasticsearch, visit the following pages:
 
-- [Elastic Stack](https://https://www.elastic.co/products)
+- [Elastic Stack](https://www.elastic.co/products)
 - [Elastic Documentation](https://elastic.co/docs)
 
 ## Deploy your own

examples/with-supertokens/package.json

@@ -9,8 +9,8 @@
     "next": "latest",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "supertokens-auth-react": "^0.16.0",
-    "supertokens-node": "^7.3.0"
+    "supertokens-auth-react": "^0.17.0",
+    "supertokens-node": "^8.0.0"
   },
   "devDependencies": {
     "eslint-config-next": "11.0.1"

examples/with-supertokens/pages/api/user.js

@@ -18,6 +18,6 @@ export default async function user(req, res) {
     note: 'Fetch any data from your application for authenticated user after using verifySession middleware',
     userId: req.session.getUserId(),
     sessionHandle: req.session.getHandle(),
-    userDataInJWT: req.session.getJWTPayload(),
+    accessTokenPayload: req.session.getAccessTokenPayload(),
   })
 }

packages/next/build/index.ts

@@ -690,6 +690,18 @@ export default async function build(
       console.error(error)
       console.error()
 
+      // When using the web runtime, common Node.js native APIs are not available.
+      if (
+        hasConcurrentFeatures &&
+        error.indexOf("Module not found: Can't resolve 'fs'") > -1
+      ) {
+        const err = new Error(
+          `Native Node.js APIs are not supported in the Edge Runtime with \`concurrentFeatures\` enabled. Found \`fs\` imported.\n\n`
+        ) as NextError
+        err.code = 'EDGE_RUNTIME_UNSUPPORTED_API'
+        throw err
+      }
+
       if (
         error.indexOf('private-next-pages') > -1 ||
         error.indexOf('__next_polyfill__') > -1

packages/next/build/output/index.ts

@@ -150,6 +150,7 @@ buildStore.subscribe((state) => {
       (clientWasLoading ? client.modules : 0) +
       (serverWasLoading ? server.modules : 0) +
       (serverWebWasLoading ? serverWeb?.modules || 0 : 0),
+    hasServerWeb: !!serverWeb,
   }
   if (client.errors) {
     // Show only client errors