[examples] Next.js v13 app router with Material UI #37315

smo043 · 2023-05-18T02:27:29Z

I have followed (at least) the PR section of the contributing guide.

mui-bot · 2023-05-18T02:30:26Z

Netlify deploy preview

https://deploy-preview-37315--material-ui.netlify.app/

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against d4d0f72

smo043 · 2023-05-19T02:03:27Z

This change will make it easier for people who are trying to use Next App Router with Material UI v5.

examples/material-next-app-router-ts/next.config.js

oliviertassinari · 2023-05-21T22:55:19Z

examples/material-next-app-router-ts/src/layouts/Home/Home.tsx

+'use client';
+
+import * as React from 'react';
+import { Container, Box, Typography } from '@mui/material';


I think that we can go with deep imports, for faster dev load time:

Suggested change

import { Container, Box, Typography } from '@mui/material';

import Container from '@mui/material/Container';

import Box from '@mui/material/Box';

import Typography from '@mui/material/Typography';

x the rest of the demos

oliviertassinari · 2023-05-21T22:56:36Z

examples/material-next-app-router-ts/README.md

+<!-- #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


I think that we would be better off with this demo as the default, pages is legacy at this point.

Suggested change

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-next-app-router-ts

curl https://codeload.github.com/mui/material-ui/tar.gz/master | tar -xz --strip=2 material-ui-master/examples/material-next-ts

Do we have to make any changes to the page directory url since we have defaulted to the app one?

oliviertassinari · 2023-05-21T22:58:20Z

examples/material-next-app-router-ts/next.config.js

+  modularizeImports: {
+    '@mui/icons-material': {
+      transform: '@mui/icons-material/{{member}}',
+    },
+  },


Yes, great. I think that we really need to spend time on #35457.

oliviertassinari · 2023-05-21T22:58:50Z

examples/material-next-app-router-ts/next.config.js

+  experimental: {
+    typedRoutes: true,
+  },


To keep it more future-proof?

Suggested change

experimental: {

typedRoutes: true,

},

oliviertassinari · 2023-05-21T22:59:37Z

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx

+import * as React from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { NextAppDirEmotionCacheProvider } from 'tss-react/next/appDir';


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:

https://chakra-ui.com/getting-started/nextjs-guide#app-directory-setup

smo043 · 2023-05-22T00:04:19Z

@oliviertassinari - thank you, I will work on your review comments.

MartinXPN · 2023-05-23T08:28:18Z

examples/material-next-app-router-ts/src/app/layout.tsx

+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>


Does MUI work with next/font?

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.

Yes it works with the Next fonts, I can include it in the example.

with next/fonts: Next.js automatically generates a styles file and inserts the fonts reference to it.

MartinXPN

I'm not part of the MUI team, but the current version of this PR looks great! Thanks for adding this example!
When merged, this will resolve the issue #34898

Setup the environment for testing and to leverage a component library for expedience of building the site. It should, also, be noted that MUI can only be used when a component is rendered client-side, instead of, the prefered server-side. This is issue accures as of Next.js 13, and is explained in further detail: mui/material-ui#34898, mui/material-ui#37315

smo043 · 2023-05-25T00:50:25Z

@oliviertassinari @mnajdova - can we merge this pr?

kernelwhisperer · 2023-05-30T20:59:54Z

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx

+    <React.Fragment>
+      <CssBaseline />
+      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>


I believe <CssBaseline /> should be nested under ThemeProvider, so that dark mode works correctly.

Many thanks for this PR btw!

I actually have encountered an issue:

If I change the theme's palette mode at runtime. The Paper and Button components do reflect the change, but others like Typography or CssBaseline do not.

If I comment out NextAppDirEmotionCacheProvider changing the mode at runtime works.

Edit: The problem went away after migrating to CssThemeVars.

@kernelwhisperer Could you please share the sandbox link?

Agree, the CssBaseline should be under the ThemeProvider.

taschetto · 2023-06-10T01:18:56Z

I may be missing something, but this approach uses use client for every mui component, so we are not leveraging SSR here.

joeydqyuan · 2023-06-11T08:49:27Z

I may be missing something, but this approach uses use client for every mui component, so we are not leveraging SSR here.

I have the same question. Could you please help me answer it? thanks

MartinXPN · 2023-06-11T09:07:21Z

