[examples] Next.js v13 app router with Material UI #37315
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
| /.pnp | ||
| .pnp.js | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # next.js | ||
| /.next/ | ||
| /out/ | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| *.pem | ||
|
|
||
| # debug | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| .pnpm-debug.log* | ||
|
|
||
| # local env files | ||
| .env*.local | ||
|
|
||
| # vercel | ||
| .vercel | ||
|
|
||
| # typescript | ||
| *.tsbuildinfo | ||
| # next-env.d.ts |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| # Material UI - Next.js App Router example in TypeScript | ||
|
|
||
| ## How to use | ||
|
|
||
| Download the example [or clone the repo](https://github.com/mui/material-ui): | ||
|
|
||
| <!-- #default-branch-switch --> | ||
|
|
||
| ```sh | ||
| curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-next-app-router-ts | ||
| cd material-next-app-router-ts | ||
| ``` | ||
|
|
||
| Install it and run: | ||
|
|
||
| ```sh | ||
| npm install | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ## The idea behind the example | ||
|
|
||
| The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps. | ||
| It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components). | ||
|
|
||
| ## What's next? | ||
|
|
||
| <!-- #default-branch-switch --> | ||
|
|
||
| You now have a working example project. | ||
| You can head back to the documentation, continuing browsing it from the [templates](https://mui.com/material-ui/getting-started/templates/) section. | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| /// <reference types="next" /> | ||
| /// <reference types="next/image-types/global" /> | ||
|
|
||
| // NOTE: This file should not be edited | ||
| // see https://nextjs.org/docs/basic-features/typescript for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,15 @@ | ||||||||
| /** @type {import('next').NextConfig} */ | ||||||||
| const nextConfig = { | ||||||||
| reactStrictMode: true, | ||||||||
| swcMinify: true, | ||||||||
| modularizeImports: { | ||||||||
| '@mui/icons-material': { | ||||||||
| transform: '@mui/icons-material/{{member}}', | ||||||||
| }, | ||||||||
| }, | ||||||||
|
Comment on lines
+5
to
+9
There was a problem hiding this comment. Yes, great. I think that we really need to spend time on #35457. |
||||||||
| experimental: { | ||||||||
| typedRoutes: true, | ||||||||
| }, | ||||||||
|
There was a problem hiding this comment. To keep it more future-proof?
Suggested change
|
||||||||
| }; | ||||||||
|
|
||||||||
| module.exports = nextConfig; | ||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| { | ||
| "name": "material-next-app-router-ts", | ||
| "version": "5.0.0", | ||
| "private": true, | ||
| "scripts": { | ||
| "dev": "next dev", | ||
| "build": "next build", | ||
| "start": "next start", | ||
| "lint": "next lint", | ||
| "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest" | ||
| }, | ||
| "dependencies": { | ||
| "@emotion/cache": "latest", | ||
| "@emotion/react": "latest", | ||
| "@emotion/styled": "latest", | ||
| "@mui/icons-material": "latest", | ||
| "@mui/material": "latest", | ||
| "next": "latest", | ||
| "react": "latest", | ||
| "react-dom": "latest", | ||
| "tss-react": "latest" | ||
| }, | ||
| "devDependencies": { | ||
| "@types/node": "latest", | ||
| "@types/react": "latest", | ||
| "@types/react-dom": "latest", | ||
| "eslint": "latest", | ||
| "eslint-config-next": "latest", | ||
| "typescript": "latest" | ||
| } | ||
| } |
Empty file.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import * as React from 'react'; | ||
| import ThemeRegistry from '@/components/Theme/ThemeRegistry/ThemeRegistry'; | ||
|
|
||
| export const metadata = { | ||
| title: 'Next App with MUI5', | ||
| description: 'next app with mui5', | ||
| }; | ||
|
|
||
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
|
There was a problem hiding this comment. Does MUI work with import {Inter} from 'next/font/google';
const inter = Inter({subsets: ['latin']});
// ...
<body className={inter.className}>
...
</body>If it does, would be really helpful to include it in the example. There was a problem hiding this comment. Yes it works with the Next fonts, I can include it in the example. There was a problem hiding this comment. with next/fonts: Next.js automatically generates a styles file and inserts the fonts reference to it. 
|
||
| <ThemeRegistry>{children}</ThemeRegistry> | ||
| </body> | ||
| </html> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
|
|
||
| import Home from '@/layouts/Home/Home'; | ||
|
|
||
| export default function RootPage() { | ||
| return <Home />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import { Typography, Link as MuiLink } from '@mui/material'; | ||
|
|
||
| export default function Copyright() { | ||
| return ( | ||
| <Typography variant="body2" color="text.secondary" align="center"> | ||
| {'Copyright © '} | ||
| <MuiLink color="inherit" href="https://mui.com/"> | ||
| Your Website | ||
| </MuiLink> | ||
| {new Date().getFullYear()}. | ||
| </Typography> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import { SvgIconProps, SvgIcon, Typography, Link as MuiLink } from '@mui/material'; | ||
|
|
||
| function LightBulbIcon(props: SvgIconProps) { | ||
| return ( | ||
| <SvgIcon {...props}> | ||
| <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" /> | ||
| </SvgIcon> | ||
| ); | ||
| } | ||
|
|
||
| export default function ProTip() { | ||
| return ( | ||
| <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary"> | ||
| <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} /> | ||
| Pro tip: See more{' '} | ||
| <MuiLink href="https://mui.com/getting-started/templates/">templates</MuiLink> in the MUI | ||
| documentation. | ||
| </Typography> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| 'use client'; | ||
|
|
||
| import * as React from 'react'; | ||
| import { ThemeProvider } from '@mui/material/styles'; | ||
| import CssBaseline from '@mui/material/CssBaseline'; | ||
| import { NextAppDirEmotionCacheProvider } from 'tss-react/next/appDir'; | ||
|
There was a problem hiding this comment. Why use this? https://github.com/garronej/tss-react/blob/b06eccf9017032536161053eefa12b559516b592/src/next/appDir.tsx#L12. I think that it would be better if we own the logic. I assume it's similar to https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components. We could also look at how the current _document integration is done. More benchmark: |
||
|
|
||
| import theme from './theme'; | ||
|
|
||
| export default function ThemeRegistry({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <React.Fragment> | ||
| <CssBaseline /> | ||
| <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}> | ||
| <ThemeProvider theme={theme}>{children}</ThemeProvider> | ||
|
There was a problem hiding this comment. I believe Many thanks for this PR btw! There was a problem hiding this comment. I actually have encountered an issue: If I change the theme's palette mode at runtime. The If I comment out Edit: The problem went away after migrating to CssThemeVars. There was a problem hiding this comment. @kernelwhisperer Could you please share the sandbox link? There was a problem hiding this comment. Agree, the |
||
| </NextAppDirEmotionCacheProvider> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| 'use client'; | ||
|
|
||
| import { createTheme, ThemeOptions } from '@mui/material/styles'; | ||
|
|
||
| // When needed::: first argument is needed if you have your enterprise theme, and second argument is to override your enterprise theme. | ||
| const defaultTheme = createTheme({}, {} satisfies ThemeOptions); | ||
|
|
||
| export default defaultTheme; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,28 @@ | ||||||||||
| 'use client'; | ||||||||||
|
|
||||||||||
| import * as React from 'react'; | ||||||||||
| import { Container, Box, Typography } from '@mui/material'; | ||||||||||
|
There was a problem hiding this comment. I think that we can go with deep imports, for faster dev load time:
Suggested change
x the rest of the demos |
||||||||||
| import Copyright from '@/components/CopyRight/Copyright'; | ||||||||||
| import ProTip from '@/components/ProTip/ProTip'; | ||||||||||
|
|
||||||||||
| export default function Home() { | ||||||||||
| return ( | ||||||||||
| <Container maxWidth="lg"> | ||||||||||
| <Box | ||||||||||
| sx={{ | ||||||||||
| my: 4, | ||||||||||
| display: 'flex', | ||||||||||
| flexDirection: 'column', | ||||||||||
| justifyContent: 'center', | ||||||||||
| alignItems: 'center', | ||||||||||
| }} | ||||||||||
| > | ||||||||||
| <Typography variant="h4" component="h1" gutterBottom> | ||||||||||
| Material UI - Next.js example using App Router in TypeScript | ||||||||||
| </Typography> | ||||||||||
| <ProTip /> | ||||||||||
| <Copyright /> | ||||||||||
| </Box> | ||||||||||
| </Container> | ||||||||||
| ); | ||||||||||
| } | ||||||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "target": "es5", | ||
| "lib": ["dom", "dom.iterable", "esnext"], | ||
| "allowJs": true, | ||
| "skipLibCheck": true, | ||
| "strict": true, | ||
| "forceConsistentCasingInFileNames": true, | ||
| "noEmit": true, | ||
| "esModuleInterop": true, | ||
| "module": "esnext", | ||
| "moduleResolution": "node", | ||
| "resolveJsonModule": true, | ||
| "isolatedModules": true, | ||
| "jsx": "preserve", | ||
| "incremental": true, | ||
| "plugins": [ | ||
| { | ||
| "name": "next" | ||
| } | ||
| ], | ||
| "baseUrl": ".", | ||
| "paths": { | ||
| "@/*": ["./src/*"] | ||
| } | ||
| }, | ||
| "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], | ||
| "exclude": ["node_modules"] | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that we would be better off with this demo as the default,
pagesis legacy at this point.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we have to make any changes to the page directory url since we have defaulted to the app one?