mui · oliviertassinari · Jan 21, 2024 · Jan 17, 2024 · oliviertassinari · Jan 18, 2024
diff --git a/apps/zero-runtime-next-app/README.md b/apps/zero-runtime-next-app/README.md
@@ -1,6 +1,6 @@
 # Demo Next.js app for Zero Runtime
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app).
 
 ## Getting Started
 

diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx
@@ -11,10 +11,10 @@ export const metadata: Metadata = {
   description: 'Generated by create next app',
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>{props.children}</body>
     </html>
   );
 }
diff --git a/docs/data/base/guides/next-js-app-router/next-js-app-router.md b/docs/data/base/guides/next-js-app-router/next-js-app-router.md
@@ -114,11 +114,10 @@ export default function ThemeRegistry(props) {
 
 // app/layout.js
 export default function RootLayout(props) {
-  const { children } = props;
   return (
     <html lang="en">
       <body>
-        <ThemeRegistry options={{ key: 'mui' }}>{children}</ThemeRegistry>
+        <ThemeRegistry options={{ key: 'mui' }}>{props.children}</ThemeRegistry>
       </body>
     </html>
   );

diff --git a/docs/data/joy/integrations/next-js-app-router/next-js-app-router.md b/docs/data/joy/integrations/next-js-app-router/next-js-app-router.md
@@ -93,11 +93,10 @@ export default function ThemeRegistry(props) {
 
 // app/layout.tsx
 export default function RootLayout(props) {
-  const { children } = props;
   return (
     <html lang="en">
       <body>
-        <ThemeRegistry options={{ key: 'joy' }}>{children}</ThemeRegistry>
+        <ThemeRegistry options={{ key: 'joy' }}>{props.children}</ThemeRegistry>
       </body>
     </html>
   );

diff --git a/docs/data/material/guides/nextjs/nextjs.md b/docs/data/material/guides/nextjs/nextjs.md
@@ -36,11 +36,11 @@ Inside `app/layout.tsx`, import the `AppRouterCacheProvider` and wrap all elemen
  // or `v1X-appRouter` if you are using Next.js v1X
 
  export default function RootLayout(props) {
-   const { children } = props;
    return (
      <html lang="en">
        <body>
-+        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
+-        {props.children}
++        <AppRouterCacheProvider>{props.children}</AppRouterCacheProvider>
        </body>
      </html>
    );

diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md
@@ -1,6 +1,6 @@
 # Base UI - Next.js App Router with Tailwind CSS example in TypeScript
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with Base UI installed and Tailwind CSS for styles.
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Base UI installed and Tailwind CSS for styles.
 
 ## How to use
 

diff --git a/...base-ui-nextjs-tailwind-ts/next.config.js → ...ase-ui-nextjs-tailwind-ts/next.config.mjs b/...base-ui-nextjs-tailwind-ts/next.config.js → ...ase-ui-nextjs-tailwind-ts/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx b/examples/base-ui-nextjs-tailwind-ts/src/app/layout.tsx
@@ -14,10 +14,9 @@ export const metadata = {
 };
 
 export default function RootLayout(props: { children: React.ReactNode }) {
-  const { children } = props;
   return (
     <html lang="en">
-      <body className={font.className}>{children}</body>
+      <body className={font.className}>{props.children}</body>
     </html>
   );
 }
diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md
@@ -1,6 +1,6 @@
 # Joy UI - Next.js App Router with TypeScript
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app).
 
 ## How to use
 

diff --git a/examples/joy-ui-nextjs-ts/next.config.js → examples/joy-ui-nextjs-ts/next.config.mjs b/examples/joy-ui-nextjs-ts/next.config.js → examples/joy-ui-nextjs-ts/next.config.mjs
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-module.exports = nextConfig;
+export default nextConfig;
diff --git a/examples/joy-ui-nextjs-ts/src/app/layout.tsx b/examples/joy-ui-nextjs-ts/src/app/layout.tsx
@@ -7,11 +7,10 @@ export const metadata = {
 };
 
 export default function RootLayout(props: { children: React.ReactNode }) {
-  const { children } = props;
   return (
     <html lang="en">
       <body>
-        <ThemeRegistry>{children}</ThemeRegistry>
+        <ThemeRegistry>{props.children}</ThemeRegistry>
       </body>
     </html>
   );

diff --git a/examples/material-ui-cra-styled-components-ts/src/App.tsx b/examples/material-ui-cra-styled-components-ts/src/App.tsx
@@ -21,7 +21,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Create React App example with styled-components in TypeScript
         </Typography>
         <ProTip />

diff --git a/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx b/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx
@@ -13,7 +13,7 @@ function LightBulbIcon(props: SvgIconProps) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-cra-styled-components/src/App.js b/examples/material-ui-cra-styled-components/src/App.js
@@ -21,7 +21,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Create React App example with styled-components
         </Typography>
         <ProTip />

diff --git a/examples/material-ui-cra-styled-components/src/ProTip.js b/examples/material-ui-cra-styled-components/src/ProTip.js
@@ -13,7 +13,7 @@ function LightBulbIcon(props) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-cra-tailwind-ts/src/App.tsx b/examples/material-ui-cra-tailwind-ts/src/App.tsx
@@ -23,7 +23,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <div className="my-4">
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Create React App example with Tailwind CSS in TypeScript
         </Typography>
         <Slider

diff --git a/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx b/examples/material-ui-cra-tailwind-ts/src/ProTip.tsx
@@ -13,7 +13,7 @@ function LightBulbIcon(props: SvgIconProps) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-cra-ts/src/App.tsx b/examples/material-ui-cra-ts/src/App.tsx
@@ -21,7 +21,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Create React App example in TypeScript
         </Typography>
         <ProTip />

diff --git a/examples/material-ui-cra-ts/src/ProTip.tsx b/examples/material-ui-cra-ts/src/ProTip.tsx
@@ -13,7 +13,7 @@ function LightBulbIcon(props: SvgIconProps) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-cra/src/App.js b/examples/material-ui-cra/src/App.js
@@ -22,7 +22,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Create React App example
         </Typography>
         <ProTip />

diff --git a/examples/material-ui-cra/src/ProTip.js b/examples/material-ui-cra/src/ProTip.js
@@ -13,7 +13,7 @@ function LightBulbIcon(props) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-express-ssr/App.js b/examples/material-ui-express-ssr/App.js
@@ -22,7 +22,7 @@ export default function App() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Express.js server-rendered example
         </Typography>
         <ProTip />

diff --git a/examples/material-ui-express-ssr/ProTip.js b/examples/material-ui-express-ssr/ProTip.js
@@ -13,7 +13,7 @@ function LightBulbIcon(props) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-gatsby/src/components/ProTip.js b/examples/material-ui-gatsby/src/components/ProTip.js
@@ -13,7 +13,7 @@ function LightBulbIcon(props) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-gatsby/src/pages/about.js b/examples/material-ui-gatsby/src/pages/about.js
@@ -10,7 +10,7 @@ export default function About() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Gatsby example
         </Typography>
         <Link to="/">Go to the main page</Link>

diff --git a/examples/material-ui-gatsby/src/pages/index.js b/examples/material-ui-gatsby/src/pages/index.js
@@ -10,7 +10,7 @@ export default function Index() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI Gatsby example
         </Typography>
         <Link to="/about" color="secondary">

diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Html, Head, Main, NextScript, DocumentProps } from 'next/document';
+import { Html, Head, Main, NextScript, DocumentProps, DocumentContext } from 'next/document';
 import { DocumentHeadTags, documentGetInitialProps } from '@mui/material-nextjs/v14-pagesRouter';
 import theme, { roboto } from '../src/theme';
 
@@ -21,4 +21,7 @@ export default function MyDocument(props: DocumentProps) {
   );
 }
 
-MyDocument.getInitialProps = documentGetInitialProps;
+MyDocument.getInitialProps = async (ctx: DocumentContext) => {
+  const finalProps = await documentGetInitialProps(ctx);
+  return finalProps;
+};
diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/about.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/about.tsx
@@ -19,7 +19,7 @@ export default function About() {
           alignItems: 'center',
         }}
       >
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example in TypeScript
         </Typography>
         <Box sx={{ maxWidth: 'sm' }}>

diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx
@@ -18,7 +18,7 @@ export default function Home() {
           alignItems: 'center',
         }}
       >
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example in TypeScript
         </Typography>
         <Link href="/about" color="secondary">

diff --git a/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx b/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx
@@ -13,7 +13,7 @@ function LightBulbIcon(props: SvgIconProps) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-nextjs-pages-router/pages/_document.js b/examples/material-ui-nextjs-pages-router/pages/_document.js
@@ -21,4 +21,7 @@ export default function MyDocument(props) {
   );
 }
 
