Merge branch 'canary' into fix-link-relative-path

.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 playwright-chromium@1.14.1 && 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/cli@2.7.0
- - run: npm i -g turbo@1.2.6
+ - run: npm i -g turbo@1.2.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/automatic-static-optimization.md

@@ -46,3 +46,4 @@ And if you add `getServerSideProps` to the page, it will then be JavaScript, lik
 
 - If you have a [custom `App`](/docs/advanced-features/custom-app.md) with `getInitialProps` then this optimization will be turned off in pages without [Static Generation](/docs/basic-features/data-fetching/get-static-props.md).
 - If you have a [custom `Document`](/docs/advanced-features/custom-document.md) with `getInitialProps` be sure you check if `ctx.req` is defined before assuming the page is server-side rendered. `ctx.req` will be `undefined` for pages that are prerendered.
+- Avoid using the `asPath` value on [`next/router`](/docs/api-reference/next/router.md#router-object) in the rendering tree until the router's `isReady` field is `true`. Statically optimized pages only know `asPath` on the client and not the server, so using it as a prop may lead to mismatch errors. The `active-class-name` example demonstrates one way to use `asPath` as a prop.

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/image.md

@@ -75,13 +75,13 @@ The `<Image />` component accepts a number of additional properties beyond those
 
 The layout behavior of the image as the viewport changes size.
 
-| `layout` | Behavior  | `srcSet` | `sizes` | Has wrapper and sizer |
-| ---------------------------------------- | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- | --------------------- |
-| `intrinsic` (default) | Scale *down* to fit width of container, up to image size  | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes |
-| `fixed` | Sized to `width` and `height` exactly  | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes |
-| `responsive` | Scale to fit width of container  | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes |
-| `fill` | Grow in both X and Y axes to fill container  | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes |
-| `raw`[\*](#experimental-raw-layout-mode) | Insert the image element with no automatic layout behavior | Behaves like `responsive` if the image has the `sizes` prop, and like `fixed` if it does not | optional | no |
+| `layout` | Behavior | `srcSet` | `sizes` | Has wrapper and sizer |
+| ---------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- | --------------------- |
+| `intrinsic` (default) | Scale *down* to fit width of container, up to image size | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes |
+| `fixed` | Sized to `width` and `height` exactly | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes |
+| `responsive` | Scale to fit width of container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes |
+| `fill` | Grow in both X and Y axes to fill container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes |
+| `raw`[\*](#experimental-raw-layout-mode) | Raw `<img>` without styles and native lazy loading  | Behaves like `responsive` if the image has the `sizes` prop, and like `fixed` if it does not | optional | no |
 
 - [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic)
  - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports.

docs/api-reference/next/router.md

@@ -53,6 +53,8 @@ The following is the definition of the `router` object returned by both [`useRou
 - `isReady`: `boolean` - Whether the router fields are updated client-side and ready for use. Should only be used inside of `useEffect` methods and not for conditionally rendering on the server. See related docs for use case with [automatically statically optimized pages](/docs/advanced-features/automatic-static-optimization.md)
 - `isPreview`: `boolean` - Whether the application is currently in [preview mode](/docs/advanced-features/preview-mode.md).
 
+> Using the `asPath` field may lead to a mismatch between client and server if the page is rendered using server-side rendering or [automatic static optimization](/docs/advanced-features/automatic-static-optimization.md). Avoid using `asPath` until the `isReady` field is `true`.
+
 The following methods are included inside `router`:
 
 ### router.push

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">

docs/getting-started.md

@@ -35,7 +35,7 @@ If you want to start with a TypeScript project you can use the `--typescript` fl
 npx create-next-app@latest --typescript
 # or
 yarn create next-app --typescript
-# or
+# or (the extra '--' is expected and tells pnpm to pass the args down)
 pnpm create next-app -- --typescript
 ```
 

errors/manifest.json

@@ -626,6 +626,10 @@
  "title": "middleware-relative-urls",
  "path": "/errors/middleware-relative-urls.md"
  },
+ {
+ "title": "nested-middleware",
+ "path": "/errors/nested-middleware.md"
+ },
  {
  "title": "deleting-query-params-in-middlewares",
  "path": "/errors/deleting-query-params-in-middlewares.md"
@@ -653,6 +657,10 @@
  {
  "title": "invalid-script",
  "path": "/errors/invalid-script.md"
+ },
+ {
+ "title": "returning-response-body-in-middleware",
+ "path": "/errors/returning-response-body-in-middleware.md"
  }
  ]
  }

errors/middleware-new-signature.md

@@ -5,7 +5,7 @@
 Your application is using a Middleware function that is using parameters from the deprecated API.
 
 ```typescript
-// _middleware.js
+// middleware.js
 import { NextResponse } from 'next/server'
 
 export function middleware(event) {
@@ -24,7 +24,7 @@ export function middleware(event) {
 Update to use the new API for Middleware:
 
 ```typescript
-// _middleware.js
+// middleware.js
 import { NextResponse } from 'next/server'
 
 export function middleware(request) {