@joeydqyuan @taschetto 'use client' does not mean only client-side rendering. It means that the JavaScript in the file is going to be bundled and sent to the client, while also rendering server side. So, when a file has 'use client' at the top of it, it "tells" next.js to also send the JavaScript to the client instead of only sending HTML and CSS.

The bottom line is - 'use client' does not mean client side rendering. The content is still going to be rendered on the server (just like with pages directory) but you'll also get the benefit of interactivity with JavaScript on the client.

mnajdova · 2023-06-21T10:13:49Z

I understand that some people might not be keen on adding an extra dependency to their project if they are not using tss-react. However, this tooling is not specifically tied to tss-react. In my opinion, it could be provided either by the Emotion package or MUI.

We can take this separately. @smo043 thanks a lot for the contribution. Let me test it out a bit today and merge if everything works as expected :)

mnajdova

This looks great! I left a few comments. I would recommend adding one more page so that we show how the navigation would work. We have this as an example in all next.js example projects.

mnajdova · 2023-06-21T10:37:02Z

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx

+  children: React.ReactNode;
+};
+
+export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {


Suggested change

export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {

// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx

export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {

Ideally, this should come from emotion. @Andarist would the emotion time accept this as a contribution?

I think so. I have to give this some more thought but:

this is somewhat working and this solution is shared in our issues so everyone can copy-paste it anyway

it likely has some subtle/edge-case issues but people usually don't run into them at all so I think it's roughly OK to be used right now

it's a temporary solution - so it would have to be a separate package. We are still waiting on improved React APIs that, hopefully, will make this obsolete

Alright, we will use it for now in the example then, and I will keep an eye in the emotion issue. Thanks!

I just want to clarify because I was perhaps misunderstood. Those were my general thoughts on the subject but I think that it would be valuable to get this into the Emotion's repo as an experimental package or smth. The advantage of that would be that we could deprecate this package in the future with a helpful note about the migration strategy.

Ah alright, that makes sense. @garronej would you like to make a contribution as you originally created it? :)

Would be great if @garronej or @Andarist can share a summary of how this work with app router.

Also why it is needed/what it accomplishes. I see some related exposition from NextJS but don't think it is terribly clear either for novice learners: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#configuring-css-in-js-in-app

If it's an issue you can make a PR on this @sgoodrow-zymergen

Would be great if @garronej or @Andarist can share a summary of how this work with app router.

Hello, the provider ensures that when the app is rendered on the server, the styles generated by Emotion get injected into the <head> element.

Without the provider, Emotion defaults to its "zero config SSR mode", in which <style /> tags are injected into the body of the document, right next to the element being styled.

However, MUI is not compatible with Emotion's "zero config SSR mode". This has led to the recommended implementation with the Next Pages Router here being quite complex. Ever since MUI started utilizing Emotion, it has required the SSR advanced approach to be implemented, this provider is nothing new, it's the same old aprach implemented for the Next's App Router.

A while back, I proposed an RFC suggesting an abstraction of this process. I've also initiated a PR on the Emotion repository to discuss transferring the TSS utilities. I'm absolutely prepared to contribute to this project. But as @Andarist pointed out, it would involve introducing a new experimental Emotion module, and he's better equipped to make the necessary decisions regarding that.

@mnajdova @siriwatknp @sgoodrow-zymergen

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/theme.ts

mnajdova · 2023-06-21T10:42:39Z

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/ThemeRegistry.tsx

+    <React.Fragment>
+      <CssBaseline />
+      <NextAppDirEmotionCacheProvider options={{ key: 'mui' }}>
+        <ThemeProvider theme={theme}>{children}</ThemeProvider>


Agree, the CssBaseline should be under the ThemeProvider.

smo043 · 2023-06-21T15:33:26Z

This looks great! I left a few comments. I would recommend adding one more page so that we show how the navigation would work. We have this as an example in all next.js example projects.

@mnajdova - cool I will address the review comments asap

smo043 · 2023-06-21T20:23:41Z

@mnajdova - The review comments have been resolved, and an additional page has been added to demonstrate how the navigation works.

mnajdova

Works great! Thanks a lot for the contribution @smo043 and sorry for the delay with the review. @mj12albert, @brijeshb42 we can extend this example in the future to show how RSC can be used too.

smo043 · 2023-06-22T07:39:01Z

Works great! Thanks a lot for the contribution @smo043 and sorry for the delay with the review. @mj12albert, @brijeshb42 we can extend this example in the future to show how RSC can be used too.

@mnajdova - I appreciate you taking the time to test and review this PR.

smo043 · 2023-06-22T08:17:32Z

@mnajdova - I don't have merge access, could you please merge this pull request?

mnajdova · 2023-06-22T10:30:46Z

@mnajdova - I don't have merge access, could you please merge this pull request?

Yes, merging it.

marcusleeeugene · 2023-06-22T12:09:31Z

Hi I just came across this thread, can I just check if this is a solution to the problem where in the new app directory, the theme styles don't apply when you route to a new page?

Update:
Just tried, and it fixes the issue, thank you! :)

c0d3x · 2023-06-22T12:29:39Z

I use want to use this setup with Tailwind CSS also, do I need to do any other changes to make it work?

Also linter dont like these:

./src/components/Theme/ThemeRegistry/EmotionCache.tsx
31:15  Error: 'cache' is already declared in the upper scope on line 29 column 14.  no-shadow
43:15  Error: 'flush' is already declared in the upper scope on line 29 column 21.  no-shadow
59:23  Warning: Generic Object Injection Sink  security/detect-object-injection

garronej · 2023-06-24T12:19:12Z

examples/material-next-app-router-ts/src/components/Theme/ThemeRegistry/EmotionCache.tsx

+  children: React.ReactNode;
+};
+
+// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx


