I say mostly because there are Pro and Premium paid versions that give you access to some fantastic additional components like data grid. In my opinion, it's totally worth the price!
v6 is coming soon, which includes the Pigment CSS build-time system that will give much better performance on the app router. But, v5 is still worth looking into. They've made a ton of improvements since App Router first released.
MUI uses emotion to handle CSS and doesn't support Tailwind. But, unlike other frameworks that use emotion, there is no flash of unstyled content on load!
Compared to other frameworks the form components are a bit verbose but they're not too bad. Follow along with the video and see how it feels for you.
Transcript
I gotta tell you, when it comes to component frameworks in React, it's hard to not think about Material UI. So we're going to take a look at Material UI v5. And it turns out it's a lot more compatible than it was, at least initially when it comes to the App Writer. If you're not familiar with Material UI, The Google style guide for UI was called Material, and Material UI is a open source framework that follows the Material UI guidelines. It's quite elegant and used in a lot of enterprise shops.
I hesitate to say open source because there is a MuiX option that has some pay for components. It's definitely, I think, worth the money. You get a fantastic data grid as well as other components. Now we are using V5 in this example. V6 is on the horizon and v6 is going to use the pigment CSS build time CSS system which will give us a lot better performance on the next JS app writer.
That being said, I think it's definitely worth looking at v5 because it's a lot better than it was when the app writer first came out. Here are the installation guidelines. They're not specific to the app writer, but they're quite good. Let's go and install into the app writer. I'm going to create a Mui test app.
Not going to use Tailwind. Mui does not use Tailwind. And let's bring that up in our VS Code. All right, the first thing we need to do is install Mui. To do that we're gonna bring in Mui material as well as Emotion.
Emotion is going to be doing the CSS work in this case, as well as the Mui material Next.js library. That's actually what's going to provide some adapter layer between Mui and Next.js. Okay, let's give it a go. Now there is something a little bit different here. We're going to go create a theme file right up here in the source.
The theme file is going to define our themes, so we're going to use a palette of dark in this case. That's going to give us dark mode. We're going to use Roboto for the font family. Other than that, pretty standard theme. Now over in our layout, I'm gonna bring in a few things.
First off, we're gonna get a little bit of globals. First thing we're gonna do is bring in our app router cache provider. So that is a cache provider specific to the app writer. What that's actually gonna do is when we're rendering the page, it's actually going to cache off any CSS that is used by the app, and then it's going to cache that all up and put that out in the head. And then we're gonna bring in our theme provider.
That's gonna give us access to the theme in our client components. We're gonna bring in the CSS baseline. That's gonna give us a nice reset. And of course our theme. All right, down here instead of our body, take that out.
We'll bring in the cache provider as well as the theme provider as well as our baseline and that should do it. I think we need to take out enter here too. Don't need that. There we go. Okay.
Now that that's all set up, we can bring in our blog infrastructure that includes of course blog that has our server actions and types that has our type for our blog entries. And we can start building out the component that's going to show the blog. So over here in app we'll create a new file called blog.tsx. That's going to be our left-hand column that's going to show the blog. This is going to be a React server component because the nice thing about Mui in version 5 is that you can use typography and stack in this case which is a layout component without having to make this a client component which is fantastic.
Let's hit save. Now let's go back over to our page and this too is going to be a React server component. We're gonna bring in container and box, more layout. We're also gonna bring in those get entries from the blog so we can get our blog entries. We can only do that in a React server component since that getEntries is async.
Then we're gonna use the container to set up our frame. We're gonna use box to set up our flexbox. Now notice we have this Sx thing. SX is actually kind of a superset of style. So you use SX instead of style and SX supports things like in this case M, M giving us a margin of four.
I think that's like a one rem around everything. We could use a P in there too. That's fine for padding. And then we're gonna use that SX for our two 50% column layouts. SX also supports things like breakpoints.
So I could say in this case, a breakpoint at medium of four or something like that. It's quite nice actually. SX is really something I used it a lot in a previous job and I was quite impressed with it. Let's give it a go. All right, that looks really good.
I'm hitting refresh. I'm not seeing any kind of flash of unstyled content. Our React server component is able to be a React server component and still use things like the layout components. Our blog component is also a React server component and it's able to use typography without having to access that content. Really nice.
All right, let's go and build out our form and try that out. Material UI does not have a built-in forms vendor, so we'll use React QuickForm. All right, let's go create our blog form. So of course this is gonna be a client component since it's interactive. We're gonna bring in useForm and controller from React QuickForm and then a bevy of different components.
We'll bring in Stack for layout, we'll bring in then UI components, FormControl, InputLabel, TextField, and Button to support the form. Our React QuickForm stuff is going to be the same as it is in every other React QuickForm example. Now inside our JSX we're going to use a standard form tag that we're going to use that stack layout to let lay out everything vertically in this case and we'll use the React Hook form controller to then invoke form control input label text field and all that. Again it's just a little wordy but I think it's fine it's fine. Okay We got another controller for the content and then another controller for the button.
All right, let's give it a go. That means going over to our page and bringing in our blog form and then dropping it into our layout. Okay, it looks pretty good. A little bit of overlap there, not super happy about that. I'm sure that's something on my part.
Hit submit, and there you go. Beautiful. So if you're looking for enterprise-grade components for your enterprise-grade Next.js App Writer application, Material UI is a good place to go there. You've got nice, off-the-shelf, free components. It works well with the App Writer as you can see, it works well with React Server components as well as Client components.
Plus you've got that MuiX option if you add a little bit more money into it and support that project and then you get a really nice data grade that's definitely worth having a look at.
I gotta tell you, when it comes to component frameworks in React, it's hard to not think about Material UI. So we're going to take a look at Material UI v5. And it turns out it's a lot more compatible than it was, at least initially when it comes to the App Writer. If you're not familiar with Material UI, The Google style guide for UI was called Material, and Material UI is a open source framework that follows the Material UI guidelines. It's quite elegant and used in a lot of enterprise shops.
I hesitate to say open source because there is a MuiX option that has some pay for components. It's definitely, I think, worth the money. You get a fantastic data grid as well as other components. Now we are using V5 in this example. V6 is on the horizon and v6 is going to use the pigment CSS build time CSS system which will give us a lot better performance on the next JS app writer.
That being said, I think it's definitely worth looking at v5 because it's a lot better than it was when the app writer first came out. Here are the installation guidelines. They're not specific to the app writer, but they're quite good. Let's go and install into the app writer. I'm going to create a Mui test app.
Not going to use Tailwind. Mui does not use Tailwind. And let's bring that up in our VS Code. All right, the first thing we need to do is install Mui. To do that we're gonna bring in Mui material as well as Emotion.
Emotion is going to be doing the CSS work in this case, as well as the Mui material Next.js library. That's actually what's going to provide some adapter layer between Mui and Next.js. Okay, let's give it a go. Now there is something a little bit different here. We're going to go create a theme file right up here in the source.
The theme file is going to define our themes, so we're going to use a palette of dark in this case. That's going to give us dark mode. We're going to use Roboto for the font family. Other than that, pretty standard theme. Now over in our layout, I'm gonna bring in a few things.
First off, we're gonna get a little bit of globals. First thing we're gonna do is bring in our app router cache provider. So that is a cache provider specific to the app writer. What that's actually gonna do is when we're rendering the page, it's actually going to cache off any CSS that is used by the app, and then it's going to cache that all up and put that out in the head. And then we're gonna bring in our theme provider.
That's gonna give us access to the theme in our client components. We're gonna bring in the CSS baseline. That's gonna give us a nice reset. And of course our theme. All right, down here instead of our body, take that out.
We'll bring in the cache provider as well as the theme provider as well as our baseline and that should do it. I think we need to take out enter here too. Don't need that. There we go. Okay.
Now that that's all set up, we can bring in our blog infrastructure that includes of course blog that has our server actions and types that has our type for our blog entries. And we can start building out the component that's going to show the blog. So over here in app we'll create a new file called blog.tsx. That's going to be our left-hand column that's going to show the blog. This is going to be a React server component because the nice thing about Mui in version 5 is that you can use typography and stack in this case which is a layout component without having to make this a client component which is fantastic.
Let's hit save. Now let's go back over to our page and this too is going to be a React server component. We're gonna bring in container and box, more layout. We're also gonna bring in those get entries from the blog so we can get our blog entries. We can only do that in a React server component since that getEntries is async.
Then we're gonna use the container to set up our frame. We're gonna use box to set up our flexbox. Now notice we have this Sx thing. SX is actually kind of a superset of style. So you use SX instead of style and SX supports things like in this case M, M giving us a margin of four.
I think that's like a one rem around everything. We could use a P in there too. That's fine for padding. And then we're gonna use that SX for our two 50% column layouts. SX also supports things like breakpoints.
So I could say in this case, a breakpoint at medium of four or something like that. It's quite nice actually. SX is really something I used it a lot in a previous job and I was quite impressed with it. Let's give it a go. All right, that looks really good.
I'm hitting refresh. I'm not seeing any kind of flash of unstyled content. Our React server component is able to be a React server component and still use things like the layout components. Our blog component is also a React server component and it's able to use typography without having to access that content. Really nice.
All right, let's go and build out our form and try that out. Material UI does not have a built-in forms vendor, so we'll use React QuickForm. All right, let's go create our blog form. So of course this is gonna be a client component since it's interactive. We're gonna bring in useForm and controller from React QuickForm and then a bevy of different components.
We'll bring in Stack for layout, we'll bring in then UI components, FormControl, InputLabel, TextField, and Button to support the form. Our React QuickForm stuff is going to be the same as it is in every other React QuickForm example. Now inside our JSX we're going to use a standard form tag that we're going to use that stack layout to let lay out everything vertically in this case and we'll use the React Hook form controller to then invoke form control input label text field and all that. Again it's just a little wordy but I think it's fine it's fine. Okay We got another controller for the content and then another controller for the button.
All right, let's give it a go. That means going over to our page and bringing in our blog form and then dropping it into our layout. Okay, it looks pretty good. A little bit of overlap there, not super happy about that. I'm sure that's something on my part.
Hit submit, and there you go. Beautiful. So if you're looking for enterprise-grade components for your enterprise-grade Next.js App Writer application, Material UI is a good place to go there. You've got nice, off-the-shelf, free components. It works well with the App Writer as you can see, it works well with React Server components as well as Client components.
Plus you've got that MuiX option if you add a little bit more money into it and support that project and then you get a really nice data grade that's definitely worth having a look at.
Jack Herrington