[examples] Simplify Next.js example #40661

oliviertassinari · 2024-01-18T00:03:47Z

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 getInitColorSchemeScript to complete the runtime-less CSS-in-JS engine.

mui-bot · 2024-01-18T00:06:27Z

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against ebc6f4b

oliviertassinari · 2024-01-18T00:04:08Z

apps/zero-runtime-next-app/README.md

-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).


Future proof

oliviertassinari · 2024-01-18T00:04:24Z

apps/zero-runtime-next-app/src/app/layout.tsx

-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout(props: { children: React.ReactNode }) {


MUI code style convention

oliviertassinari · 2024-01-18T00:04:34Z

docs/data/material/guides/nextjs/nextjs.md

   return (
     <html lang="en">
       <body>
-+        <AppRouterCacheProvider>{children}</AppRouterCacheProvider>
+-        {props.children}


oliviertassinari · 2024-01-18T00:10:44Z

examples/base-ui-nextjs-tailwind-ts/next.config.mjs

 /** @type {import('next').NextConfig} */
 const nextConfig = {};

-module.exports = nextConfig;
+export default nextConfig;


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.

oliviertassinari · 2024-01-18T00:12:10Z

examples/material-ui-cra-styled-components-ts/src/App.tsx

-        <Typography variant="h4" component="h1" gutterBottom>
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>


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.

oliviertassinari · 2024-01-18T00:12:42Z

examples/material-ui-cra-styled-components-ts/src/ProTip.tsx

-    <Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>


Trying to stick to sx prop wherever possible.

oliviertassinari · 2024-01-18T00:13:03Z

examples/material-ui-nextjs-ts/next.config.js

-  images: {
-    remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: 'source.unsplash.com',
-        port: '',
-        pathname: '/random',
-      },
-    ],
-  },


Don't need this.

samuelsycamore · 2024-01-18T16:34:49Z

examples/material-ui-nextjs-ts/src/app/about/page.tsx

+        }}
+      >
+        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+          Material UI - Next.js example in TypeScript


to match the text on the main page:

Suggested change

Material UI - Next.js example in TypeScript

Material UI - Next.js App Router example in TypeScript

samuelsycamore

Good call. Eventually I'd really like to see all of these examples get a nicer branded makeover (like Next.js or Vite boilerplates) but until then, this works.

oliviertassinari · 2024-01-21T20:48:38Z

get a nicer branded makeover

@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.

gryphon2411 · 2024-09-23T15:19:59Z

While this might not apply to everyone, I hope my feedback below can help other beginners.

Before this PR changes, the material-ui-nextjs example project was really helpful for beginners like me who were new to React, Next.js, and Material UI.

It showed a glimpse of how a basic app can be structured and organized in a nice way. It was easy to use, build upon and it run smoothly.

I think the new example is a bit too simple, especially for people who don't know these technologies.

IMHO, it might be better if it kept some of the things from the old material-ui-nextjs example.

oliviertassinari · 2024-09-23T17:17:50Z

@gryphon2411 this is a fair point. We are missing steps:

we need a step by step guide on how to setup Next.js in an existing project: [material-ui][docs] Redo integration docs pages #40062
we need a CLI that tries to do it automatically: Create CLI npx create-mui-app #39588
we need a guide on how to add a template to a configured framework:
we need a CLI that tires to do it automatically: I have added this frustration to Create CLI npx create-mui-app #39588 under point B.

What problem did you face more specifically?

oliviertassinari added the examples Relating to /examples label Jan 18, 2024

oliviertassinari marked this pull request as ready for review January 18, 2024 00:03

oliviertassinari commented Jan 18, 2024

View reviewed changes

oliviertassinari mentioned this pull request Jan 18, 2024

Improve Next.js support #34905

Open

22 tasks

oliviertassinari added the enhancement This is not a bug, nor a new feature label Jan 18, 2024

oliviertassinari requested a review from samuelsycamore January 18, 2024 00:30

oliviertassinari added the nextjs label Jan 18, 2024

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 18, 2024

samuelsycamore reviewed Jan 18, 2024

View reviewed changes

samuelsycamore approved these changes Jan 18, 2024

View reviewed changes

[examples] Simplify Next.js example

ebc6f4b

oliviertassinari force-pushed the clean-up-example branch from dc10e3c to ebc6f4b Compare January 21, 2024 20:28

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 21, 2024

oliviertassinari merged commit 9eea72d into mui:master Jan 21, 2024
22 checks passed

oliviertassinari deleted the clean-up-example branch January 21, 2024 20:47

oliviertassinari mentioned this pull request Jun 7, 2024

[examples] Migrate Next.js config.next.js to config.next.mjs #42568

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[examples] Simplify Next.js example #40661

[examples] Simplify Next.js example #40661

oliviertassinari commented Jan 18, 2024 •

edited

Loading

mui-bot commented Jan 18, 2024 •

edited

Loading

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

oliviertassinari Jan 18, 2024

samuelsycamore Jan 18, 2024

samuelsycamore left a comment

oliviertassinari commented Jan 21, 2024

gryphon2411 commented Sep 23, 2024

oliviertassinari commented Sep 23, 2024 •

edited

Loading

		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 }) {

		<Typography variant="h4" component="h1" gutterBottom>
		<Typography variant="h4" component="h1" sx={{ mb: 2 }}>

		<Typography sx={{ mt: 6, mb: 3 }} color="text.secondary">
		<Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>

	Material UI - Next.js example in TypeScript
	Material UI - Next.js App Router example in TypeScript

[examples] Simplify Next.js example #40661

[examples] Simplify Next.js example #40661

Conversation

oliviertassinari commented Jan 18, 2024 • edited Loading

mui-bot commented Jan 18, 2024 • edited Loading

Netlify deploy preview

Bundle size report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuelsycamore left a comment

Choose a reason for hiding this comment

oliviertassinari commented Jan 21, 2024

gryphon2411 commented Sep 23, 2024

oliviertassinari commented Sep 23, 2024 • edited Loading

oliviertassinari commented Jan 18, 2024 •

edited

Loading

mui-bot commented Jan 18, 2024 •

edited

Loading

oliviertassinari commented Sep 23, 2024 •

edited

Loading