Next.js 13 App Router And Mui v5 Setup Tutorial

This is a video showing how to set up MUI v5 with the new App Router inside Next.js 13.
Source Code
github.com/Ale...
Pull Request where I got help
github.com/mui...

[@mehmetbagci3447]

Hello. Thanks for the tutorial. This is the only working tutorial about app router with mui for now on youtube. I've been searching for a while.

[@SimulShiftWeb]

Awesome! Glad to hear it

[@galaxy1066]

mehmet hocam bir turk toplulugu var mi nextjs icin

[@mehmetbagci3447]

@@galaxy1066 selam. Benim takip ettiğim yok. Ama güzel türkçe içerikler görmüştüm

[@FernandoVera20]

Thank you! You're video was really helpful to me. Just wanted to encourage you to keep doing this type of video. You're really good at explaining and have a great understanding of the framework.

[@SimulShiftWeb]

Hey thanks for the support! Glad I could help. I’ll keep it up 😎

[@adrian333dev]

Thanks soo much, it was really helpful, for last 2 hours I've been searching google to find a solution

[@galaxy1066]

thank you dude, you are only porson who uploaded a video about app router and mui.

[@MubashirullahD]

I think they added a new section in their docs (/material-ui/integrations/nextjs/) can you have a look and let us know if the content in this video should be followed or that suffices now?

[@ProCoder777]

Hello! Thanks for the video, it's very helpful! I have a question: the Material UI manual says to use the 'use client' directive in every module that uses material components. If I use your method, can I not 'use client' so as not to lose server-side rendering?

[@CardoPixelado]

Please make a tutorial on how to implement automatic dark mode (detects browser config) and add with a switch or menu to override the automatic dark mode (use a user preference saved on the page)

[@MubashirullahD]

Thanks for the extra tips on optimizing, could you explain it in more detail. I understand the minimizing, (I expected it would do that by default) What else is happening

[@frankylopez4477]

Thank you, I was exactly looking for this!

[@brandophiri3618]

thank you for this. you deserve my subscription

[@TheAroma-u6x]

Hey thanks for help.. but i want to know that how your vs code is suggesting you codes before writing it ?

[@SimulShiftWeb]

Sure, it’s an extension called GitHub Copilot

[@TheAroma-u6x]

@@SimulShiftWeb it's paid right ?

[@SimulShiftWeb]

@@TheAroma-u6x yeah I got a student account though hehe

[@oluwatobipeter2206]

Thank you for this, it was really helpful

[@danik1341]

I've been searching for a way to preload/prerender the MUI components, as the styling of each one of them does not apply on the loading of the page but only after a few secs. Used to be a solution by creating a _document file and adding a removeChild(jssStyles) to your app file. Will this tutorial help me with that?

[@nikolaristoski2218]

Hey, great tutorial! Thanks for sharing your knowledge. I have a question regarding the code suggestions. Could you please let me know which extension you are using for that purpose?

[@SimulShiftWeb]

Github copilot. It's an extension by microsoft

[@rroba13]

Es igual con el nuevo next js 14?

[@mohammadesmaielemadi8480]

Doesn't it make all the nextjs app to be CSR?

[@increase-chrisalaede4813]

Please when I add the jsx import to use css on emotion, it gives me context error How can I fix this?

[@laughAFrame]

Where did you NPM INSTALL MUI??

[@MarcelRezende]

Thanks a lot man, awesome video and your teaching is great. I have one question, you said that tailwind doesn't work well with MUI. I tried here and kinda worked. The main issue was that the base tailwind styles were overwriting the MUI styles and I just didn't imported it. But still it's just a test, don't know what impact this will have in a actual project. Can you tell me why they don't mix well together?

[@lardosian]

I would just go with one or the other, using both together sounds like overkill, I have enjoyed using MUI in the past, good documentation and can pick up some nice React tricks, it doesn't seem popular in tutorials for some reason, Tailwind seems to be the cool kid on the block!!

[@marcopieterse]

Thanks! Out of box solution

[@mohitkaushik1658]

Hi, new to this, will this make everything render on client side now as we are wrapping all inside ThemeRegistry ?

[@mhmdiamd]

Hii!, Thanks for the video, it's so helpful for me. can you create some project using this tech? i think from there i can learn more deep about mui componenet using next app router.

[@JustinaParma]

Thanks!

[@SaurabhSrivastava-i1q]

EmotionCache needs to be included in just simple React App as well?

[@SaurabhSrivastava-i1q]

@@SimulShiftWeb Thanks

[@mrsh1bz]

Can't find the full link to the source code. Can you please share it ?

[@SimulShiftWeb]

Oops! the link in the description is cut. Here’s the link full link github.com/SimulShift/Next13-App-Router-And-Mui5-Example

[@artemzhuravlenko9955]

It works!

[@nitigyajoshi4658]

You were 1 month late bro. The company I work for decided to build the product with page router instead of app just because there was no docs for integrationg mui v5.

[@SimulShiftWeb]

Lool rip

[@saurabhu6458]

Thank you so much❤

[@SimulShiftWeb]

You're welcome 😊

[@raphael.portela]

i cant find your github

[@SimulShiftWeb]

sorry had to verify my youtube account to allow me to post links. Should be working now

[@LucasAlves-nj7rv]

Very fine !!!

[@mohamedsaleemmohamedsarjoo6832]

Hey, great tutorial! but im getting error while using JSX

[@SimulShiftWeb]

We’re you able to figure it out? What is the error?

[@antu_saha]

It's not working for the Server side Rendering. We need to use the "use client" directive for every component where we use mui component. So what's the purpose of this video? Just random installation? Showing how to install MUI?

[@soundnimation]

thank you

[@alexpena9927]

No problem!

[@luisberrezueta5883]

Thanks bro

[@SimulShiftWeb]

Any time 😤

[@mizit8864]

Please make a tutorial on how to implement automatic dark mode (detects browser config) and add with a switch or menu to override the automatic dark mode (use a user preference saved on the page)