Merge branch 'canary' of https://github.com/vercel/next.js into mknic…

…hel/code-owners-20230613

.github/workflows/build_and_deploy.yml

@@ -81,17 +81,17 @@ jobs:
             target: 'x86_64-apple-darwin'
             build: |
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi
-              turbo run build-native-release --summarize -- --target x86_64-apple-darwin --release
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target x86_64-apple-darwin --release
               strip -x packages/next-swc/native/next-swc.*.node
           - host: windows-latest
             build: |
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" "pnpm@${PNPM_VERSION}"
-              turbo run build-native-release --summarize -- --target x86_64-pc-windows-msvc
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target x86_64-pc-windows-msvc
             target: 'x86_64-pc-windows-msvc'
           - host: windows-latest
             build: |
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" "pnpm@${PNPM_VERSION}"
-              turbo run build-native-no-plugin --summarize -- --release --target i686-pc-windows-msvc
+              turbo run build-native-no-plugin --remote-cache-timeout 90 --summarize -- --release --target i686-pc-windows-msvc
             target: 'i686-pc-windows-msvc'
           - host: ubuntu-latest
             target: 'x86_64-unknown-linux-gnu'
@@ -103,7 +103,7 @@ jobs:
               rustup target add x86_64-unknown-linux-gnu &&
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi &&
               unset CC_x86_64_unknown_linux_gnu && unset CC &&
-              turbo run build-native-release --summarize -- --target x86_64-unknown-linux-gnu &&
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target x86_64-unknown-linux-gnu &&
               strip packages/next-swc/native/next-swc.*.node
           - host: ubuntu-latest
             target: 'x86_64-unknown-linux-musl'
@@ -115,7 +115,7 @@ jobs:
               rustup default "${RUST_TOOLCHAIN}" &&
               rustup target add x86_64-unknown-linux-musl &&
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi &&
-              turbo run build-native-release --summarize -- --target x86_64-unknown-linux-musl &&
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target x86_64-unknown-linux-musl &&
               strip packages/next-swc/native/next-swc.*.node
           - host: macos-latest
             target: 'aarch64-apple-darwin'
@@ -126,7 +126,7 @@ jobs:
               SYSROOT=$(xcrun --sdk macosx --show-sdk-path);
               export CFLAGS="-isysroot $SYSROOT -isystem $SYSROOT";
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi
-              turbo run build-native-release --summarize -- --target aarch64-apple-darwin
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target aarch64-apple-darwin
               strip -x packages/next-swc/native/next-swc.*.node
           - host: ubuntu-latest
             target: 'aarch64-unknown-linux-gnu'
@@ -139,7 +139,7 @@ jobs:
               rustup target add aarch64-unknown-linux-gnu &&
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" && if [ ! -f $(dirname $(which yarn))/pnpm ]; then ln -s $(which yarn) $(dirname $(which yarn))/pnpm;fi &&
               export CC_aarch64_unknown_linux_gnu=/usr/aarch64-unknown-linux-gnu/bin/aarch64-unknown-linux-gnu-gcc &&
-              turbo run build-native-release --summarize -- --target aarch64-unknown-linux-gnu &&
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target aarch64-unknown-linux-gnu &&
               llvm-strip -x packages/next-swc/native/next-swc.*.node
           - host: ubuntu-latest
             target: 'aarch64-unknown-linux-musl'
@@ -152,13 +152,13 @@ jobs:
               rustup toolchain install "${RUST_TOOLCHAIN}" &&
               rustup default "${RUST_TOOLCHAIN}" &&
               rustup target add aarch64-unknown-linux-musl &&
-              turbo run build-native-release --summarize -- --target aarch64-unknown-linux-musl &&
+              turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target aarch64-unknown-linux-musl &&
               llvm-strip -x packages/next-swc/native/next-swc.*.node
           - host: windows-latest
             target: 'aarch64-pc-windows-msvc'
             build: |
               npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" "pnpm@${PNPM_VERSION}"
