How to Use Material UI in Next.js | Next.js 14

in this video we'll see how to use uh material U components in your next year's project that first you need to create an xjs project here I already have an xjs project up and running this is based on page routers as you can see in the FES explorers you can see that I have an index page already inside inside my pages folder which is pretty much empty doesn't really have anything what I'll do is I'll go to my project I'll copy this NP install command from the material UI website this is to install the required modules for material UI I'll go to my next project I'll paste this thing I'll do minus minus save to register this data in my package.json file so once this thing is installed we should be able to use the material UI components in our next year's project so now as you can see we just installed all the material UI modules here so now to check whether it's working or not I'll straight away go to the material UI component list you can find it here go to components there we can have any of the components so I'll take list for the time being I'll go to this nested list I'll go to show code we just check if this thing is working or not what I'll do is I'll simply copy the whole thing and pasted here so here you can see that we have some dependencies which are not yet solved as you can see this particular layout of this particular example uses a couple of uh material components which are already good and fine like collapse component is being used list item text etc etc these since we already installed our material module this got imported directly now the icon material this is another package for showing icons we have a package for the thing I'll just go to the package I'll copy the command for the thing and I install the thing in my project I just save it to the package. Cason also once this package is installed these icon should be good to go as you can see we just uh installed mui icons material icons and these are good to go this errors got resolved and all these components that we're using here are on material UI components so if it runs successfully we should be able to see something like this the screen I'll just save changes it's already saved I'll run the project now if you reload the page you should be able to see UI components the material UI components so I hope you find this video useful do let me know your thoughts in the comments below thanks for watching

Channel: CodeHandbook

Views: 1,572

Keywords: how to use material ui in nextjs

Id: E5351Kfcneg

Length: 3min 12sec (192 seconds)

Published: Sun Jan 28 2024