-MyDocument.getInitialProps = documentGetInitialProps;
+MyDocument.getInitialProps = async (ctx) => {
+  const finalProps = await documentGetInitialProps(ctx);
+  return finalProps;
+};
diff --git a/examples/material-ui-nextjs-pages-router/pages/about.js b/examples/material-ui-nextjs-pages-router/pages/about.js
@@ -11,7 +11,7 @@ export default function About() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example
         </Typography>
         <Button variant="contained" component={Link} noLinkStyle href="/">

diff --git a/examples/material-ui-nextjs-pages-router/pages/index.js b/examples/material-ui-nextjs-pages-router/pages/index.js
@@ -10,7 +10,7 @@ export default function Index() {
   return (
     <Container maxWidth="sm">
       <Box sx={{ my: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example
         </Typography>
         <Link href="/about" color="secondary">

diff --git a/examples/material-ui-nextjs-pages-router/src/ProTip.js b/examples/material-ui-nextjs-pages-router/src/ProTip.js
@@ -13,7 +13,7 @@ function LightBulbIcon(props) {
 
 export default function ProTip() {
   return (
-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
       <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
       {'Pro tip: See more '}
       <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>

diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/_document.tsx
@@ -20,7 +20,6 @@ export default function MyDocument(props: DocumentProps) {
         {/* PWA primary color */}
         <meta name="theme-color" content={theme.palette.primary.main} />
         <link rel="shortcut icon" href="/favicon.ico" />
-        {/* Inject MUI styles first to match with the prepend: true configuration. */}
         <DocumentHeadTags {...props} />
       </Head>
       <body>

diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/about.tsx
@@ -24,7 +24,7 @@ export default function About() {
   return (
     <Container maxWidth="lg">
       <div className={classes.main}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example in TypeScript with legacy @mui/styles
         </Typography>
         <Box sx={{ maxWidth: 'sm' }}>

diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx b/examples/material-ui-nextjs-ts-v4-v5-migration/pages/index.tsx
@@ -23,7 +23,7 @@ export default function Home() {
   return (
     <Container maxWidth="lg">
       <div className={classes.main}>
-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
           Material UI - Next.js example in TypeScript with legacy @mui/styles
         </Typography>
         <Link href="/about" color="secondary">

diff --git a/examples/material-ui-nextjs-ts/README.md b/examples/material-ui-nextjs-ts/README.md
@@ -1,6 +1,6 @@
 # Material UI - Next.js App Router example in TypeScript
 
-This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with Material UI installed.
+This is a [Next.js](https://nextjs.org/) project bootstrapped using [`create-next-app`](https://github.com/vercel/next.js/tree/HEAD/packages/create-next-app) with Material UI installed.
 
 ## How to use
 

diff --git a/examples/material-ui-nextjs-ts/next.config.js b/examples/material-ui-nextjs-ts/next.config.js
diff --git a/examples/material-ui-nextjs-ts/next.config.mjs b/examples/material-ui-nextjs-ts/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;