Merge branch 'canary' into feat/opt-out-error-dark-mode

Author: ijjk

.github/workflows/build_test_deploy.yml

@@ -8,7 +8,7 @@ name: Build, test, and deploy
 
 env:
   NAPI_CLI_VERSION: 2.7.0
-  TURBO_VERSION: 1.2.6
+  TURBO_VERSION: 1.2.9
   RUST_TOOLCHAIN: nightly-2022-02-23
 
 jobs:
@@ -908,6 +908,47 @@ jobs:
       - run: ./scripts/publish-native.js $GITHUB_REF
       - run: ./scripts/publish-release.sh
 
+  testDeployE2E:
+    name: E2E (deploy)
+    runs-on: ubuntu-latest
+    needs: [publishRelease]
+    env:
+      NEXT_TELEMETRY_DISABLED: 1
+      NEXT_TEST_JOB: 1
+      VERCEL_TEST_TOKEN: ${{ secrets.VERCEL_TEST_TOKEN }}
+      VERCEL_TEST_TEAM: 'vtest314-next-e2e-tests'
+    steps:
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          check-latest: true
+
+      - uses: actions/cache@v3
+        id: restore-build
+        with:
+          path: ./*
+          key: ${{ github.sha }}-${{ github.run_number }}
+
+      - run: npm i -g [email protected] && npx playwright install-deps
+        name: Install playwright dependencies
+
+      - run: RESET_VC_PROJECT=true node scripts/reset-vercel-project.mjs
+        name: Reset test project
+
+      - run: NEXT_TEST_MODE=deploy node run-tests.js --type e2e
+        name: Run test/e2e (deploy)
+
+      - name: Upload test trace
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: test-trace
+          if-no-files-found: ignore
+          retention-days: 2
+          path: |
+            test/traces
+
   releaseStats:
     name: Release Stats
     runs-on: ubuntu-latest

.github/workflows/pull_request_stats.yml

@@ -78,7 +78,7 @@ jobs:
       # since the repo's dependencies aren't installed we need
       # to install napi globally
       - run: npm i -g @napi-rs/[email protected]
-      - run: npm i -g [email protected].6
+      - run: npm i -g [email protected].9
 
       - name: Build
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}

.gitignore

@@ -29,6 +29,7 @@ test/tmp/**
 # Editors
 **/.idea
 **/.#*
+.nvmrc
 
 # examples
 examples/**/out

docs/advanced-features/compiler.md

@@ -187,8 +187,6 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 }
 ```
 
-## Experimental Features
-
 ### Emotion
 
 We're working to port `@emotion/babel-plugin` to the Next.js Compiler.
@@ -199,7 +197,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 // next.config.js
 
 module.exports = {
-  experimental: {
+  compiler: {
     emotion: boolean | {
       // default is true. It will be disabled when build type is production.
       sourceMap?: boolean,
@@ -219,6 +217,8 @@ module.exports = {
 
 Only `importMap` in `@emotion/babel-plugin` is not supported for now.
 
+## Experimental Features
+
 ### Minification
 
 You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

docs/advanced-features/i18n-routing.md

@@ -164,7 +164,7 @@ module.exports = {
 Next, we can use [Middleware](/docs/middleware.md) to add custom routing rules:
 
 ```js
-// pages/_middleware.ts
+// middleware.ts
 
 import { NextRequest, NextResponse } from 'next/server'
 

docs/advanced-features/middleware.md

@@ -24,25 +24,29 @@ Middleware enables you to use code over configuration. This gives you full flexi
 npm install next@latest
 ```
 
-2. Then, create a `_middleware.ts` file under your `/pages` directory.
+2. Then, create a `middleware.ts` file under your project root directory.
 
-3. Finally, export a middleware function from the `_middleware.ts` file.
+3. Finally, export a middleware function from the `middleware.ts` file.
 
 ```jsx
-// pages/_middleware.ts
+// middleware.ts
 
-import type { NextFetchEvent, NextRequest } from 'next/server'
+import type { NextRequest, NextResponse } from 'next/server'
+import { areCredentialsValid } from '../lib'
 
