[examples] Simplify Next.js example #40661
Conversation
| 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). |
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| export default function RootLayout(props: { children: React.ReactNode }) { |
There was a problem hiding this comment.
MUI code style convention
| return ( | ||
| <html lang="en"> | ||
| <body> | ||
| + <AppRouterCacheProvider>{children}</AppRouterCacheProvider> | ||
| - {props.children} |
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = {}; | ||
|
|
||
| module.exports = nextConfig; | ||
| export default nextConfig; |
There was a problem hiding this comment.
ESM should be the default at this stage, no? It's not what npx create-next-app@latest outputs but I don't see why it wouldn't make more sense.
| <Typography variant="h4" component="h1" gutterBottom> | ||
| <Typography variant="h4" component="h1" sx={{ mb: 2 }}> |
There was a problem hiding this comment.
We might not want to promote gutterBottom much. I recall adding this for markdown like formatting, it's arbitrary: #16926. I don't know if it's idiomatic anymore.
| <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary"> | ||
| <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}> |
There was a problem hiding this comment.
Trying to stick to sx prop wherever possible.
| images: { | ||
| remotePatterns: [ | ||
| { | ||
| protocol: 'https', | ||
| hostname: 'source.unsplash.com', | ||
| port: '', | ||
| pathname: '/random', | ||
| }, | ||
| ], | ||
| }, |
There was a problem hiding this comment.
Don't need this.
github-actions
bot
added
the
PR: out-of-date
| }} | ||
| > | ||
| <Typography variant="h4" component="h1" sx={{ mb: 2 }}> | ||
| Material UI - Next.js example in TypeScript |
There was a problem hiding this comment.
to match the text on the main page:
| Material UI - Next.js example in TypeScript | |
| Material UI - Next.js App Router example in TypeScript |
oliviertassinari
force-pushed
the
clean-up-example
branch
from
dc10e3c
to
ebc6f4b
Compare
github-actions
bot
removed
the
PR: out-of-date
@samuelsycamore This makes sense 👍. I think this PR will help, it makes more examples look identically the same, so easier to update 10 examples at once that are the same than 10 examples that are different. |
I saw this example, again, I had to open a PR, I can't imagine why developers would find this helpful: mui/tech-challenge-full-stack#3 (comment).
It's another round of #40318. From #34905, that has been here for a good chunk of time:
There is still a lot we could do to improve the Next.js integration/experience but one step at a time. For example, we will need
getInitColorSchemeScriptto complete the runtime-less CSS-in-JS engine.