-              turbo run build-native-no-plugin-woa-release --summarize -- --target aarch64-pc-windows-msvc
+              turbo run build-native-no-plugin-woa-release --remote-cache-timeout 90 --summarize -- --target aarch64-pc-windows-msvc
     needs: build
     name: stable - ${{ matrix.settings.target }} - node@16
     runs-on: ${{ matrix.settings.host }}
@@ -323,7 +323,7 @@ jobs:
         run: node scripts/normalize-version-bump.js
 
       - name: Build
-        run: turbo run build-wasm --summarize -- --target ${{ matrix.target }} --features tracing/release_max_level_info
+        run: turbo run build-wasm --remote-cache-timeout 90 --summarize -- --target ${{ matrix.target }} --features tracing/release_max_level_info
 
       - name: Add target to folder name
         run: '[[ -d "packages/next-swc/crates/wasm/pkg" ]] && mv packages/next-swc/crates/wasm/pkg packages/next-swc/crates/wasm/pkg-${{ matrix.target }} || ls packages/next-swc/crates/wasm'
@@ -472,6 +472,8 @@ jobs:
           name: next-swc-binaries
           path: packages/next-swc/native
 
+      - run: cp -r packages/next-swc/native .github/actions/next-stats-action/native
+
       - run: ./scripts/release-stats.sh
       - uses: ./.github/actions/next-stats-action
         env:

.github/workflows/build_and_test.yml

@@ -94,6 +94,7 @@ jobs:
     uses: ./.github/workflows/build_reusable.yml
     with:
       skipForDocsOnly: 'yes'
+      skipForRelease: 'yes'
       needsRust: 'yes'
       skipNativeBuild: 'yes'
       afterBuild: xvfb-run turbo run test-cargo-bench

.github/workflows/build_reusable.yml

@@ -19,6 +19,10 @@ on:
         required: false
         description: 'skip for docs only changes'
         type: string
+      skipForRelease:
+        required: false
+        description: 'skip for release'
+        type: string
       nodeVersion:
         required: false
         description: 'version of Node.js to use'
@@ -103,11 +107,20 @@ jobs:
         name: check docs only change
         id: docs-change
 
+      - id: is-release
+        run: |
+          if [[ $(node ./scripts/check-is-release.js 2> /dev/null || :) = v* ]];
+            then
+              echo "IS_RELEASE=yes" >> $GITHUB_OUTPUT
+            else
+              echo "IS_RELEASE=nope" >> $GITHUB_OUTPUT
+          fi
+
       # normalize versions before build-native for better cache hits
       - run: node scripts/normalize-version-bump.js
         name: normalize versions
 
-      - run: turbo run build-native-release --summarize -- --target x86_64-unknown-linux-gnu
+      - run: turbo run build-native-release --remote-cache-timeout 90 --summarize -- --target x86_64-unknown-linux-gnu
         if: ${{ inputs.skipNativeBuild != 'yes' }}
 
       - name: Upload next-swc artifact
@@ -138,7 +151,7 @@ jobs:
       - run: turbo run get-test-timings -- --build ${{ github.sha }}
 
       - run: /bin/bash -c "${{ inputs.afterBuild }}"
-        if: ${{inputs.skipForDocsOnly != 'yes' || steps.docs-change.outputs.DOCS_CHANGE == 'nope'}}
+        if: ${{(inputs.skipForDocsOnly != 'yes' || steps.docs-change.outputs.DOCS_CHANGE == 'nope') && (inputs.skipForRelease != 'yes' || steps.is-release.outputs.IS_RELEASE == 'nope')}}
 
       - name: Upload artifact
         uses: actions/upload-artifact@v3

.github/workflows/trigger_release.yml

@@ -50,7 +50,7 @@ jobs:
 
       - run: git clone https://github.com/vercel/next.js.git --depth=25 .
 
-      - run: git describe || 'echo failed to get tag'
+      - run: git describe || echo 'failed to get tag'
 
       # https://github.com/actions/virtual-environments/issues/1187
       - name: tune linux network

.vercel.approvers

@@ -4,6 +4,7 @@
 @shuding
 @huozhi
 @feedthejim
+@leerob:optional
 @vercel/next-js:optional
 
 # Tooling & Telemetry

