[examples] Update Next.js versions to v16 in Next.js examples (DX-57) (#47453)

alelthomas · ZeeshanTamboli · web-flow · commit a29e23c3fa0c · 2025-12-12T09:46:54.000-07:00
Co-authored-by: ZeeshanTamboli &lt;zeeshan.tamboli@gmail.com&gt;
diff --git a/examples/material-ui-nextjs-pages-router-ts/package.json b/examples/material-ui-nextjs-pages-router-ts/package.json
@@ -17,9 +17,9 @@
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
     "clsx": "latest",
-    "next": "^15.0.5",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^16.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "latest",
diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/_app.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Head from 'next/head';
 import { AppProps } from 'next/app';
-import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { AppCacheProvider } from '@mui/material-nextjs/v16-pagesRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../src/theme';
diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx
@@ -4,7 +4,7 @@ import {
   DocumentHeadTags,
   DocumentHeadTagsProps,
   documentGetInitialProps,
-} from '@mui/material-nextjs/v15-pagesRouter';
+} from '@mui/material-nextjs/v16-pagesRouter';
 import theme, { roboto } from '../src/theme';
 
 export default function MyDocument(props: DocumentProps & DocumentHeadTagsProps) {
diff --git a/examples/material-ui-nextjs-pages-router-ts/tsconfig.json b/examples/material-ui-nextjs-pages-router-ts/tsconfig.json
@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "jsxImportSource": "@emotion/react",
     "incremental": true
   },
diff --git a/examples/material-ui-nextjs-pages-router/package.json b/examples/material-ui-nextjs-pages-router/package.json
@@ -17,9 +17,9 @@
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
     "clsx": "latest",
