Merge branch 'canary' into tt-violation-fix-webpack

.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:
@@ -873,6 +873,7 @@ jobs:
  - build
  - build-wasm
  - build-native
+ - build-native-freebsd
  env:
  NPM_TOKEN: ${{ secrets.NPM_TOKEN_ELEVATED }}
  steps:
@@ -907,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
@@ -1303,6 +1345,66 @@ jobs:
  name: next-swc-binaries
  path: packages/next-swc/native/next-swc.*.node
 
+ build-native-freebsd:
+ if: ${{ needs.build.outputs.isRelease == 'true' }}
+ needs: build
+ name: stable - x86_64-unknown-freebsd - node@16
+ runs-on: macos-10.15
+ steps:
+ - name: tune mac network
+ run: sudo sysctl -w net.link.generic.system.hwcksum_tx=0 && sudo sysctl -w net.link.generic.system.hwcksum_rx=0
+ - uses: actions/checkout@v3
+ - name: Delete useless files
+ run: |
+ rm -rf bench
+ rm -rf docs
+ rm -rf errors
+ rm -rf examples
+ rm -rf scripts
+ rm -rf test
+ - name: Build
+ id: build
+ uses: vmactions/freebsd-vm@v0.1.6
+ env:
+ DEBUG: napi:*
+ RUSTUP_HOME: /usr/local/rustup
+ CARGO_HOME: /usr/local/cargo
+ RUSTUP_IO_THREADS: 1
+ # Disable LTO, or the lld may crash with OOM
+ CARGO_PROFILE_RELEASE_LTO: false
+ with:
+ envs: DEBUG RUSTUP_HOME CARGO_HOME RUSTUP_IO_THREADS CARGO_PROFILE_RELEASE_LTO NAPI_CLI_VERSION TURBO_VERSION RUST_TOOLCHAIN
+ usesh: true
+ mem: 6000
+ prepare: |
+ pkg install -y curl node14
+ curl -qL https://www.npmjs.com/install.sh | sh
+ npm install -g yarn
+ curl https://sh.rustup.rs -sSf --output rustup.sh
+ sh rustup.sh -y --profile minimal --default-toolchain stable
+ export PATH="/usr/local/cargo/bin:$PATH"
+ echo "~~~~ rustc --version ~~~~"
+ rustc --version
+ echo "~~~~ node -v ~~~~"
+ node -v
+ run: |
+ export PATH="/usr/local/cargo/bin:$PATH"
+ pwd
+ ls -lah
+ whoami
+ env
+ freebsd-version
+ npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}"
+ yarn --cwd packages/next-swc build-native --release --target x86_64-unknown-freebsd
+ rm -rf node_modules
+ rm -rf packages/next-swc/target
+ - name: Upload artifact
+ uses: actions/upload-artifact@v3
+ with:
+ name: next-swc-binaries
+ path: packages/next-swc/native/next-swc.*.node
+ if-no-files-found: error
+
  build-wasm:
  needs: build
  if: ${{ needs.build.outputs.isRelease == 'true' }}

.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

contributing.md

@@ -270,7 +270,7 @@ When you add an example to the [examples](examples) directory, don’t forget to
 - Replace `DIRECTORY_NAME` with the directory name you’re adding.
 - Fill in `Example Name` and `Description`.
 - Examples should be TypeScript first, if possible.
-- You don’t need to add `name` or `version` in your `package.json`.
+- Omit the `name` and `version` fields from your `package.json`.
 - Ensure all your dependencies are up to date.
 - Ensure you’re using [`next/image`](https://nextjs.org/docs/api-reference/next/image).
 - To add additional installation instructions, please add it where appropriate.

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/ci-build-caching.md

@@ -0,0 +1,129 @@
+---
+description: Learn how to configure CI to cache Next.js builds
+---
+
+# Continuous Integration (CI) Build Caching
+
+To improve build performance, Next.js saves a cache to `.next/cache` that is shared between builds.
+
+To take advantage of this cache in Continuous Integration (CI) environments, your CI workflow will need to be configured to correctly persist the cache between builds.
+
+> If your CI is not configured to persist `.next/cache` between builds, you may see a [No Cache Detected](https://nextjs.org/docs/messages/no-cache) error.
+
+Here are some example cache configurations for common CI providers:
+
+## Vercel
+
+Next.js caching is automatically configured for you. There's no action required on your part.
+
+## CircleCI
+
+Edit your `save_cache` step in `.circleci/config.yml` to include `.next/cache`:
+
+```yaml
+steps:
+ - save_cache:
+ key: dependency-cache-{{ checksum "yarn.lock" }}
+ paths:
+ - ./node_modules
+ - ./.next/cache
+```
+
+If you do not have a `save_cache` key, please follow CircleCI's [documentation on setting up build caching](https://circleci.com/docs/2.0/caching/).
+
+## Travis CI
+
+Add or merge the following into your `.travis.yml`:
+
+```yaml
+cache:
+ directories:
+ - $HOME/.cache/yarn
+ - node_modules
+ - .next/cache
+```
+
+## GitLab CI
+
+Add or merge the following into your `.gitlab-ci.yml`:
+
+```yaml
+cache:
+ key: ${CI_COMMIT_REF_SLUG}
+ paths:
+ - node_modules/
+ - .next/cache/
+```
+
+## Netlify CI
+
+Use [Netlify Plugins](https://www.netlify.com/products/build/plugins/) with [`@netlify/plugin-nextjs`](https://www.npmjs.com/package/@netlify/plugin-nextjs).
+
+## AWS CodeBuild
+
+Add (or merge in) the following to your `buildspec.yml`:
+
+```yaml
+cache:
+ paths:
+ - 'node_modules/**/*' # Cache `node_modules` for faster `yarn` or `npm i`
+ - '.next/cache/**/*' # Cache Next.js for faster application rebuilds
+```
+
+## GitHub Actions
+
+Using GitHub's [actions/cache](https://github.com/actions/cache), add the following step in your workflow file:
+
+```yaml
+uses: actions/cache@v2
+with:
+ # See here for caching with `yarn` https://github.com/actions/cache/blob/main/examples.md#node---yarn or you can leverage caching with actions/setup-node https://github.com/actions/setup-node
+ path: |
+ ~/.npm
+ ${{ github.workspace }}/.next/cache
+ # Generate a new cache whenever packages or source files change.
+ key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+ # If source files changed but packages didn't, rebuild from a prior cache.
+ restore-keys: |
+ ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+```
+
+## Bitbucket Pipelines
+
+Add or merge the following into your `bitbucket-pipelines.yml` at the top level (same level as `pipelines`):
+
+```yaml
+definitions:
+ caches:
+ nextcache: .next/cache
+```
+
+Then reference it in the `caches` section of your pipeline's `step`:
+
+```yaml
+- step:
+ name: your_step_name
+ caches:
+ - node
+ - nextcache
+```
+
+## Heroku
+
+Using Heroku's [custom cache](https://devcenter.heroku.com/articles/nodejs-support#custom-caching), add a `cacheDirectories` array in your top-level package.json:
+
+```javascript
+"cacheDirectories": [".next/cache"]
+```
+
+## Azure Pipelines
+
+Using Azure Pipelines' [Cache task](https://docs.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/cache), add the following task to your pipeline yaml file somewhere prior to the task that executes `next build`:
+
+```yaml
+- task: Cache@2
+ displayName: 'Cache .next/cache'
+ inputs:
+ key: next | $(Agent.OS) | yarn.lock
+ path: '$(System.DefaultWorkingDirectory)/.next/cache'
+```

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