[examples] Simplify Next.js example

mui · Jan 17, 2024 · dc10e3c · dc10e3c
1 parent b6705ec
commit dc10e3c
Show file tree

Hide file tree

Showing 66 changed files with 255 additions and 577 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://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
@@ -16,10 +16,10 @@ const Html = styled.html({
   color: 'red',
 });
 
-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/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/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/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;
diff --git a/examples/material-ui-nextjs-ts/src/app/about/page.tsx b/examples/material-ui-nextjs-ts/src/app/about/page.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+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 ProTip from '@/components/ProTip';
+import Copyright from '@/components/Copyright';
+
+export default function About() {
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          my: 4,
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+          Material UI - Next.js example in TypeScript
+        </Typography>
+        <Box sx={{ maxWidth: 'sm' }}>
+          <Button variant="contained" component={NextLink} href="/">
+            Go to the home page
+          </Button>
+        </Box>
+        <ProTip />
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}