diff --git a/docs/data/material/integrations/nextjs/nextjs.md b/docs/data/material/integrations/nextjs/nextjs.md index f478b78c99d2cf..083d12df5120ca 100644 --- a/docs/data/material/integrations/nextjs/nextjs.md +++ b/docs/data/material/integrations/nextjs/nextjs.md @@ -143,6 +143,28 @@ This option ensures that the styles generated by Material UI will be wrapped in To learn more about it, see [the MDN CSS layer documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer). +### Next.js v16 Client Component restriction + +If you encounter `Functions cannot be passed directly to Client Components` error from passing Next.js Link to Material UI `component` prop, you need to create a wrapper component with `use client` directive like the following: + +```tsx title="src/components/Link.tsx" +'use client'; +import Link, { LinkProps } from 'next/link'; + +export default Link; +``` + +Then, replace the Next.js Link with the wrapper component: + +```diff title="src/app/page.tsx" +- import Link from 'next/link'; ++ import Link from '../components/Link'; + ... + +``` + ## Pages Router This section walks through the Material UI integration with the Next.js [Pages Router](https://nextjs.org/docs/pages/building-your-application), for both [Server-side Rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) (SSR) and [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) (SSG). diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json index 4bcc83e7007403..4184a108769f89 100644 --- a/packages/mui-material-nextjs/package.json +++ b/packages/mui-material-nextjs/package.json @@ -45,7 +45,7 @@ "@emotion/react": "^11.11.4", "@emotion/server": "^11.11.0", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "next": "^13.0.0 || ^14.0.0 || ^15.0.0", + "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { diff --git a/packages/mui-material-nextjs/src/v16-appRouter/index.ts b/packages/mui-material-nextjs/src/v16-appRouter/index.ts new file mode 100644 index 00000000000000..fc4bb1deaba8f4 --- /dev/null +++ b/packages/mui-material-nextjs/src/v16-appRouter/index.ts @@ -0,0 +1 @@ +export * from '../v13-appRouter'; diff --git a/packages/mui-material-nextjs/src/v16-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v16-pagesRouter/index.ts new file mode 100644 index 00000000000000..695035caa34c5c --- /dev/null +++ b/packages/mui-material-nextjs/src/v16-pagesRouter/index.ts @@ -0,0 +1 @@ +export * from '../v13-pagesRouter'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3584dbd886c5d9..31e8ff12a90e7f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -309,7 +309,7 @@ importers: version: link:../../packages/mui-utils/build next: specifier: latest - version: 16.0.0(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + version: 16.0.1(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: specifier: ^19.2.0 version: 19.2.0 @@ -319,7 +319,7 @@ importers: devDependencies: '@pigment-css/nextjs-plugin': specifier: 0.0.30 - version: 0.0.30(@types/react@19.2.2)(next@16.0.0(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) + version: 0.0.30(@types/react@19.2.2)(next@16.0.1(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) '@types/node': specifier: ^20.19.23 version: 20.19.23 @@ -2124,6 +2124,7 @@ packages: '@aws-sdk/credential-provider-web-identity@3.917.0': resolution: {integrity: sha512-pZncQhFbwW04pB0jcD5OFv3x2gAddDYCVxyJVixgyhSw7bKCYxqu6ramfq1NxyVpmm+qsw+ijwi/3cCmhUHF/A==} engines: {node: '>=18.0.0'} + deprecated: This version contains a compilation TypeScript error https://github.com/aws/aws-sdk-js-v3/issues/7457 - please use @aws-sdk/credential-providers@3.918.0 or higher '@aws-sdk/credential-providers@3.916.0': resolution: {integrity: sha512-wazu2awF69ohF3AaDlYkD+tanaqwJ309o9GawNg3o1oW7orhdcvh6P8BftSjuIzuAMiauvQquxcUrNTLxHtvOA==} @@ -4272,8 +4273,8 @@ packages: '@next/env@15.5.6': resolution: {integrity: sha512-3qBGRW+sCGzgbpc5TS1a0p7eNxnOarGVQhZxfvTdnV0gFI61lX7QNtQ4V1TSREctXzYn5NetbUsLvyqwLFJM6Q==} - '@next/env@16.0.0': - resolution: {integrity: sha512-s5j2iFGp38QsG1LWRQaE2iUY3h1jc014/melHFfLdrsMJPqxqDQwWNwyQTcNoUSGZlCVZuM7t7JDMmSyRilsnA==} + '@next/env@16.0.1': + resolution: {integrity: sha512-LFvlK0TG2L3fEOX77OC35KowL8D7DlFF45C0OvKMC4hy8c/md1RC4UMNDlUGJqfCoCS2VWrZ4dSE6OjaX5+8mw==} '@next/eslint-plugin-next@15.5.6': resolution: {integrity: sha512-YxDvsT2fwy1j5gMqk3ppXlsgDopHnkM4BoxSVASbvvgh5zgsK8lvWerDzPip8k3WVzsTZ1O7A7si1KNfN4OZfQ==} @@ -4284,8 +4285,8 @@ packages: cpu: [arm64] os: [darwin] - '@next/swc-darwin-arm64@16.0.0': - resolution: {integrity: sha512-/CntqDCnk5w2qIwMiF0a9r6+9qunZzFmU0cBX4T82LOflE72zzH6gnOjCwUXYKOBlQi8OpP/rMj8cBIr18x4TA==} + '@next/swc-darwin-arm64@16.0.1': + resolution: {integrity: sha512-R0YxRp6/4W7yG1nKbfu41bp3d96a0EalonQXiMe+1H9GTHfKxGNCGFNWUho18avRBPsO8T3RmdWuzmfurlQPbg==} engines: {node: '>= 10'} cpu: [arm64] os: [darwin] @@ -4296,8 +4297,8 @@ packages: cpu: [x64] os: [darwin] - '@next/swc-darwin-x64@16.0.0': - resolution: {integrity: sha512-hB4GZnJGKa8m4efvTGNyii6qs76vTNl+3dKHTCAUaksN6KjYy4iEO3Q5ira405NW2PKb3EcqWiRaL9DrYJfMHg==} + '@next/swc-darwin-x64@16.0.1': + resolution: {integrity: sha512-kETZBocRux3xITiZtOtVoVvXyQLB7VBxN7L6EPqgI5paZiUlnsgYv4q8diTNYeHmF9EiehydOBo20lTttCbHAg==} engines: {node: '>= 10'} cpu: [x64] os: [darwin] @@ -4308,8 +4309,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-gnu@16.0.0': - resolution: {integrity: sha512-E2IHMdE+C1k+nUgndM13/BY/iJY9KGCphCftMh7SXWcaQqExq/pJU/1Hgn8n/tFwSoLoYC/yUghOv97tAsIxqg==} + '@next/swc-linux-arm64-gnu@16.0.1': + resolution: {integrity: sha512-hWg3BtsxQuSKhfe0LunJoqxjO4NEpBmKkE+P2Sroos7yB//OOX3jD5ISP2wv8QdUwtRehMdwYz6VB50mY6hqAg==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4320,8 +4321,8 @@ packages: cpu: [arm64] os: [linux] - '@next/swc-linux-arm64-musl@16.0.0': - resolution: {integrity: sha512-xzgl7c7BVk4+7PDWldU+On2nlwnGgFqJ1siWp3/8S0KBBLCjonB6zwJYPtl4MUY7YZJrzzumdUpUoquu5zk8vg==} + '@next/swc-linux-arm64-musl@16.0.1': + resolution: {integrity: sha512-UPnOvYg+fjAhP3b1iQStcYPWeBFRLrugEyK/lDKGk7kLNua8t5/DvDbAEFotfV1YfcOY6bru76qN9qnjLoyHCQ==} engines: {node: '>= 10'} cpu: [arm64] os: [linux] @@ -4332,8 +4333,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-gnu@16.0.0': - resolution: {integrity: sha512-sdyOg4cbiCw7YUr0F/7ya42oiVBXLD21EYkSwN+PhE4csJH4MSXUsYyslliiiBwkM+KsuQH/y9wuxVz6s7Nstg==} + '@next/swc-linux-x64-gnu@16.0.1': + resolution: {integrity: sha512-Et81SdWkcRqAJziIgFtsFyJizHoWne4fzJkvjd6V4wEkWTB4MX6J0uByUb0peiJQ4WeAt6GGmMszE5KrXK6WKg==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4344,8 +4345,8 @@ packages: cpu: [x64] os: [linux] - '@next/swc-linux-x64-musl@16.0.0': - resolution: {integrity: sha512-IAXv3OBYqVaNOgyd3kxR4L3msuhmSy1bcchPHxDOjypG33i2yDWvGBwFD94OuuTjjTt/7cuIKtAmoOOml6kfbg==} + '@next/swc-linux-x64-musl@16.0.1': + resolution: {integrity: sha512-qBbgYEBRrC1egcG03FZaVfVxrJm8wBl7vr8UFKplnxNRprctdP26xEv9nJ07Ggq4y1adwa0nz2mz83CELY7N6Q==} engines: {node: '>= 10'} cpu: [x64] os: [linux] @@ -4356,8 +4357,8 @@ packages: cpu: [arm64] os: [win32] - '@next/swc-win32-arm64-msvc@16.0.0': - resolution: {integrity: sha512-bmo3ncIJKUS9PWK1JD9pEVv0yuvp1KPuOsyJTHXTv8KDrEmgV/K+U0C75rl9rhIaODcS7JEb6/7eJhdwXI0XmA==} + '@next/swc-win32-arm64-msvc@16.0.1': + resolution: {integrity: sha512-cPuBjYP6I699/RdbHJonb3BiRNEDm5CKEBuJ6SD8k3oLam2fDRMKAvmrli4QMDgT2ixyRJ0+DTkiODbIQhRkeQ==} engines: {node: '>= 10'} cpu: [arm64] os: [win32] @@ -4368,8 +4369,8 @@ packages: cpu: [x64] os: [win32] - '@next/swc-win32-x64-msvc@16.0.0': - resolution: {integrity: sha512-O1cJbT+lZp+cTjYyZGiDwsOjO3UHHzSqobkPNipdlnnuPb1swfcuY6r3p8dsKU4hAIEO4cO67ZCfVVH/M1ETXA==} + '@next/swc-win32-x64-msvc@16.0.1': + resolution: {integrity: sha512-XeEUJsE4JYtfrXe/LaJn3z1pD19fK0Q6Er8Qoufi+HqvdO4LEPyCxLUt4rxA+4RfYo6S9gMlmzCMU2F+AatFqQ==} engines: {node: '>= 10'} cpu: [x64] os: [win32] @@ -9692,8 +9693,8 @@ packages: sass: optional: true - next@16.0.0: - resolution: {integrity: sha512-nYohiNdxGu4OmBzggxy9rczmjIGI+TpR5vbKTsE1HqYwNm1B+YSiugSrFguX6omMOKnDHAmBPY4+8TNJk0Idyg==} + next@16.0.1: + resolution: {integrity: sha512-e9RLSssZwd35p7/vOa+hoDFggUZIUbZhIUSLZuETCwrCVvxOs87NamoUzT+vbcNAL8Ld9GobBnWOA6SbV/arOw==} engines: {node: '>=20.9.0'} hasBin: true peerDependencies: @@ -15474,7 +15475,7 @@ snapshots: '@next/env@15.5.6': {} - '@next/env@16.0.0': {} + '@next/env@16.0.1': {} '@next/eslint-plugin-next@15.5.6': dependencies: @@ -15483,49 +15484,49 @@ snapshots: '@next/swc-darwin-arm64@15.5.6': optional: true - '@next/swc-darwin-arm64@16.0.0': + '@next/swc-darwin-arm64@16.0.1': optional: true '@next/swc-darwin-x64@15.5.6': optional: true - '@next/swc-darwin-x64@16.0.0': + '@next/swc-darwin-x64@16.0.1': optional: true '@next/swc-linux-arm64-gnu@15.5.6': optional: true - '@next/swc-linux-arm64-gnu@16.0.0': + '@next/swc-linux-arm64-gnu@16.0.1': optional: true '@next/swc-linux-arm64-musl@15.5.6': optional: true - '@next/swc-linux-arm64-musl@16.0.0': + '@next/swc-linux-arm64-musl@16.0.1': optional: true '@next/swc-linux-x64-gnu@15.5.6': optional: true - '@next/swc-linux-x64-gnu@16.0.0': + '@next/swc-linux-x64-gnu@16.0.1': optional: true '@next/swc-linux-x64-musl@15.5.6': optional: true - '@next/swc-linux-x64-musl@16.0.0': + '@next/swc-linux-x64-musl@16.0.1': optional: true '@next/swc-win32-arm64-msvc@15.5.6': optional: true - '@next/swc-win32-arm64-msvc@16.0.0': + '@next/swc-win32-arm64-msvc@16.0.1': optional: true '@next/swc-win32-x64-msvc@15.5.6': optional: true - '@next/swc-win32-x64-msvc@16.0.0': + '@next/swc-win32-x64-msvc@16.0.1': optional: true '@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3': @@ -15884,10 +15885,10 @@ snapshots: '@opentelemetry/api@1.8.0': optional: true - '@pigment-css/nextjs-plugin@0.0.30(@types/react@19.2.2)(next@16.0.0(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3)': + '@pigment-css/nextjs-plugin@0.0.30(@types/react@19.2.2)(next@16.0.1(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3)': dependencies: '@pigment-css/unplugin': 0.0.30(@types/react@19.2.2)(react@19.2.0)(typescript@5.9.3)(webpack-sources@3.3.3) - next: 16.0.0(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + next: 16.0.1(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0) transitivePeerDependencies: - '@types/react' - react @@ -21856,9 +21857,9 @@ snapshots: - '@babel/core' - babel-plugin-macros - next@16.0.0(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + next@16.0.1(@babel/core@7.28.4)(@opentelemetry/api@1.8.0)(@playwright/test@1.56.1)(babel-plugin-macros@3.1.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0): dependencies: - '@next/env': 16.0.0 + '@next/env': 16.0.1 '@swc/helpers': 0.5.15 caniuse-lite: 1.0.30001727 postcss: 8.4.31 @@ -21866,14 +21867,14 @@ snapshots: react-dom: 19.2.0(react@19.2.0) styled-jsx: 5.1.6(@babel/core@7.28.4)(babel-plugin-macros@3.1.0)(react@19.2.0) optionalDependencies: - '@next/swc-darwin-arm64': 16.0.0 - '@next/swc-darwin-x64': 16.0.0 - '@next/swc-linux-arm64-gnu': 16.0.0 - '@next/swc-linux-arm64-musl': 16.0.0 - '@next/swc-linux-x64-gnu': 16.0.0 - '@next/swc-linux-x64-musl': 16.0.0 - '@next/swc-win32-arm64-msvc': 16.0.0 - '@next/swc-win32-x64-msvc': 16.0.0 + '@next/swc-darwin-arm64': 16.0.1 + '@next/swc-darwin-x64': 16.0.1 + '@next/swc-linux-arm64-gnu': 16.0.1 + '@next/swc-linux-arm64-musl': 16.0.1 + '@next/swc-linux-x64-gnu': 16.0.1 + '@next/swc-linux-x64-musl': 16.0.1 + '@next/swc-win32-arm64-msvc': 16.0.1 + '@next/swc-win32-x64-msvc': 16.0.1 '@opentelemetry/api': 1.8.0 '@playwright/test': 1.56.1 sharp: 0.34.4