Merge branch 'canary' into edge/drop-browser-field

.github/workflows/build_test_deploy.yml

@@ -97,7 +97,7 @@ jobs:
         if: ${{needs.build.outputs.docsChange != 'docs only change'}}
         with:
           profile: minimal
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
           components: rustfmt, clippy
 
       - name: Cache cargo registry
@@ -732,7 +732,7 @@ jobs:
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         with:
           profile: minimal
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
 
       - name: Cache cargo registry
         uses: actions/cache@v2
@@ -811,7 +811,7 @@ jobs:
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
         uses: actions-rs/toolchain@v1
         with:
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
           profile: minimal
       - run: cd packages/next-swc && cargo test
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
@@ -889,8 +889,8 @@ jobs:
             # Node.js in Baidu need to compatible with `GLIBC_2.12`
             build: >-
               set -e &&
-              rustup toolchain install nightly-2021-11-15 &&
-              rustup default nightly-2021-11-15 &&
+              rustup toolchain install nightly-2022-02-23 &&
+              rustup default nightly-2022-02-23 &&
               rustup target add x86_64-unknown-linux-gnu &&
               npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
               turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-gnu --zig --zig-abi-suffix 2.12 &&
@@ -900,8 +900,8 @@ jobs:
             docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
             build: >-
               set -e &&
-              rustup toolchain install nightly-2021-11-15 &&
-              rustup default nightly-2021-11-15 &&
+              rustup toolchain install nightly-2022-02-23 &&
+              rustup default nightly-2022-02-23 &&
               rustup target add x86_64-unknown-linux-musl &&
               npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
               turbo run build-native --cache-dir=".turbo" -- --release --target x86_64-unknown-linux-musl &&
@@ -922,8 +922,8 @@ jobs:
             docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine-zig
             build: >-
               set -e &&
-              rustup toolchain install nightly-2021-11-15 &&
-              rustup default nightly-2021-11-15 &&
+              rustup toolchain install nightly-2022-02-23 &&
+              rustup default nightly-2022-02-23 &&
               rustup target add aarch64-unknown-linux-gnu &&
               npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
               turbo run build-native --cache-dir=".turbo" -- --release --target aarch64-unknown-linux-gnu --zig --zig-abi-suffix 2.12 &&
@@ -963,8 +963,8 @@ jobs:
             build: >-
               set -e &&
               npm i -g @napi-rs/cli@2.4.4 turbo@1.0.28 &&
-              rustup toolchain install nightly-2021-11-15 &&
-              rustup default nightly-2021-11-15 &&
+              rustup toolchain install nightly-2022-02-23 &&
+              rustup default nightly-2022-02-23 &&
               rustup target add aarch64-unknown-linux-musl &&
               turbo run build-native --cache-dir=".turbo" -- --release --target aarch64-unknown-linux-musl &&
               llvm-strip -x packages/next-swc/native/next-swc.*.node
@@ -1030,7 +1030,7 @@ jobs:
         with:
           profile: minimal
           override: true
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
           target: ${{ matrix.settings.target }}
 
       - name: Cache cargo registry
@@ -1092,7 +1092,7 @@ jobs:
         uses: actions-rs/toolchain@v1
         with:
           profile: minimal
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
           override: true
           target: wasm32-unknown-unknown
 
@@ -1148,7 +1148,7 @@ jobs:
         uses: actions-rs/toolchain@v1
         with:
           profile: minimal
-          toolchain: nightly-2021-11-15
+          toolchain: nightly-2022-02-23
           override: true
           target: wasm32-unknown-unknown
 

docs/advanced-features/compiler.md

@@ -189,6 +189,36 @@ 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.
+
+First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `next.config.js` file:
+
+```js
+// next.config.js
+
+module.exports = {
+  experimental: {
+    emotion: boolean | {
+      // default is true. It will be disabled when build type is production.
+      sourceMap?: boolean,
+      // default is 'dev-only'.
+      autoLabel?: 'never' | 'dev-only' | 'always',
+      // default is '[local]'.
+      // Allowed values: `[local]` `[filename]` and `[dirname]`
+      // This option only works when autoLabel is set to 'dev-only' or 'always'.
+      // It allows you to define the format of the resulting label.
+      // The format is defined via string where variable parts are enclosed in square brackets [].
+      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
+      labelFormat?: string,
+    },
+  },
+}
+```
+
+Only `importMap` in `@emotion/babel-plugin` is not supported for now.
+
 ### Minification
 
 You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.

docs/advanced-features/custom-app.md

@@ -40,6 +40,8 @@ The `Component` prop is the active `page`, so whenever you navigate between rout
 
 `pageProps` is an object with the initial props that were preloaded for your page by one of our [data fetching methods](/docs/basic-features/data-fetching/overview.md), otherwise it's an empty object.
 
+The `App.getInitialProps` receives a single argument called `context.ctx`. It's an object with the same set of properties as the [`context` object](/docs/api-reference/data-fetching/get-initial-props#context-object) in `getInitialProps`.
+
 ### Caveats
 
 - If your app is running and you added a custom `App`, you'll need to restart the development server. Only required if `pages/_app.js` didn't exist before.

docs/basic-features/built-in-css-support.md

@@ -153,7 +153,7 @@ You can use component-level Sass via CSS Modules and the `.module.scss` or `.mod
 Before you can use Next.js' built-in Sass support, be sure to install [`sass`](https://github.com/sass/sass):
 
 ```bash
-npm install sass
+npm install --save-dev sass
 ```
 
 Sass support has the same benefits and restrictions as the built-in CSS support detailed above.

docs/going-to-production.md

@@ -69,6 +69,12 @@ export async function getServerSideProps({ req, res }) {
 }
 ```
 
+By default, `Cache-Control` headers will be set differently depending on how your page fetches data.
+
+If the page is using `getServerSideProps` or `getInitialProps`, then it will use the default `Cache-Control` header configured by `next start` in order to prevent accidental caching of responses that cannot be cached. If you want a different cache behavior while using SSR you can use `res.setHeader('Cache-Control', 'value_you_prefer')`.
+
+If the page is using `getStaticProps` or automatic static optimization, then it will have s-maxage=REVALIDATE_SECONDS, stale-while-revalidate or if revalidate is not used s-maxage=31536000, stale-while-revalidate.
+
 > **Note:** Your deployment provider must support edge caching for dynamic responses. If you are self-hosting, you will need to add this logic to the edge yourself using a key/value store. If you are using Vercel, [edge caching works without configuration](https://vercel.com/docs/edge-network/caching).
 
 ## Reducing JavaScript Size

examples/with-emotion-swc/README.md

@@ -0,0 +1,31 @@
+# Emotion Example
+
+Extract and inline critical css with
+[@emotion/css](https://github.com/emotion-js/emotion/tree/master/packages/css),
+[@emotion/server](https://github.com/emotion-js/emotion/tree/master/packages/server),
+[@emotion/react](https://github.com/emotion-js/emotion/tree/master/packages/react),
+and [@emotion/styled](https://github.com/emotion-js/emotion/tree/master/packages/styled).
+
+## Preview
+
+Preview the example live on [StackBlitz](http://stackblitz.com/):
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-emotion)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-emotion&project-name=with-emotion&repository-name=with-emotion)
+
+## 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 with-emotion-app
+# or
+yarn create next-app --example with-emotion with-emotion-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-emotion-swc/next.config.js

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    emotion: true,
+  },
+}
+
+module.exports = nextConfig

examples/with-emotion-swc/package.json

@@ -0,0 +1,15 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@emotion/react": "11.8.1",
+    "@emotion/styled": "11.8.1",
+    "next": "latest",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}