jakubprzybylski · 2023-08-01T11:26:29Z

Hi @smo043, is there an option that this setup has an issue with specificity of custom styles? I am trying to override MUI styles using styled() and while the styles apply for additional CSS properties correctly, the ones that collide with MUI are always below the MUI styles in priority. So it seems as if I would have to apply !important for everything, which isn't the greatest perspective. :)

I mimicked this setup and am using MUI 5.14.0 with Next 13.4.10.

mj12albert · 2023-08-01T16:57:52Z

@jakubprzybylski You can change the CSS injection order like this: https://mui.com/material-ui/guides/next-js-app-router/#css-injection-order

jakubprzybylski · 2023-08-02T09:21:05Z

@mj12albert thank you for taking your time to help! Following this link, I tried to insert:

__html: options.prepend ? `@layer emotion {${styles}}` : styles

into my EmotionCache.tsx, however the styling looks even worse now with MUI elements losing their original padding for instance.

I've noticed that in this documentation link useServerInsertedHTML()'s function body is way shorter and different than the one found in EmotionCache.tsx stored in master or 3.4.0:

material-ui/examples/material-next-app-router-ts/src/components/ThemeRegistry/EmotionCache.tsx

Line 47 in a18f64a

useServerInsertedHTML(() => {

So this solution from documentation is either incorrect or outdated, because it's based on an older version of EmotionCache.tsx, I think?

Perhaps it's an easy fix?

feat: next js 13 app router with mui5

8c6e824

smo043 changed the title ~~feat: next js 13 app router with mui5~~ [core] next js 13 app router with mui5 May 18, 2023

michaldudak added the examples Relating to /examples label May 18, 2023

michaldudak requested a review from mnajdova May 18, 2023 07:02

michaldudak changed the title ~~[core] next js 13 app router with mui5~~ [examples] next js 13 app router with mui5 May 18, 2023

smo043 added 2 commits May 18, 2023 21:16

feat: lint and prettier fix

f6aaa91

feat: prettier fix

9d37179

ZeeshanTamboli mentioned this pull request May 20, 2023

Next.js 13 example with the app router #34898

Closed

2 tasks

MartinXPN reviewed May 20, 2023

View reviewed changes

examples/material-next-app-router-ts/next.config.js Outdated Show resolved Hide resolved

Remove appDir from experimental in the next configuration.

b4c8fdd

smo043 requested a review from MartinXPN May 20, 2023 15:05

smo043 mentioned this pull request May 20, 2023

Improve Next.js support #34905

Open

22 tasks

oliviertassinari reviewed May 21, 2023

View reviewed changes

oliviertassinari changed the title ~~[examples] next js 13 app router with mui5~~ [examples] next js 13 app router with Material UI v5 May 21, 2023

oliviertassinari changed the title ~~[examples] next js 13 app router with Material UI v5~~ [examples] Next.js v13 app router with Material UI v5 May 21, 2023

addressed review comments

3479622

smo043 requested a review from oliviertassinari May 22, 2023 17:19

MartinXPN reviewed May 23, 2023

View reviewed changes

included next font with mui5 theme.

6d95877

smo043 requested a review from MartinXPN May 23, 2023 10:09

MartinXPN approved these changes May 23, 2023

View reviewed changes

kernelwhisperer reviewed May 30, 2023

View reviewed changes

bablukpik approved these changes Jun 8, 2023

View reviewed changes

This comment was marked as off-topic.

Sign in to view

mnajdova reviewed Jun 21, 2023

View reviewed changes

addressed review comments

69eb595

mnajdova added 2 commits June 22, 2023 09:04

remove empty line after comment

0cd3bbb

remove empty lines between import statements

d4d0f72

mnajdova approved these changes Jun 22, 2023

View reviewed changes

mnajdova merged commit c30ce7f into mui:master Jun 22, 2023
18 checks passed

mnajdova changed the title ~~[examples] Next.js v13 app router with Material UI v5~~ [examples] Next.js v13 app router with Material UI Jun 22, 2023

garronej reviewed Jun 24, 2023

View reviewed changes

mattsbennett mentioned this pull request Dec 7, 2023

[material-ui][docs] NextJS app router CSS injection order #40138

Closed

1 task

-import { Container, Box, Typography } from '@mui/material';
+import Container from '@mui/material/Container';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';

	curl https://codeload.github.com/mui/material-ui/tar.gz/master \| tar -xz --strip=2 material-ui-master/examples/material-next-app-router-ts
	curl https://codeload.github.com/mui/material-ui/tar.gz/master \| tar -xz --strip=2 material-ui-master/examples/material-next-ts

	export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {
	// This implementation is taken from https://github.com/garronej/tss-react/blob/main/src/next/appDir.tsx
	export function NextAppDirEmotionCacheProvider(props: NextAppDirEmotionCacheProviderProps) {

[examples] Next.js v13 app router with Material UI #37315

[examples] Next.js v13 app router with Material UI #37315

Conversation

smo043 commented May 18, 2023

mui-bot commented May 18, 2023 • edited

Netlify deploy preview

Bundle size report

smo043 commented May 19, 2023 • edited by oliviertassinari

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

oliviertassinari May 21, 2023 • edited

Choose a reason for hiding this comment

smo043 commented May 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smo043 May 23, 2023 • edited

Choose a reason for hiding this comment

MartinXPN left a comment

Choose a reason for hiding this comment

smo043 commented May 25, 2023 • edited

Choose a reason for hiding this comment

kernelwhisperer May 30, 2023 • edited

Choose a reason for hiding this comment

smo043 Jun 1, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

taschetto commented Jun 10, 2023

joeydqyuan commented Jun 11, 2023

MartinXPN commented Jun 11, 2023

This comment was marked as off-topic.

mnajdova commented Jun 21, 2023

mnajdova left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

garronej Jun 24, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

smo043 commented Jun 21, 2023

smo043 commented Jun 21, 2023

mnajdova left a comment

Choose a reason for hiding this comment

smo043 commented Jun 22, 2023

smo043 commented Jun 22, 2023

mnajdova commented Jun 22, 2023

marcusleeeugene commented Jun 22, 2023 • edited

c0d3x commented Jun 22, 2023 • edited

Choose a reason for hiding this comment

jakubprzybylski commented Aug 1, 2023 • edited

mj12albert commented Aug 1, 2023

jakubprzybylski commented Aug 2, 2023 • edited

mui-bot commented May 18, 2023 •

edited

smo043 commented May 19, 2023 •

edited by oliviertassinari

oliviertassinari May 21, 2023 •

edited

smo043 May 23, 2023 •

edited

smo043 commented May 25, 2023 •

edited

kernelwhisperer May 30, 2023 •

edited

smo043 Jun 1, 2023 •

edited

garronej Jun 24, 2023 •

edited

marcusleeeugene commented Jun 22, 2023 •

edited

c0d3x commented Jun 22, 2023 •

edited

jakubprzybylski commented Aug 1, 2023 •

edited

jakubprzybylski commented Aug 2, 2023 •

edited