🔥 NEW Material UI with NextJS 14 & React 18

Free Coding Courses: grepsoft.com/c...
In this video I will show you guys how easy it is to use Material UI with Next JS. With a little bit of setup you can be up and running in no time. Since NextJS 14 uses App router you will learn about integrating mui with it the proper way.
Not only that but we will cover advanced topics like custom material ui theme, how to create custom mui components and how to style a material ui component them using emotion.
We will create a futuristic game menu to demonstrate the concept.
code: github.com/gre...

[@banirezaie1970]

Your tutorial was really helpful, keep the good work up mate!

[@logiccomputer8000]

"use client" is used to declare a boundary between a Server and Client Component modules. This means that by defining a "use client" in a file, all other modules imported into it, including child components, are considered part of the client bundle.
and your ThemeRegistry is a client component which then wrap all children so ??? how it can perform ssr

[@Grepsoft]

Please read this page: nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers you will understand the concept. Basically with the provider rendered at the root, all other Client Components throughout the app will be able to consume this context.
One change I would make to the code is: {children}

[@cuongnguyenchi5097]

Cảm ơn bạn đã làm các video về Material UI và React.

[@Grepsoft]

Can you please translate to English?

[@thienquang3119]

that means tks u for doing a video about Material UI and React@@Grepsoft

[@B8Official]

This video very good.

[@aakashkharabe8561]

Hey can you make it one tutorial on full stack iOS App like UA-cam.
But your content is so awesome.

[@Grepsoft]

I am working on an e-commerce AI chatbot for next video. So hopefully after that. But will take a while to make since it’s a big project.

[@aakashkharabe8561]

​@@Grepsoftsure

[@distractos]

Not sure if its the latest version of nextjs but i cannot use the import "@mui/material" it says module not found even after installation

[@Grepsoft]

Please share your project and I can take a look.

[@muhammadsalman5026]

Best Explanation! how i can use tailwind with mui and nextjs I follow many links but couldn't able to use tailwind everytime errors come any steps or suggestions

[@Grepsoft]

You can use the sx props when using mui. But I can try to come up with an example.

[@muhammadsalman5026]

@@Grepsoft thanks I am looking forward to your example

[@codedusting]

I don't think you need fontsource if you are using next font right?

[@Grepsoft]

Not necessarily

[@SumitSingh-wz3wt]

mateail UI components increase the first Load JS size extremely when we run build command for production. Do you have any solution how can i reduce that.

[@Grepsoft]

Please see these tips for reducing bundle size: mui.com/material-ui/guides/minimizing-bundle-size/

[@CarlosEstebanLopezJaramillo]

Wait how come you can put MUI components in your page.tsx without the 'use client'; is it because I'm using SSR or maybe it has changed?

[@Grepsoft]

You only need “use client” if the component needs to interact with the DOM, use browser features or handle events etc.

[@CarlosEstebanLopezJaramillo]

@@GrepsoftI found later what the issue is, with the `nextConfig.compiler.emotion` set to true, its transforming my pages like if it had emotion code in it, so I had to add to my pages the comment `@jsxImportSource react`, basically my setup messes how I have to use `use client` a bit.

[@CarlosEstebanLopezJaramillo]

@@GrepsoftBasically either I mark which files are client components like usual, or like my current setup I assume 90% of my code will be client components so I have to mark which components are not with `@jsxImportSource react`, which most of the time is the case only for the `page.tsx` or `layout.tsx`.

[@TopDoorInstall]

@@CarlosEstebanLopezJaramilloactually when you bring a component make sure it’s coming from mui and not emotion. Sometimes when you type a component name and VS code show options to import it can bring emotion one.

[@CarlosEstebanLopezJaramillo]

​ @TopDoorInstall Yes it does happen a lot when multiple modules have the same name, now I would be happier if there was an explanation somewhere about how the Next Config `compiler.emotion` worked, and how it affects SSR, RSC and client code, I went and disabled it because having to mark most files without hooks with `@jsxImportSource react` comment was a pain.

[@tiavina-mika]

Thanks. The is no Git repository for this tuto?

[@Grepsoft]

I will upload

[@Grepsoft]

please check description. code uploaded.

[@linuhusainnk]

Not able to use responsiveFont

[@Grepsoft]

Are you getting error?

[@meoconhoccode]

could anyone help me do dark-light mode feature?

[@Grepsoft]

Check out this video for dark mode High Quality Dashboard React and Material-UI
ua-cam.com/video/ziO6fWnNVgM/v-deo.html

[@aymanjaber2585]

This just uses styled-components

[@Grepsoft]

Ok