Next.js Tutorial #2 | Using Material UI React Components with Next.js

Source code:

[dhashdev]

Great video mate, thanks. Small suggestion, createMuiTheme is deprecated now, you can add a note.

[dragonborn]

Great tutorial Kris!! This was informative and easy to follow. Hope to see a part 3 sometime in the future.

[spuploads]

These two video are a great starting point for beginners. Thanks - eagerly awaiting more uploads!

[AlexiLaihoFan]

This video and the one that preceded it were very awesome. I'm terrible with styling and layout and I've been trying to learn it for a while. This was super helpful. Definitely subscribing and can't wait for the rest!

[techsteering]

Thanks Kris. You saved me tons of time!

[yo]

Awesome Kris - Very easy to follow and understand - exactly what I needed. Thank you for your time!

[JavascriptForEverything]

how to solve css loading problem on page refresh:

Warning: Prop `className` did not match. Server:

I am get pretty much overwhelming with that,

Thanks: I solve it at last.

[alexyep]

Pretty good. Thanks...and waiting for the next one

[michaosiatycki]

I like your tutorial very much. When will be next episode?

[dannyarcher]

Any help on how can I add custom CSS styles into the material UI components, as used in regular React components (i.e classes.something)

[Linksaw]

Would love a 3rd! and a 4th and [insert more numbers here]!

[gouveia]

Hi Kris! There's a problem with this approach though. I'm struggling to find a fix. Lets say you are also using any MaterialUI component on your 'Notes'. So when you click in the note, you will still be taken to the Notes page, but this page uses maybe a MUI button or icon in it. When you try to load the Notes page for the first time, Next tries to load the respective file in runtime which brings some slowness when loading the page. In your current video, I could noticed that when you click the note for the first time, the page takes almost 1 second to load, but the subsequent clicks are almost immediately handled. I haven't found a fix for this yet, but when the app is more complex, the loading time becomes a problem...

[yo]

Kris, Very nice tutorial! How would I add the Materia-ui AppBar to the project? Thank you!

[amanraj]

Hi, nice tutorial.

I am having a doubt, in my project can you please help
I am using Material UI with the same starter example file.
But now I need to use getStaticPaths for data fetching but in _documnet.js were using getInitialProps.
How should I change my _document.js file as with getStaticPaths?

[jeanpierredelacruz]

Will there be problems when I deploy the project to Vercel??