diff --git a/apps/zero-runtime-next-app/README.md b/apps/zero-runtime-next-app/README.md index de47d5fc1fa6a3..642698cf6b3abc 100644 --- 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 index 04e531708cbb3f..68cda51c45fe81 100644 --- 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 ( - {children} + {props.children} ); } 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 index 89c44d0db3cb2e..ece4eb58d44be6 100644 --- 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 ( - {children} + {props.children} ); 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 index 975345ae5c16ee..00fa3647dff46a 100644 --- 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 ( - {children} + {props.children} ); diff --git a/docs/data/material/guides/nextjs/nextjs.md b/docs/data/material/guides/nextjs/nextjs.md index 4ca51c5fdee7d1..ceb4d2d86cf5a7 100644 --- 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 ( -+ {children} +- {props.children} ++ {props.children} ); diff --git a/examples/base-ui-nextjs-tailwind-ts/README.md b/examples/base-ui-nextjs-tailwind-ts/README.md index 4da01f153a28b8..61fec67e60e1bf 100644 --- 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/examples/base-ui-nextjs-tailwind-ts/next.config.js b/examples/base-ui-nextjs-tailwind-ts/next.config.mjs similarity index 69% rename from examples/base-ui-nextjs-tailwind-ts/next.config.js rename to examples/base-ui-nextjs-tailwind-ts/next.config.mjs index 658404ac690c0c..4678774e6d6067 100644 --- a/examples/base-ui-nextjs-tailwind-ts/next.config.js +++ b/examples/base-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 index 26c050649fc5f7..4a444c6d09098d 100644 --- 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 ( - {children} + {props.children} ); } diff --git a/examples/joy-ui-nextjs-ts/README.md b/examples/joy-ui-nextjs-ts/README.md index 881e6eb2b3c187..ffac971f742fa5 100644 --- 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 b/examples/joy-ui-nextjs-ts/next.config.mjs similarity index 69% rename from examples/joy-ui-nextjs-ts/next.config.js rename to examples/joy-ui-nextjs-ts/next.config.mjs index 658404ac690c0c..4678774e6d6067 100644 --- a/examples/joy-ui-nextjs-ts/next.config.js +++ b/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 index 26699aa8b18231..44ae7d37255592 100644 --- 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 ( - {children} + {props.children} ); diff --git a/examples/material-ui-cra-styled-components-ts/src/App.tsx b/examples/material-ui-cra-styled-components-ts/src/App.tsx index 3747ecde982cde..d16f81f42f6904 100644 --- 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 ( - + Material UI Create React App example with styled-components in TypeScript diff --git a/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx b/examples/material-ui-cra-styled-components-ts/src/ProTip.tsx index 75e89824a97653..217b5bf4f92a10 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-cra-styled-components/src/App.js b/examples/material-ui-cra-styled-components/src/App.js index 945ab576549aa7..28f8ae04013aae 100644 --- 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 ( - + Material UI Create React App example with styled-components diff --git a/examples/material-ui-cra-styled-components/src/ProTip.js b/examples/material-ui-cra-styled-components/src/ProTip.js index 726025eff9a680..9ee04a73751516 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-cra-tailwind-ts/src/App.tsx b/examples/material-ui-cra-tailwind-ts/src/App.tsx index 5c9a0da97f290e..4c108cd79fa5e3 100644 --- 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 (
- + Material UI Create React App example with Tailwind CSS in TypeScript + {'Pro tip: See more '} templates diff --git a/examples/material-ui-cra-ts/src/App.tsx b/examples/material-ui-cra-ts/src/App.tsx index 943ee8503a08ff..fc4022f7755853 100644 --- 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 ( - + Material UI Create React App example in TypeScript diff --git a/examples/material-ui-cra-ts/src/ProTip.tsx b/examples/material-ui-cra-ts/src/ProTip.tsx index 75e89824a97653..217b5bf4f92a10 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-cra/src/App.js b/examples/material-ui-cra/src/App.js index 9cc31cf62c4da2..798de28ca283c0 100644 --- 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 ( - + Material UI Create React App example diff --git a/examples/material-ui-cra/src/ProTip.js b/examples/material-ui-cra/src/ProTip.js index 726025eff9a680..9ee04a73751516 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-express-ssr/App.js b/examples/material-ui-express-ssr/App.js index a695eb4e4edc97..8be630ae57af16 100644 --- 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 ( - + Material UI Express.js server-rendered example diff --git a/examples/material-ui-express-ssr/ProTip.js b/examples/material-ui-express-ssr/ProTip.js index 726025eff9a680..9ee04a73751516 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-gatsby/src/components/ProTip.js b/examples/material-ui-gatsby/src/components/ProTip.js index 726025eff9a680..9ee04a73751516 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-gatsby/src/pages/about.js b/examples/material-ui-gatsby/src/pages/about.js index 3368f279e41327..91c50367c80dcb 100644 --- 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 ( - + Material UI Gatsby example Go to the main page diff --git a/examples/material-ui-gatsby/src/pages/index.js b/examples/material-ui-gatsby/src/pages/index.js index 17ecbb53d2d085..a4534ec44d2728 100644 --- 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 ( - + Material UI Gatsby example diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/_document.tsx index 8e42b2b7ecabd0..947f9bdcda1907 100644 --- 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 index 92240f741b800c..567ad047905e5a 100644 --- 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', }} > - + Material UI - Next.js example in TypeScript diff --git a/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx b/examples/material-ui-nextjs-pages-router-ts/pages/index.tsx index 516fa2adf17878..4db50cf735a589 100644 --- 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', }} > - + Material UI - Next.js example in TypeScript diff --git a/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx b/examples/material-ui-nextjs-pages-router-ts/src/ProTip.tsx index 75e89824a97653..217b5bf4f92a10 100644 --- 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 ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-nextjs-pages-router/pages/_document.js b/examples/material-ui-nextjs-pages-router/pages/_document.js index 58a3c38deecacf..cd16734dccd48c 100644 --- 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 index 8c63d00f69d218..6e6114eb4abb4a 100644 --- 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 ( - + Material UI - Next.js example + + + + + + ); +} diff --git a/examples/material-ui-nextjs-ts/src/app/layout.tsx b/examples/material-ui-nextjs-ts/src/app/layout.tsx index 017035c102aeae..f415c91852f467 100644 --- a/examples/material-ui-nextjs-ts/src/app/layout.tsx +++ b/examples/material-ui-nextjs-ts/src/app/layout.tsx @@ -1,48 +1,10 @@ import * as React from 'react'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import { ThemeProvider } from '@mui/material/styles'; -import Link from 'next/link'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; -import Drawer from '@mui/material/Drawer'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import DashboardIcon from '@mui/icons-material/Dashboard'; -import HomeIcon from '@mui/icons-material/Home'; -import StarIcon from '@mui/icons-material/Star'; -import ChecklistIcon from '@mui/icons-material/Checklist'; -import SettingsIcon from '@mui/icons-material/Settings'; -import SupportIcon from '@mui/icons-material/Support'; -import LogoutIcon from '@mui/icons-material/Logout'; import theme from '@/theme'; -export const metadata = { - title: 'Next.js App Router + Material UI v5', - description: 'Next.js App Router + Material UI v5', -}; - -const DRAWER_WIDTH = 240; - -const LINKS = [ - { text: 'Home', href: '/', icon: HomeIcon }, - { text: 'Starred', href: '/starred', icon: StarIcon }, - { text: 'Tasks', href: '/tasks', icon: ChecklistIcon }, -]; - -const PLACEHOLDER_LINKS = [ - { text: 'Settings', icon: SettingsIcon }, - { text: 'Support', icon: SupportIcon }, - { text: 'Logout', icon: LogoutIcon }, -]; - -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default function RootLayout(props: { children: React.ReactNode }) { return ( @@ -50,68 +12,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - - - - Next.js App Router - - - - - - - {LINKS.map(({ text, href, icon: Icon }) => ( - - - - - - - - - ))} - - - - {PLACEHOLDER_LINKS.map(({ text, icon: Icon }) => ( - - - - - - - - - ))} - - - - {children} - + {props.children} diff --git a/examples/material-ui-nextjs-ts/src/app/page.tsx b/examples/material-ui-nextjs-ts/src/app/page.tsx index a42c62e22364e7..58998e36d48d8f 100644 --- a/examples/material-ui-nextjs-ts/src/app/page.tsx +++ b/examples/material-ui-nextjs-ts/src/app/page.tsx @@ -1,72 +1,33 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; -import Drawer from '@mui/material/Drawer'; +import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import Alert from '@mui/material/Alert'; -import AlertTitle from '@mui/material/AlertTitle'; -import MediaCard from '@/components/MediaCard'; +import Box from '@mui/material/Box'; +import Link from '@mui/material/Link'; +import NextLink from 'next/link'; +import ProTip from '@/components/ProTip'; +import Copyright from '@/components/Copyright'; -export default function HomePage() { +export default function Home() { return ( - -
- - Hello 👋 - This app uses the Next.js App Router and Material UI v5. - - - - - - - - - - - - - - - -
- + - - - - On this page - - - - - + + Material UI - Next.js App Router example in TypeScript + + + Go to the about page + + + + + ); } diff --git a/examples/material-ui-nextjs-ts/src/app/starred/page.tsx b/examples/material-ui-nextjs-ts/src/app/starred/page.tsx deleted file mode 100644 index 84fe92c445045e..00000000000000 --- a/examples/material-ui-nextjs-ts/src/app/starred/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import Container from '@mui/material/Container'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function StarredPage() { - return ( - - - - Starred Page - - - - ); -} diff --git a/examples/material-ui-nextjs-ts/src/app/tasks/page.tsx b/examples/material-ui-nextjs-ts/src/app/tasks/page.tsx deleted file mode 100644 index c69bddae328dfc..00000000000000 --- a/examples/material-ui-nextjs-ts/src/app/tasks/page.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import Container from '@mui/material/Container'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function TasksPage() { - return ( - - - - Tasks Page - - - - ); -} diff --git a/examples/material-ui-nextjs-ts/src/components/Copyright.tsx b/examples/material-ui-nextjs-ts/src/components/Copyright.tsx new file mode 100644 index 00000000000000..cfab5168a3f182 --- /dev/null +++ b/examples/material-ui-nextjs-ts/src/components/Copyright.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import MuiLink from '@mui/material/Link'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()}. + + ); +} diff --git a/examples/material-ui-nextjs-ts/src/components/MediaCard.tsx b/examples/material-ui-nextjs-ts/src/components/MediaCard.tsx deleted file mode 100644 index 7ac16ddc558cf9..00000000000000 --- a/examples/material-ui-nextjs-ts/src/components/MediaCard.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import Image from 'next/image'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -export default function MediaCard({ heading, text }: { heading: string; text: string }) { - return ( - - Random image - - - {heading} - - - {text} - - - - - - - - ); -} diff --git a/examples/material-ui-nextjs-ts/src/components/ProTip.tsx b/examples/material-ui-nextjs-ts/src/components/ProTip.tsx new file mode 100644 index 00000000000000..217b5bf4f92a10 --- /dev/null +++ b/examples/material-ui-nextjs-ts/src/components/ProTip.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; +import Typography from '@mui/material/Typography'; + +function LightBulbIcon(props: SvgIconProps) { + return ( + + + + ); +} + +export default function ProTip() { + return ( + + + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} + + ); +} diff --git a/examples/material-ui-nextjs/README.md b/examples/material-ui-nextjs/README.md index ab607a07b05516..98ea0fabe4fc94 100644 --- a/examples/material-ui-nextjs/README.md +++ b/examples/material-ui-nextjs/README.md @@ -1,6 +1,6 @@ # Material UI - Next.js App Router example -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/next.config.js b/examples/material-ui-nextjs/next.config.js deleted file mode 100644 index f8eba80f719632..00000000000000 --- a/examples/material-ui-nextjs/next.config.js +++ /dev/null @@ -1,15 +0,0 @@ -/** @type {import('next').NextConfig} */ -const nextConfig = { - images: { - remotePatterns: [ - { - protocol: 'https', - hostname: 'source.unsplash.com', - port: '', - pathname: '/random', - }, - ], - }, -}; - -module.exports = nextConfig; diff --git a/examples/material-ui-nextjs/next.config.mjs b/examples/material-ui-nextjs/next.config.mjs new file mode 100644 index 00000000000000..4678774e6d6067 --- /dev/null +++ b/examples/material-ui-nextjs/next.config.mjs @@ -0,0 +1,4 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = {}; + +export default nextConfig; diff --git a/examples/material-ui-nextjs/src/app/about/page.js b/examples/material-ui-nextjs/src/app/about/page.js new file mode 100644 index 00000000000000..670b48d4ffbd0e --- /dev/null +++ b/examples/material-ui-nextjs/src/app/about/page.js @@ -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 ( + + + + Material UI - Next.js example in TypeScript + + + + + + + + + ); +} diff --git a/examples/material-ui-nextjs/src/app/layout.js b/examples/material-ui-nextjs/src/app/layout.js index ac1afaad73c30c..a7ad6fb7d72cf4 100644 --- a/examples/material-ui-nextjs/src/app/layout.js +++ b/examples/material-ui-nextjs/src/app/layout.js @@ -1,48 +1,10 @@ import * as React from 'react'; -import Link from 'next/link'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import { ThemeProvider } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; -import Drawer from '@mui/material/Drawer'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import DashboardIcon from '@mui/icons-material/Dashboard'; -import HomeIcon from '@mui/icons-material/Home'; -import StarIcon from '@mui/icons-material/Star'; -import ChecklistIcon from '@mui/icons-material/Checklist'; -import SettingsIcon from '@mui/icons-material/Settings'; -import SupportIcon from '@mui/icons-material/Support'; -import LogoutIcon from '@mui/icons-material/Logout'; import theme from '@/theme'; -export const metadata = { - title: 'Next.js App Router + Material UI v5', - description: 'Next.js App Router + Material UI v5', -}; - -const DRAWER_WIDTH = 240; - -const LINKS = [ - { text: 'Home', href: '/', icon: HomeIcon }, - { text: 'Starred', href: '/starred', icon: StarIcon }, - { text: 'Tasks', href: '/tasks', icon: ChecklistIcon }, -]; - -const PLACEHOLDER_LINKS = [ - { text: 'Settings', icon: SettingsIcon }, - { text: 'Support', icon: SupportIcon }, - { text: 'Logout', icon: LogoutIcon }, -]; - -export default function RootLayout({ children }) { +export default function RootLayout(props) { return ( @@ -50,68 +12,7 @@ export default function RootLayout({ children }) { {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - - - - Next.js App Router - - - - - - - {LINKS.map(({ text, href, icon: Icon }) => ( - - - - - - - - - ))} - - - - {PLACEHOLDER_LINKS.map(({ text, icon: Icon }) => ( - - - - - - - - - ))} - - - - {children} - + {props.children} diff --git a/examples/material-ui-nextjs/src/app/page.js b/examples/material-ui-nextjs/src/app/page.js index a42c62e22364e7..6f219b23c18939 100644 --- a/examples/material-ui-nextjs/src/app/page.js +++ b/examples/material-ui-nextjs/src/app/page.js @@ -1,72 +1,33 @@ import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Unstable_Grid2'; -import Drawer from '@mui/material/Drawer'; +import Container from '@mui/material/Container'; import Typography from '@mui/material/Typography'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import Alert from '@mui/material/Alert'; -import AlertTitle from '@mui/material/AlertTitle'; -import MediaCard from '@/components/MediaCard'; +import Box from '@mui/material/Box'; +import Link from '@mui/material/Link'; +import NextLink from 'next/link'; +import ProTip from '@/components/ProTip'; +import Copyright from '@/components/Copyright'; -export default function HomePage() { +export default function Home() { return ( - -
- - Hello 👋 - This app uses the Next.js App Router and Material UI v5. - - - - - - - - - - - - - - - -
- + - - - - On this page - - - - - + + Material UI - Next.js App Router example in JavaScript + + + Go to the about page + + + + + ); } diff --git a/examples/material-ui-nextjs/src/app/starred/page.js b/examples/material-ui-nextjs/src/app/starred/page.js deleted file mode 100644 index 84fe92c445045e..00000000000000 --- a/examples/material-ui-nextjs/src/app/starred/page.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import Container from '@mui/material/Container'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function StarredPage() { - return ( - - - - Starred Page - - - - ); -} diff --git a/examples/material-ui-nextjs/src/app/tasks/page.js b/examples/material-ui-nextjs/src/app/tasks/page.js deleted file mode 100644 index c69bddae328dfc..00000000000000 --- a/examples/material-ui-nextjs/src/app/tasks/page.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import Container from '@mui/material/Container'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function TasksPage() { - return ( - - - - Tasks Page - - - - ); -} diff --git a/examples/material-ui-nextjs/src/components/Copyright.js b/examples/material-ui-nextjs/src/components/Copyright.js new file mode 100644 index 00000000000000..cfab5168a3f182 --- /dev/null +++ b/examples/material-ui-nextjs/src/components/Copyright.js @@ -0,0 +1,15 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import MuiLink from '@mui/material/Link'; + +export default function Copyright() { + return ( + + {'Copyright © '} + + Your Website + {' '} + {new Date().getFullYear()}. + + ); +} diff --git a/examples/material-ui-nextjs/src/components/MediaCard.js b/examples/material-ui-nextjs/src/components/MediaCard.js deleted file mode 100644 index e06e63b552bedc..00000000000000 --- a/examples/material-ui-nextjs/src/components/MediaCard.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import Image from 'next/image'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -export default function MediaCard({ heading, text }) { - return ( - - Random image - - - {heading} - - - {text} - - - - - - - - ); -} diff --git a/examples/material-ui-nextjs/src/components/ProTip.js b/examples/material-ui-nextjs/src/components/ProTip.js new file mode 100644 index 00000000000000..9ee04a73751516 --- /dev/null +++ b/examples/material-ui-nextjs/src/components/ProTip.js @@ -0,0 +1,23 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import SvgIcon from '@mui/material/SvgIcon'; +import Typography from '@mui/material/Typography'; + +function LightBulbIcon(props) { + return ( + + + + ); +} + +export default function ProTip() { + return ( + + + {'Pro tip: See more '} + templates + {' in the Material UI documentation.'} + + ); +} diff --git a/examples/material-ui-preact/src/App.js b/examples/material-ui-preact/src/App.js index 02083b0db42448..16cb0843e47d94 100644 --- a/examples/material-ui-preact/src/App.js +++ b/examples/material-ui-preact/src/App.js @@ -9,7 +9,7 @@ export default function App() { return ( - + Material UI Preact example diff --git a/examples/material-ui-preact/src/ProTip.js b/examples/material-ui-preact/src/ProTip.js index 726025eff9a680..9ee04a73751516 100644 --- a/examples/material-ui-preact/src/ProTip.js +++ b/examples/material-ui-preact/src/ProTip.js @@ -13,7 +13,7 @@ function LightBulbIcon(props) { export default function ProTip() { return ( - + {'Pro tip: See more '} templates diff --git a/examples/material-ui-remix-ts/app/routes/_index.tsx b/examples/material-ui-remix-ts/app/routes/_index.tsx index 8fb342cc03c70c..4e3c34d446b526 100644 --- a/examples/material-ui-remix-ts/app/routes/_index.tsx +++ b/examples/material-ui-remix-ts/app/routes/_index.tsx @@ -14,7 +14,7 @@ export const meta: MetaFunction = () => [ export default function Index() { return ( - + Material UI Remix in TypeScript example diff --git a/examples/material-ui-remix-ts/app/routes/about.tsx b/examples/material-ui-remix-ts/app/routes/about.tsx index c503515d45a885..641f7ed650de67 100644 --- a/examples/material-ui-remix-ts/app/routes/about.tsx +++ b/examples/material-ui-remix-ts/app/routes/about.tsx @@ -6,7 +6,7 @@ import Button from '@mui/material/Button'; export default function About() { return ( - + Material UI Remix in TypeScript example