-export function middleware(req: NextRequest, ev: NextFetchEvent) {
-  return new Response('Hello, world!')
+export function middleware(req: NextRequest) {
+  if (areCredentialsValid(req.headers.get('authorization')) {
+    return NextResponse.next()
+  }
+  return NextResponse.redirect(`/login?from=${req.nextUrl.pathname}`)
 }
 ```
 
 In this example, we use the standard Web API Response ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Response)).
 
 ## API
 
-Middleware is created by using a `middleware` function that lives inside a `_middleware` file. Its API is based upon the native [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent), [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response), and [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) objects.
+Middleware is created by using a `middleware` function that lives inside a `middleware` file. Its API is based upon the native [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent), [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response), and [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request) objects.
 
 These native Web API objects are extended to give you more control over how you manipulate and configure a response, based on the incoming requests.
 
@@ -75,31 +79,6 @@ Middleware can be used for anything that shares logic for a set of pages, includ
 
 ## Execution Order
 
-If your Middleware is created in `/pages/_middleware.ts`, it will run on all routes within the `/pages` directory. The below example assumes you have `about.tsx` and `teams.tsx` routes.
-
-```bash
-- package.json
-- /pages
-    _middleware.ts # Will run on all routes under /pages
-    index.tsx
-    about.tsx
-    teams.tsx
-```
-
-If you _do_ have sub-directories with nested routes, Middleware will run from the top down. For example, if you have `/pages/about/_middleware.ts` and `/pages/about/team/_middleware.ts`, `/about` will run first and then `/about/team`. The below example shows how this works with a nested routing structure.
-
-```bash
-- package.json
-- /pages
-    index.tsx
-    - /about
-      _middleware.ts # Will run first
-      about.tsx
-      - /teams
-        _middleware.ts # Will run second
-        teams.tsx
-```
-
 Middleware runs directly after `redirects` and `headers`, before the first filesystem lookup. This excludes `/_next` files.
 
 ## Deployment

docs/advanced-features/react-18/server-components.md

@@ -94,15 +94,7 @@ export default function Document() {
 
 ### `next/app`
 
-If you're using `_app.js`, the usage is the same as [Custom App](/docs/advanced-features/custom-app).
-If you're using `_app.server.js` as a server component, see the example below where it only receives the `children` prop as React elements. You can wrap any other client or server components around `children` to customize the layout of your app.
-
-```js
-// pages/_app.server.js
-export default function App({ children }) {
-  return children
-}
-```
+The usage of `_app.js` is the same as [Custom App](/docs/advanced-features/custom-app). Using custom app as server component such as `_app.server.js` is not recommended, to keep align with non server components apps for client specific things like global CSS imports.
 
 ### Routing
 

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

@@ -31,8 +31,10 @@ pnpm create next-app -- --ts
 - **--ts, --typescript** - Initialize as a TypeScript project.
 - **-e, --example [name]|[github-url]** - An example to bootstrap the app with. You can use an example name from the [Next.js repo](https://github.com/vercel/next.js/tree/canary/examples) or a GitHub URL. The URL can use any branch and/or subdirectory.
 - **--example-path [path-to-example]** - In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: `--example-path foo/bar`
-- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend running `yarn create next-app`
-- **--use-pnpm** - Explicitly tell the CLI to bootstrap the app using pnpm. To bootstrap using yarn we recommend running `yarn create next-app`
+- **--use-npm** - Explicitly tell the CLI to bootstrap the app using npm
+- **--use-pnpm** - Explicitly tell the CLI to bootstrap the app using pnpm
+
+Note: To bootstrap using `yarn` we recommend running `yarn create next-app`
 
 ### Why use Create Next App?
 

docs/api-reference/next.config.js/custom-page-extensions.md

@@ -16,7 +16,7 @@ module.exports = {
 
 > **Note**: The default value of `pageExtensions` is [`['tsx', 'ts', 'jsx', 'js']`](https://github.com/vercel/next.js/blob/f1dbc9260d48c7995f6c52f8fbcc65f08e627992/packages/next/server/config-shared.ts#L161).
 
-> **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js`, `_middleware.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `_middleware.ts`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `_middleware.page.ts`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively.
+> **Note**: configuring `pageExtensions` also affects `_document.js`, `_app.js`, `middleware.js` as well as files under `pages/api/`. For example, setting `pageExtensions: ['page.tsx', 'page.ts']` means the following files: `_document.tsx`, `_app.tsx`, `middleware.ts`, `pages/users.tsx` and `pages/api/users.ts` will have to be renamed to `_document.page.tsx`, `_app.page.tsx`, `middleware.page.ts`, `pages/users.page.tsx` and `pages/api/users.page.ts` respectively.
 
 ## Including non-page files in the `pages` directory
 
@@ -32,7 +32,7 @@ module.exports = {
 
 Then rename your pages to have a file extension that includes `.page` (ex. rename `MyPage.tsx` to `MyPage.page.tsx`).
 
-> **Note**: Make sure you also rename `_document.js`, `_app.js`, `_middleware.js`, as well as files under `pages/api/`.
+> **Note**: Make sure you also rename `_document.js`, `_app.js`, `middleware.js`, as well as files under `pages/api/`.
 
 Without this config, Next.js assumes every tsx/ts/jsx/js file in the `pages` directory is a page or API route, and may expose unintended routes vulnerable to denial of service attacks, or throw an error like the following when building the production bundle:
 

docs/api-reference/next/server.md

@@ -8,7 +8,7 @@ The `next/server` module provides several exports for server-only helpers, such
 
 ## NextMiddleware
 
-Middleware is created by using a `middleware` function that lives inside a `_middleware` file. The Middleware API is based upon the native [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request), [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent), and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects.
+Middleware is created by using a `middleware` function that lives inside a `middleware` file. The Middleware API is based upon the native [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request), [`FetchEvent`](https://developer.mozilla.org/en-US/docs/Web/API/FetchEvent), and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) objects.
 
 These native Web API objects are extended to give you more control over how you manipulate and configure a response, based on the incoming requests.
 
@@ -105,7 +105,6 @@ The following static methods are available on the `NextResponse` class directly:
 - `redirect()` - Returns a `NextResponse` with a redirect set
 - `rewrite()` - Returns a `NextResponse` with a rewrite set
 - `next()` - Returns a `NextResponse` that will continue the middleware chain
-- `json()` - A convenience method to create a response that encodes the provided JSON data
 
 ```ts
 import { NextResponse } from 'next/server'
@@ -120,7 +119,7 @@ export function middleware(req: NextRequest) {
     return NextResponse.rewrite('/not-home')
   }
 
-  return NextResponse.json({ message: 'Hello World!' })
+  return NextResponse.next()
 }
 ```
 
@@ -183,6 +182,21 @@ console.log(NODE_ENV)
 console.log(process.env)
 ```
 
+### The body limitation
+
+When using middlewares, it is not permitted to change the response body: you can only set responses headers.
+Returning a body from a middleware function will issue an `500` server error with an explicit response message.
+
+The `NextResponse` API (which eventually is tweaking response headers) allows you to:
+
+- redirect the incoming request to a different url
+- rewrite the response by displaying a given url
+- set response cookies
+- set response headers
+
+These are solid tools to implement cases such as A/B testing, authentication, feature flags, bot protection...
+A middleware with the ability to change the response's body would bypass Next.js routing logic.
+
 ## Related
 
 <div class="card">