-    "next": "^15.0.5",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^16.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "eslint": "latest",
diff --git a/examples/material-ui-nextjs-pages-router/pages/_app.js b/examples/material-ui-nextjs-pages-router/pages/_app.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Head from 'next/head';
-import { AppCacheProvider } from '@mui/material-nextjs/v15-pagesRouter';
+import { AppCacheProvider } from '@mui/material-nextjs/v16-pagesRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '../src/theme';
diff --git a/examples/material-ui-nextjs-pages-router/pages/_document.js b/examples/material-ui-nextjs-pages-router/pages/_document.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Html, Head, Main, NextScript } from 'next/document';
-import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v15-pagesRouter';
+import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v16-pagesRouter';
 import theme from '../src/theme';
 
 export default function MyDocument(props) {
diff --git a/examples/material-ui-nextjs-pages-router/pages/about.js b/examples/material-ui-nextjs-pages-router/pages/about.js
@@ -12,7 +12,7 @@ export default function About() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js example
+          Material UI - Next.js example in JavaScript
         </Typography>
         <Button variant="contained" component={Link} noLinkStyle href="/">
           Go to the main page
diff --git a/examples/material-ui-nextjs-pages-router/pages/index.js b/examples/material-ui-nextjs-pages-router/pages/index.js
@@ -11,7 +11,7 @@ export default function Index() {
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js example
+          Material UI - Next.js example in JavaScript
         </Typography>
         <Link href="/about" color="secondary">
           Go to the about page
diff --git a/examples/material-ui-nextjs-ts/next-env.d.ts b/examples/material-ui-nextjs-ts/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/examples/material-ui-nextjs-ts/package.json b/examples/material-ui-nextjs-ts/package.json
@@ -15,9 +15,9 @@
     "@mui/icons-material": "latest",
     "@mui/material": "latest",
     "@mui/material-nextjs": "latest",
-    "next": "^15.0.5",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^16.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@types/node": "latest",
diff --git a/examples/material-ui-nextjs-ts/src/app/about/page.tsx b/examples/material-ui-nextjs-ts/src/app/about/page.tsx
@@ -3,7 +3,7 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import NextLink from 'next/link';
+import Link from '@/components/Link';
 import ProTip from '@/components/ProTip';
 import Copyright from '@/components/Copyright';
 
@@ -23,7 +23,7 @@ export default function About() {
           Material UI - Next.js example in TypeScript
         </Typography>
         <Box sx={{ maxWidth: 'sm' }}>
-          <Button variant="contained" component={NextLink} href="/">
+          <Button variant="contained" component={Link} href="/">
             Go to the home page
           </Button>
         </Box>
diff --git a/examples/material-ui-nextjs-ts/src/app/layout.tsx b/examples/material-ui-nextjs-ts/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v16-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
diff --git a/examples/material-ui-nextjs-ts/src/app/page.tsx b/examples/material-ui-nextjs-ts/src/app/page.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import NextLink from 'next/link';
+import MaterialUILink from '@mui/material/Link';
+import NextLink from '@/components/Link';
 import ProTip from '@/components/ProTip';
 import Copyright from '@/components/Copyright';
 
@@ -20,11 +20,11 @@ export default function Home() {
         }}
       >
         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js App Router example in TypeScript
+          Material UI - Next.js example in TypeScript
         </Typography>
-        <Link href="/about" color="secondary" component={NextLink}>
+        <MaterialUILink component={NextLink} href="/about" color="secondary">
           Go to the about page
-        </Link>
+        </MaterialUILink>
         <ProTip />
         <Copyright />
       </Box>
diff --git a/examples/material-ui-nextjs-ts/src/components/Link.tsx b/examples/material-ui-nextjs-ts/src/components/Link.tsx
@@ -0,0 +1,4 @@
+'use client';
+import Link from 'next/link';
+
+export default Link;
diff --git a/examples/material-ui-nextjs-ts/tsconfig.json b/examples/material-ui-nextjs-ts/tsconfig.json
@@ -12,7 +12,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -23,6 +23,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/examples/material-ui-nextjs/package.json b/examples/material-ui-nextjs/package.json
@@ -16,8 +16,8 @@
     "@mui/material-nextjs": "latest",
     "eslint": "latest",
     "eslint-config-next": "latest",
-    "next": "^15.0.5",
-    "react": "latest",
-    "react-dom": "latest"
+    "next": "^16.0.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }
diff --git a/examples/material-ui-nextjs/src/app/about/page.js b/examples/material-ui-nextjs/src/app/about/page.js
@@ -3,7 +3,7 @@ import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import NextLink from 'next/link';
+import NextLink from '@/components/Link';
 import ProTip from '@/components/ProTip';
 import Copyright from '@/components/Copyright';
 
@@ -20,7 +20,7 @@ export default function About() {
         }}
       >
         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js example in TypeScript
+          Material UI - Next.js example in JavaScript
         </Typography>
         <Box sx={{ maxWidth: 'sm' }}>
           <Button variant="contained" component={NextLink} href="/">
diff --git a/examples/material-ui-nextjs/src/app/layout.js b/examples/material-ui-nextjs/src/app/layout.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v16-appRouter';
 import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import theme from '@/theme';
diff --git a/examples/material-ui-nextjs/src/app/page.js b/examples/material-ui-nextjs/src/app/page.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import Link from '@mui/material/Link';
-import NextLink from 'next/link';
+import MaterialUILink from '@mui/material/Link';
+import NextLink from '@/components/Link';
 import ProTip from '@/components/ProTip';
 import Copyright from '@/components/Copyright';
 
@@ -20,11 +20,11 @@ export default function Home() {
         }}
       >
         <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js App Router example in JavaScript
+          Material UI - Next.js example in JavaScript
         </Typography>
-        <Link href="/about" color="secondary" component={NextLink}>
+        <MaterialUILink href="/about" color="secondary" component={NextLink}>
           Go to the about page
-        </Link>
+        </MaterialUILink>
         <ProTip />
         <Copyright />
       </Box>
diff --git a/examples/material-ui-nextjs/src/components/Link.js b/examples/material-ui-nextjs/src/components/Link.js
@@ -0,0 +1,4 @@
+'use client';
+import Link from 'next/link';
+
+export default Link;
