Merge branch 'canary' into patch-1

.github/workflows/lock.yml

@@ -16,6 +16,7 @@ concurrency:
 jobs:
   action:
     runs-on: ubuntu-latest
+    if: github.repository_owner == 'vercel'
     steps:
       - uses: dessant/lock-threads@v3
         with:

.github/workflows/stale.yml

@@ -8,6 +8,7 @@ on:
 jobs:
   stale:
     runs-on: ubuntu-latest
+    if: github.repository_owner == 'vercel'
     steps:
       - uses: actions/stale@v4
         id: stale
@@ -21,4 +22,4 @@ jobs:
           days-before-pr-close: -1
           days-before-pr-stale: -1
           exempt-issue-labels: 'blocked,must,should,keep'
-          operation-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close

docs/advanced-features/automatic-static-optimization.md

@@ -20,6 +20,14 @@ If the above is not the case, Next.js will **statically optimize** your page aut
 
 During prerendering, the router's `query` object will be empty since we do not have `query` information to provide during this phase. After hydration, Next.js will trigger an update to your application to provide the route parameters in the `query` object.
 
+The cases where the query will be updated after hydration triggering another render are:
+
+- The page is a [dynamic-route](/docs/routing/dynamic-routes.md).
+- The page has query values in the URL.
+- [Rewrites](/docs/api-reference/next.config.js/rewrites.md) are configured in your `next.config.js` since these can have parameters that may need to be parsed and provided in the `query`.
+
+To be able to distinguish if the query is fully updated and ready for use, you can leverage the `isReady` field on [`next/router`](/docs/api-reference/next/router.md#router-object).
+
 > **Note:** Parameters added with [dynamic routes](/docs/routing/dynamic-routes.md) to a page that's using [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) will always be available inside the `query` object.
 
 `next build` will emit `.html` files for statically optimized pages. For example, the result for the page `pages/about.js` would be:

docs/advanced-features/compiler.md

@@ -7,9 +7,10 @@ description: Learn about the Next.js Compiler, written in Rust, which transforms
 <details open>
   <summary><b>Version History</b></summary>
 
-| Version   | Changes                                                         |
-| --------- | --------------------------------------------------------------- |
-| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12). |
+| Version   | Changes                                                                                                                            |
+| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `v12.1.0` | Added support for Styled Components, Jest, Relay, Remove React Properties, Legacy Decorators, Remove Console, and jsxImportSource. |
+| `v12.0.0` | Next.js Compiler [introduced](https://nextjs.org/blog/next-12).                                                                    |
 
 </details>
 
@@ -30,21 +31,7 @@ We chose to build on SWC for a few reasons:
 - **WebAssembly:** Rust's support for WASM is essential for supporting all possible platforms and taking Next.js development everywhere.
 - **Community:** The Rust community and ecosystem are amazing and still growing.
 
-## Experimental Features
-
-### Minification
-
-You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.
-
-```js
-// next.config.js
-
-module.exports = {
-  swcMinify: true,
-}
-```
-
-If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
+## Supported Features
 
 ### Styled Components
 
@@ -56,7 +43,7 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 // next.config.js
 
 module.exports = {
-  experimental: {
+  compiler: {
     // ssr and displayName are configured by default
     styledComponents: true,
   },
@@ -101,7 +88,7 @@ To enable [Relay](https://relay.dev/) support:
 ```js
 // next.config.js
 module.exports = {
-  experimental: {
+  compiler: {
     relay: {
       // This should match relay.config.js
       src: './',
@@ -123,7 +110,7 @@ To remove properties matching the default regex `^data-test`:
 ```js
 // next.config.js
 module.exports = {
-  experimental: {
+  compiler: {
     reactRemoveProperties: true,
   },
 }
@@ -134,30 +121,14 @@ To remove custom properties:
 ```js
 // next.config.js
 module.exports = {
-  experimental: {
+  compiler: {
     // The regexes defined here are processed in Rust so the syntax is different from
     // JavaScript `RegExp`s. See https://docs.rs/regex.
     reactRemoveProperties: { properties: ['^data-custom$'] },
   },
 }
 ```
 
-### Legacy Decorators
-
-Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with older versions of libraries like `mobx`.
-
-This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications.
-
-First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file:
-
-```js
-{
-  "compilerOptions": {
-    "experimentalDecorators": true
-  }
-}
-```
-
 ### Remove Console
 
 This transform allows for removing all `console.*` calls in application code (not `node_modules`). Similar to `babel-plugin-transform-remove-console`.
@@ -167,7 +138,7 @@ Remove all `console.*` calls:
 ```js
 // next.config.js
 module.exports = {
-  experimental: {
+  compiler: {
     removeConsole: true,
   },
 }
@@ -178,14 +149,30 @@ Remove `console.*` output except `console.error`:
 ```js
 // next.config.js
 module.exports = {
-  experimental: {
+  compiler: {
     removeConsole: {
       exclude: ['error'],
     },
   },
 }
 ```
 
+### Legacy Decorators
+
+Next.js will automatically detect `experimentalDecorators` in `jsconfig.json` or `tsconfig.json`. Legacy decorators are commonly used with older versions of libraries like `mobx`.
+
+This flag is only supported for compatibility with existing applications. We do not recommend using legacy decorators in new applications.
+
+First, update to the latest version of Next.js: `npm install next@latest`. Then, update your `jsconfig.json` or `tsconfig.json` file:
+
+```js
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}
+```
+
 ### importSource
 
 Next.js will automatically detect `jsxImportSource` in `jsconfig.json` or `tsconfig.json` and apply that. This is commonly used with libraries like Theme UI.
@@ -195,11 +182,27 @@ First, update to the latest version of Next.js: `npm install next@latest`. Then,
 ```js
 {
   "compilerOptions": {
-    "jsxImportSource": true
+    "jsxImportSource": 'preact'
   }
 }
 ```
 
+## Experimental Features
+
+### Minification
+
+You can opt-in to using the Next.js compiler for minification. This is 7x faster than Terser.
+
+```js
+// next.config.js
+
+module.exports = {
+  swcMinify: true,
+}
+```
+
+If you have feedback about `swcMinify`, please share it on the [feedback discussion](https://github.com/vercel/next.js/discussions/30237).
+
 ## Unsupported Features
 
 When your application has a `.babelrc` file, Next.js will automatically fall back to using Babel for transforming individual files. This ensures backwards compatibility with existing applications that leverage custom Babel plugins.

docs/advanced-features/preview-mode.md

@@ -186,6 +186,8 @@ export default function handler(req, res) {
 }
 ```
 
+> **Note:** If calling this route using `Link` component, you must pass in `prefetch={false}` to prevent calling `clearPreviewData` during prefetch.
+
 ### Specify the preview mode duration
 
 `setPreviewData` takes an optional second parameter which should be an options object. It accepts the following keys:

docs/api-reference/data-fetching/get-static-paths.md

@@ -110,7 +110,7 @@ export default Post
 If `fallback` is `true`, then the behavior of `getStaticProps` changes in the following ways:
 
 - The paths returned from `getStaticPaths` will be rendered to `HTML` at build time by `getStaticProps`.
-- The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will serve a [“fallback”](#fallback-pages) version of the page on the first request to such a path.
+- The paths that have not been generated at build time will **not** result in a 404 page. Instead, Next.js will serve a [“fallback”](#fallback-pages) version of the page on the first request to such a path. Web crawlers, such as Google, won't be served a fallback and instead the path will behave as in [`fallback: 'blocking'`](#fallback-blocking).
 - In the background, Next.js will statically generate the requested path `HTML` and `JSON`. This includes running `getStaticProps`.
 - When complete, the browser receives the `JSON` for the generated path. This will be used to automatically render the page with the required props. From the user’s perspective, the page will be swapped from the fallback page to the full page.
 - At the same time, Next.js adds this path to the list of pre-rendered pages. Subsequent requests to the same path will serve the generated page, like other pages pre-rendered at build time.

docs/api-reference/next.config.js/introduction.md

@@ -48,6 +48,20 @@ module.exports = (phase, { defaultConfig }) => {
 }
 ```
 
+Since Next.js 12.0.10, you can use an async function:
+
+```js
+module.exports = async (phase, { defaultConfig }) => {
+  /**
+   * @type {import('next').NextConfig}
+   */
+  const nextConfig = {
+    /* config options here */
+  }
+  return nextConfig
+}
+```
+
 `phase` is the current context in which the configuration is loaded. You can see the [available phases](https://github.com/vercel/next.js/blob/canary/packages/next/shared/lib/constants.ts#L1-L5). Phases can be imported from `next/constants`:
 
 ```js

docs/api-reference/next/router.md

@@ -50,7 +50,7 @@ The following is the definition of the `router` object returned by both [`useRou
 - `locales`: `String[]` - All supported locales (if enabled).
 - `defaultLocale`: `String` - The current default locale (if enabled).
 - `domainLocales`: `Array<{domain, defaultLocale, locales}>` - Any configured domain locales.
-- `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.
+- `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).
 
 The following methods are included inside `router`:

docs/api-routes/introduction.md

@@ -29,8 +29,8 @@ export default function handler(req, res) {
 
 For an API route to work, you need to export a function as default (a.k.a **request handler**), which then receives the following parameters:
 
-- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#http_class_http_incomingmessage), plus some [pre-built middlewares](/docs/api-routes/api-middlewares.md)
-- `res`: An instance of [http.ServerResponse](https://nodejs.org/api/http.html#http_class_http_serverresponse), plus some [helper functions](/docs/api-routes/response-helpers.md)
+- `req`: An instance of [http.IncomingMessage](https://nodejs.org/api/http.html#class-httpincomingmessage), plus some [pre-built middlewares](/docs/api-routes/api-middlewares.md)
+- `res`: An instance of [http.ServerResponse](https://nodejs.org/api/http.html#class-httpserverresponse), plus some [helper functions](/docs/api-routes/response-helpers.md)
 
 To handle different HTTP methods in an API route, you can use `req.method` in your request handler, like so:
 

docs/authentication.md

@@ -134,6 +134,7 @@ To see examples with other authentication providers, check out the [examples fol
   <summary><b>Examples</b></summary>
   <ul>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-firebase-authentication">with-firebase-authentication</a></li>
+    <li><a href="https://github.com/vercel/examples/tree/main/solutions/auth-with-ory">auth-with-ory</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-magic">with-magic</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/auth0">auth0</a></li>
     <li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-supabase-auth-realtime-db">with-supabase-auth-realtime-db</a></li>

errors/ignored-compiler-options.md

@@ -0,0 +1,9 @@
+# ignored-compiler-options
+
+#### Why This Error Occurred
+
+Options under the `compiler` key in `next.config.js` only apply to the new Rust based compiler and will be ignored if Babel is used instead. This message will appear if Next.js detects a Babel configuration file while `compiler` options are configured in `next.config.js`
+
+### Useful Links
+
+- [Next.js Compiler](https://nextjs.org/docs/advanced-features/compiler)