[examples] Simplify Next.js example (#40661)

mui · Jan 21, 2024 · 9eea72d · 9eea72d
1 parent 4f8afb4
commit 9eea72d
Show file tree

Hide file tree

Showing 70 changed files with 266 additions and 583 deletions.
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:/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https:/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:/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:/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:/vercel/next.js/tree/canary/packages/create-next-app).
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https:/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:/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:/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;