docs/02-app/01-building-your-application/01-routing/08-parallel-routes.mdx

@@ -25,7 +25,7 @@ Parallel Routing allows you to define independent error and loading states for e
   height="1218"
 />
 
-Parallel Routing also allow you to conditionally render a slot based on certain conditions, such as authentication state. This enables fully separated code on the same URL.
+Parallel Routing also allows you to conditionally render a slot based on certain conditions, such as authentication state. This enables fully separated code on the same URL.
 
 <Image
   alt="Conditional routes diagram"

docs/02-app/01-building-your-application/01-routing/11-middleware.mdx

@@ -140,8 +140,8 @@ import type { NextRequest } from 'next/server'
 export function middleware(request: NextRequest) {
   // Assume a "Cookie:nextjs=fast" header to be present on the incoming request
   // Getting cookies from the request using the `RequestCookies` API
-  let cookie = request.cookies.get('nextjs')?.value
-  console.log(cookie) // => 'fast'
+  let cookie = request.cookies.get('nextjs')
+  console.log(cookie) // => { name: 'nextjs', value: 'fast', Path: '/' }
   const allCookies = request.cookies.getAll()
   console.log(allCookies) // => [{ name: 'nextjs', value: 'fast' }]
 

docs/02-app/01-building-your-application/03-data-fetching/04-server-actions.mdx

@@ -480,7 +480,7 @@ export const action = withValidate((data) => {
 
 ```js filename="lib/form-validation.js"
 export function withValidate(action) {
-  return (formData: FormData) => {
+  return async (formData: FormData) => {
     'use server'
 
     const isValidData = verifyData(formData)

docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx

@@ -183,7 +183,22 @@ Due to the global nature of stylesheets, and to avoid conflicts, you may **only
 
 In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
 
-In production, all CSS files will be automatically concatenated into a single minified `.css` file.
+In production, all CSS files will be automatically concatenated into a single minified `.css` file. The order that the CSS is concatenated will match the order the CSS is imported into the `_app.js` file. Pay special attention to imported JS modules that include their own CSS; the JS module's CSS will be concatenated following the same ordering rules as imported CSS files. For example:
+
+```jsx
+import '../styles.css'
+// The CSS in ErrorBoundary depends on the global CSS in styles.css,
+// so we import it after styles.css.
+import ErrorBoundary from '../components/ErrorBoundary'
+
+export default function MyApp({ Component, pageProps }) {
+  return (
+    <ErrorBoundary>
+      <Component {...pageProps} />
+    </ErrorBoundary>
+  )
+}
+```
 
 </PagesOnly>
 

docs/02-app/01-building-your-application/05-optimizing/02-fonts.mdx

@@ -233,7 +233,7 @@ const inter = Inter({ subsets: ['latin'] })
 
 </PagesOnly>
 
-View the [Font API Reference](#google-fonts) for more information.
+View the [Font API Reference](/docs/app/api-reference/components/font) for more information.
 
 ### Using Multiple Fonts
 

docs/02-app/01-building-your-application/05-optimizing/03-scripts.mdx

@@ -45,7 +45,7 @@ export default function DashboardLayout({ children }) {
 }
 ```
 
-The third-party script is fetched when the the folder route (e.g. `dashboard/page.js`) or any nested route (e.g. `dashboard/settings/page.js`) is accessed by the user. Next.js will ensure the script will **only load once**, even if a user navigates between multiple routes in the same layout.
+The third-party script is fetched when the folder route (e.g. `dashboard/page.js`) or any nested route (e.g. `dashboard/settings/page.js`) is accessed by the user. Next.js will ensure the script will **only load once**, even if a user navigates between multiple routes in the same layout.
 
 </AppOnly>
 

docs/02-app/01-building-your-application/06-configuring/03-environment-variables.mdx

@@ -13,7 +13,7 @@ description: Learn to add and access environment variables in your Next.js appli
 Next.js comes with built-in support for environment variables, which allows you to do the following:
 
 - [Use `.env.local` to load environment variables](#loading-environment-variables)
-- [Expose environment variables to the browser by prefixing with `NEXT_PUBLIC_`](#exposing-environment-variables-to-the-browser)
+- [Bundle environment variables for the browser by prefixing with `NEXT_PUBLIC_`](#bundling-environment-variables-for-the-browser)
 
 ## Loading Environment Variables
 
@@ -55,25 +55,27 @@ This loads `process.env.DB_HOST`, `process.env.DB_USER`, and `process.env.DB_PAS
 Next.js will automatically expand variables that use `$` to reference other variables e.g. `$VARIABLE` inside of your `.env*` files. This allows you to reference other secrets. For example:
 
 ```txt filename=".env"
-TWITTER_USER=vercel
+TWITTER_USER=nextjs
 TWITTER_URL=https://twitter.com/$TWITTER_USER
 ```
 
-In the above example, `process.env.TWITTER_URL` would be set to `http://twitter.com/vercel`.
+In the above example, `process.env.TWITTER_URL` would be set to `https://twitter.com/nextjs`.
 
 > **Good to know**: If you need to use variable with a `$` in the actual value, it needs to be escaped e.g. `\$`.
 
-## Exposing Environment Variables to the Browser
+## Bundling Environment Variables for the Browser
 
-By default environment variables are only available in the Node.js environment, meaning they won't be exposed to the browser.
+Non-`NEXT_PUBLIC_` environment variables are only available in the Node.js environment, meaning they aren't accessible to the browser (the client runs in a different _environment_).
 
-In order to expose a variable to the browser you have to prefix the variable with `NEXT_PUBLIC_`. For example:
+In order to make the value of an environment variable accessible in the browser, Next.js can "inline" a value, at build time, into the js bundle that is delivered to the client, replacing all references to `process.env.[variable]` with a hard-coded value. To tell it to do this, you just have to prefix the variable with `NEXT_PUBLIC_`. For example:
 
 ```txt filename="Terminal"
 NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
 ```
 
-This loads `process.env.NEXT_PUBLIC_ANALYTICS_ID` into the Node.js environment automatically, allowing you to use it anywhere in your code. The value will be inlined into JavaScript sent to the browser because of the `NEXT_PUBLIC_` prefix. This inlining occurs at build time, so your various `NEXT_PUBLIC_` envs need to be set when the project is built.
+This will tell Next.js to replace all references to `process.env.NEXT_PUBLIC_ANALYTICS_ID` in the Node.js environment with the value from the environment in which you run `next build`, allowing you to use it anywhere in your code. It will be inlined into any JavaScript sent to the browser.
+
+> **Note**: After being built, your app will no longer respond to changes to these environment variables. For instance, if you use a Heroku pipeline to promote slugs built in one environment to another environment, or if you build and deploy a single Docker image to multiple environments, all `NEXT_PUBLIC_` variables will be frozen with the value evaluated at build time, so these values need to be set appropriately when the project is built. If you need access to runtime environment values, you'll have to setup your own API to provide them to the client (either on demand or during initialization).
 
 ```js filename="pages/index.js"
 import setupAnalyticsService from '../lib/my-analytics-service'

docs/02-app/01-building-your-application/06-configuring/04-absolute-imports-and-module-aliases.mdx

@@ -130,3 +130,34 @@ export default function HomePage() {
   )
 }
 ```
+
+Each of the `"paths"` are relative to the `baseUrl` location. For example:
+
+```json
+// tsconfig.json or jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": "src/",
+    "paths": {
+      "@/styles/*": ["styles/*"],
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
+
+```jsx
+// pages/index.js
+import Button from '@/components/button'
+import '@/styles/styles.css'
+import Helper from 'utils/helper'
+
+export default function HomePage() {
+  return (
+    <Helper>
+      <h1>Hello World</h1>
+      <Button />
+    </Helper>
+  )
+}
+```

docs/02-app/01-building-your-application/08-upgrading/01-codemods.mdx

@@ -31,7 +31,7 @@ Replacing `<transform>` and `<path>` with appropriate values.
 ##### `built-in-next-font`
 
 ```bash filename="Terminal"
-npx @next/codemod@latest built-in-next-font
+npx @next/codemod@latest built-in-next-font .
 ```
 
 This codemod uninstalls the `@next/font` package and transforms `@next/font` imports into the built-in `next/font`.
@@ -55,7 +55,7 @@ import { Inter } from 'next/font/google'
 ##### `next-image-to-legacy-image`
 
 ```bash filename="Terminal"
-npx @next/codemod@latest next-image-to-legacy-image ./pages
+npx @next/codemod@latest next-image-to-legacy-image .
 ```
 
 Safely renames `next/image` imports in existing Next.js 10, 11, or 12 applications to `next/legacy/image` in Next.js 13. Also renames `next/future/image` to `next/image`.
@@ -99,7 +99,7 @@ export default function Home() {
 ##### `next-image-experimental`
 
 ```bash filename="Terminal"
-npx @next/codemod@latest next-image-experimental ./pages
+npx @next/codemod@latest next-image-experimental .
 ```
 
 Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props.
@@ -115,7 +115,7 @@ Dangerously migrates from `next/legacy/image` to the new `next/image` by adding
 ##### `new-link`
 
 ```bash filename="Terminal"
-npx @next/codemod@latest new-link ./pages
+npx @next/codemod@latest new-link .
 ```
 
 Remove `<a>` tags inside [Link Components](/docs/app/api-reference/components/link), or add a `legacyBehavior` prop to Links that cannot be auto-fixed.

docs/02-app/02-api-reference/05-next-config-js/images.mdx

@@ -78,7 +78,7 @@ export default function contentfulLoader({ src, quality, width }) {
 }
 ```
 
-## Fastly
+### Fastly
 
 ```js
 // Docs: https://developer.fastly.com/reference/io/
@@ -91,7 +91,7 @@ export default function fastlyLoader({ src, width, quality }) {
 }
 ```
 
-## Gumlet
+### Gumlet
 
 ```js
 // Docs: https://docs.gumlet.com/reference/image-transform-size

docs/03-pages/01-building-your-application/01-routing/08-internationalization.mdx

@@ -13,7 +13,7 @@ description: Next.js has built-in support for internationalized routing and lang
 
 Next.js has built-in support for internationalized ([i18n](https://en.wikipedia.org/wiki/Internationalization_and_localization#Naming)) routing since `v10.0.0`. You can provide a list of locales, the default locale, and domain-specific locales and Next.js will automatically handle the routing.
 
-The i18n routing support is currently meant to complement existing i18n library solutions like [`react-intl`](https://formatjs.io/docs/getting-started/installation), [`react-i18next`](https://react.i18next.com/), [`lingui`](https://lingui.dev/), [`rosetta`](https://github.com/lukeed/rosetta), [`next-intl`](https://github.com/amannn/next-intl), [`next-translate`](https://github.com/aralroca/next-translate), [`next-multilingual`](https://github.com/Avansai/next-multilingual), [`typesafe-i18n`](https://github.com/ivanhofer/typesafe-i18n), and others by streamlining the routes and locale parsing.
+The i18n routing support is currently meant to complement existing i18n library solutions like [`react-intl`](https://formatjs.io/docs/getting-started/installation), [`react-i18next`](https://react.i18next.com/), [`lingui`](https://lingui.dev/), [`rosetta`](https://github.com/lukeed/rosetta), [`next-intl`](https://github.com/amannn/next-intl), [`next-translate`](https://github.com/aralroca/next-translate), [`next-multilingual`](https://github.com/Avansai/next-multilingual), [`typesafe-i18n`](https://github.com/ivanhofer/typesafe-i18n), [`tolgee`](https://tolgee.io/integrations/next), and others by streamlining the routes and locale parsing.
 
 ## Getting started
 

docs/05-community/01-contribution-guide.mdx

@@ -326,7 +326,7 @@ Related Links guide the user's learning journey by adding links to logical next
 
 Create related links using the `related` field in the page's metadata.
 
-```yaml filename="related.mdx"
+```yaml filename="example.mdx"
 ---
 related:
   description: Learn how to quickly get started with your first application.