Add example with link to oficial example of "Material-ui with Typescript"

.github/workflows/build_test_deploy.yml

@@ -185,6 +185,8 @@ jobs:
  path: ./*
  key: ${{ github.sha }}-${{ github.run_number }}
 
+ - run: npm i -g pnpm@${PNPM_VERSION}
+
  - run: rm -rf .git && mv .git-bak .git
  if: ${{needs.build.outputs.docsChange != 'docs only change'}}
 
@@ -1241,23 +1243,23 @@ jobs:
  - host: ubuntu-latest
  target: aarch64-linux-android
  build: |
- export CARGO_TARGET_AARCH64_LINUX_ANDROID_LINKER="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang"
- export CC="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang"
- export CXX="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang++"
- export PATH="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin:${PATH}"
+ export CARGO_TARGET_AARCH64_LINUX_ANDROID_LINKER="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang"
+ export CC="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang"
+ export CXX="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang++"
+ export PATH="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin:${PATH}"
  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 --cache-dir=".turbo" -- --release --target aarch64-linux-android
- ${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android-strip packages/next-swc/native/next-swc.*.node
+ /usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android-strip packages/next-swc/native/next-swc.*.node
  - host: ubuntu-latest
  target: armv7-linux-androideabi
  build: |
- export CARGO_TARGET_ARMV7_LINUX_ANDROIDEABI_LINKER="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang"
- export CC="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang"
- export CXX="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang++"
- export PATH="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin:${PATH}"
+ export CARGO_TARGET_ARMV7_LINUX_ANDROIDEABI_LINKER="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang"
+ export CC="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang"
+ export CXX="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/armv7a-linux-androideabi24-clang++"
+ export PATH="/usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin:${PATH}"
  npm i -g "@napi-rs/cli@${NAPI_CLI_VERSION}" "turbo@${TURBO_VERSION}" "pnpm@${PNPM_VERSION}"
  turbo run build-native-no-plugin --cache-dir=".turbo" -- --release --target armv7-linux-androideabi
- ${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/arm-linux-androideabi-strip packages/next-swc/native/next-swc.*.node
+ /usr/local/lib/android/sdk/ndk/21.4.7075529/toolchains/llvm/prebuilt/linux-x86_64/bin/arm-linux-androideabi-strip packages/next-swc/native/next-swc.*.node
  - host: ubuntu-latest
  target: 'aarch64-unknown-linux-musl'
  docker: ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine

contributing.md

@@ -323,7 +323,7 @@ Issues are opened with one of these labels:
 
 - `template: story` - a feature request, converted to an [💡 Ideas discussion](https://github.com/vercel/next.js/discussions/categories/ideas)
 - `template: bug` - unverified issue with Next.js itself, or one of the examples in the [`examples`](https://github.com/vercel/next.js/tree/canary/examples) folder
-- `template: documentation` - feedback for improvement or unverfied issue with the Next.js documentation
+- `template: documentation` - feedback for improvement or an unverified issue with the Next.js documentation
 
 In case of a bug report, a maintainer looks at the provided reproduction. If the reproduction is missing or insufficient, a `please add a complete reproduction` label is added. If a reproduction is not provided for more than 30 days, the issue becomes stale and will be automatically closed. If a reproduction is provided within 30 days, the `please add a complete reproduction` label is removed and the issue will not become stale anymore.
 

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

@@ -276,6 +276,13 @@ module.exports = {
  locale: false,
  permanent: false,
  },
+ // it's possible to match all locales even when locale: false is set
+ {
+ source: '/:locale/page',
+ destination: '/en/newpage',
+ permanent: false,
+ locale: false,
+ }
  {
  // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
  // `/` or `/fr` routes like /:path* would

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

@@ -421,6 +421,12 @@ module.exports = {
  destination: '/en/another',
  locale: false,
  },
+ {
+ // it's possible to match all locales even when locale: false is set
+ source: '/:locale/api-alias/:path*',
+ destination: '/api/:path*',
+ locale: false,
+ },
  {
  // this gets converted to /(en|fr|de)/(.*) so will not match the top-level
  // `/` or `/fr` routes like /:path* would

docs/api-reference/next/image.md

@@ -485,7 +485,7 @@ The cache status of an image can be determined by reading the value of the `x-ne
 - `STALE` - the path is in the cache but exceeded the revalidate time so it will be updated in the background
 - `HIT` - the path is in the cache and has not exceeded the revalidate time
 
-The expiration (or rather Max Age) is defined by either the [`minimumCacheTTL`](#minimum-cache-ttl) configuration or the upstream server's `Cache-Control` header, whichever is larger. Specifically, the `max-age` value of the `Cache-Control` header is used. If both `s-maxage` and `max-age` are found, then `s-maxage` is preferred.
+The expiration (or rather Max Age) is defined by either the [`minimumCacheTTL`](#minimum-cache-ttl) configuration or the upstream image `Cache-Control` header, whichever is larger. Specifically, the `max-age` value of the `Cache-Control` header is used. If both `s-maxage` and `max-age` are found, then `s-maxage` is preferred. The `max-age` is also passed-through to any downstream clients including CDNs and browsers.
 
 - You can configure [`minimumCacheTTL`](#minimum-cache-ttl) to increase the cache duration when the upstream image does not include `Cache-Control` header or the value is very low.
 - You can configure [`deviceSizes`](#device-sizes) and [`imageSizes`](#device-sizes) to reduce the total number of possible generated images.
@@ -503,7 +503,11 @@ module.exports = {
 }
 ```
 
-If you need to add a `Cache-Control` header for the browser (not recommended), you can configure [`headers`](/docs/api-reference/next.config.js/headers) on the upstream image e.g. `/some-asset.jpg` not `/_next/image` itself.
+The expiration (or rather Max Age) of the optimized image is defined by either the `minimumCacheTTL` or the upstream image `Cache-Control` header, whichever is larger.
+
+If you need to change the caching behavior per image, you can configure [`headers`](/docs/api-reference/next.config.js/headers) to set the `Cache-Control` header on the upstream image (e.g. `/some-asset.jpg`, not `/_next/image` itself).
+
+There is no mechanism to invalidate the cache at this time, so its best to keep `minimumCacheTTL` low. Otherwise you may need to manually change the [`src`](#src) prop or delete `<distDir>/cache/images`.
 
 ### Disable Static Imports
 

docs/basic-features/eslint.md

@@ -80,28 +80,31 @@ This will take precedence over the configuration from `next.config.js`.
 
 Next.js provides an ESLint plugin, [`eslint-plugin-next`](https://www.npmjs.com/package/@next/eslint-plugin-next), already bundled within the base configuration that makes it possible to catch common issues and problems in a Next.js application. The full set of rules is as follows:
 
-| | Rule | Description |
-| :-: | ------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
-| ✔️ | [next/google-font-display](/docs/messages/google-font-display.md) | Enforce optional or swap font-display behavior with Google Fonts |
-| ✔️ | [next/google-font-preconnect](/docs/messages/google-font-preconnect.md) | Enforce preconnect usage with Google Fonts |
-| ✔️ | [next/link-passhref](/docs/messages/link-passhref.md) | Enforce passHref prop usage with custom Link components |
-| ✔️ | [next/no-css-tags](/docs/messages/no-css-tags.md) | Prevent manual stylesheet tags |
-| ✔️ | [next/no-document-import-in-page](/docs/messages/no-document-import-in-page.md) | Disallow importing next/document outside of pages/document.js |
-| ✔️ | [next/no-head-import-in-document](/docs/messages/no-head-import-in-document.md) | Disallow importing next/head in pages/document.js |
-| ✔️ | [next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages.md) | Prohibit HTML anchor links to pages without a Link component |
-| ✔️ | [next/no-img-element](/docs/messages/no-img-element.md) | Prohibit usage of HTML <img> element |
-| ✔️ | [next/no-head-element](/docs/messages/no-head-element.md) | Prohibit usage of HTML <head> element |
-| ✔️ | [next/no-page-custom-font](/docs/messages/no-page-custom-font.md) | Prevent page-only custom fonts |
-| ✔️ | [next/no-sync-scripts](/docs/messages/no-sync-scripts.md) | Forbid synchronous scripts |
-| ✔️ | [next/no-title-in-document-head](/docs/messages/no-title-in-document-head.md) | Disallow using <title> with Head from next/document |
-| ✔️ | [next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio.md) | Prevent duplicate polyfills from Polyfill.io |
-| ✔️ | [next/inline-script-id](/docs/messages/inline-script-id.md) | Enforce id attribute on next/script components with inline content |
-| ✔️ | next/no-typos | Ensure no typos were made declaring [Next.js's data fetching function](/docs/basic-features/data-fetching/overview.md) |
-| ✔️ | [next/next-script-for-ga](/docs/messages/next-script-for-ga.md) | Use the Script component to defer loading of the script until necessary. |
-| ✔️ | [next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document.md) | styled-jsx should not be used in \_document |
-
 - ✔: Enabled in the recommended configuration
 
+| | Rule | Description |
+| :-: | --------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| ✔️ | [@next/next/google-font-display](/docs/messages/google-font-display.md) | Enforce font-display behavior with Google Fonts. |
+| ✔️ | [@next/next/google-font-preconnect](/docs/messages/google-font-preconnect.md) | Ensure `preconnect` is used with Google Fonts. |
+| ✔️ | [@next/next/inline-script-id](/docs/messages/inline-script-id.md) | Enforce `id` attribute on `next/script` components with inline content. |
+| ✔️ | [@next/next/next-script-for-ga](/docs/messages/next-script-for-ga.md) | Prefer `next/script` component when using the inline script for Google Analytics. |
+| ✔️ | [@next/next/no-before-interactive-script-outside-document](/docs/messages/no-before-interactive-script-outside-document.md) | Prevent usage of `next/script`'s `beforeInteractive` strategy outside of `pages/_document.js`. |
+| ✔️ | [@next/next/no-css-tags](/docs/messages/no-css-tags.md) | Prevent manual stylesheet tags. |
+| ✔️ | [@next/next/no-document-import-in-page](/docs/messages/no-document-import-in-page.md) | Prevent importing `next/document` outside of `pages/_document.js`. |
+| ✔️ | [@next/next/no-duplicate-head](/docs/messages/no-duplicate-head.md) | Prevent duplicate usage of `<Head>` in `pages/_document.js`. |
+| ✔️ | [@next/next/no-head-element](/docs/messages/no-head-element.md) | Prevent usage of `<head>` element. |
+| ✔️ | [@next/next/no-head-import-in-document](/docs/messages/no-head-import-in-document.md) | Prevent usage of `next/head` in `pages/_document.js`. |
+| ✔️ | [@next/next/no-html-link-for-pages](/docs/messages/no-html-link-for-pages.md) | Prevent usage of `<a>` elements to navigate to internal Next.js pages. |
+| ✔️ | [@next/next/no-img-element](/docs/messages/no-img-element.md) | Prevent usage of `<img>` element to prevent layout shift. |
+| ✔️ | [@next/next/no-page-custom-font](/docs/messages/no-page-custom-font.md) | Prevent page-only custom fonts. |
+| ✔️ | [@next/next/no-script-component-in-head](/docs/messages/no-script-component-in-head.md) | Prevent usage of `next/script` in `next/head` component. |
+| ✔️ | [@next/next/no-server-import-in-page](/docs/messages/no-server-import-in-page.md) | Prevent usage of `next/server` outside of `middleware.js`. |
+| ✔️ | [@next/next/no-styled-jsx-in-document](/docs/messages/no-styled-jsx-in-document.md) | Prevent usage of `styled-jsx` in `pages/_document.js`. |
+| ✔️ | [@next/next/no-sync-scripts](/docs/messages/no-sync-scripts.md) | Prevent synchronous scripts. |
+| ✔️ | [@next/next/no-title-in-document-head](/docs/messages/no-title-in-document-head.md) | Prevent usage of `<title>` with `Head` component from `next/document`. |
+| ✔️ | @next/next/no-typos | Prevent common typos in [Next.js's data fetching functions](/docs/basic-features/data-fetching.md) |
+| ✔️ | [@next/next/no-unwanted-polyfillio](/docs/messages/no-unwanted-polyfillio.md) | Prevent duplicate polyfills from Polyfill.io. |
+
 If you already have ESLint configured in your application, we recommend extending from this plugin directly instead of including `eslint-config-next` unless a few conditions are met. Refer to the [Recommended Plugin Ruleset](/docs/basic-features/eslint.md#recommended-plugin-ruleset) to learn more.
 
 ### Custom Settings