[material-nextjs] Support Next.js 16 (#47134)

Author: siriwatknp

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';
+  ...
+  <Button component={Link} href="/about" variant="contained">
+    Go to About Page
+  </Button>
+```
+
 ## 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).

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": {

packages/mui-material-nextjs/src/v16-appRouter/index.ts

@@ -0,0 +1 @@
+export * from '../v13-appRouter';

packages/mui-material-nextjs/src/v16-pagesRouter/index.ts

@@ -0,0 +1 @@
+export * from '../v13-pagesRouter';