Another far easier way to do styling for your Next.js App Writer app is to use a off-the-shelf component library, something like ShadCN or Mantine or Material UI. There are lots of different choices. So when I talk about component libraries, what I mean here is libraries that give you components like input, button, select, the kind of thing that we use to build basic apps. I don't mean things like charting. There are libraries for that, and we can go into that at some point in this course, but right now we're going to stick with component libraries for applications.
And we're going to take a look at a bunch of them that are fully compatible with the App Writer. Some have some drawbacks, they need client components, Others are purely just compatible with React Server components. You get to find out in every single one of these how they perform. So what we're going to do is with each of these libraries, we are going to build this simple blog application. Up in the upper left-hand corner, we get the current list of articles in our example blog.
What this shows us is how we do typography and how we handle just rendering out of a React Server component. Then up in the upper right-hand side, we see the form where we can add new entries to our blog. That tells us a couple things. It gives us how do they work with client components, and how do they handle things like forms and inputs and buttons, how the components basically work. And then the page overall demonstrates how to do a two column layout.
So you get to see a little bit of how the component library does layout, as well as dark mode for the dark mode display. Now in this first video where I show off ShazCN, we're gonna go in depth in how the application itself works. So I definitely think you should watch that one all the way through. After that, just go pick a framework that might be interesting to you that you've heard about, jump in, and we'll talk mostly about how to install it and how to use components, but we're not gonna go as in depth as we are in the ShadCN example. So again, be sure to watch the ShadCN example first before digging into any of the other ones.
Or if ShadCN is what you want, then there you go, you're done. All right, I'll see you over in the chat to see an example.
lesson
Introduction to Component Libraries
Jack Herrington
One of the easiest ways to put together a nice looking app is to use an off-the-shelf component library.
There's a lot of options! And in the next few videos we'll be building the same example blog app using various component libraries that are compatible with the app router. The blog example works well because we'll get the full picture of the library's features such as: forms, typography, RSC rendering, layout, dark-mode, and buttons.
After this video, check the next video on shadcn. It's where we'll go the most in depth on the application. After that, it's up to you. My recommendation is to pick whatever component library you find interesting!
We'll be covering:
shadcn
Wedges
Mantine
Ant Design
Boostrap
Chakra
Material UI
Next UI
Park UI
Transcript
Another far easier way to do styling for your Next.js App Writer app is to use a off-the-shelf component library, something like ShadCN or Mantine or Material UI. There are lots of different choices. So when I talk about component libraries, what I mean here is libraries that give you components like input, button, select, the kind of thing that we use to build basic apps. I don't mean things like charting. There are libraries for that, and we can go into that at some point in this course, but right now we're going to stick with component libraries for applications.
And we're going to take a look at a bunch of them that are fully compatible with the App Writer. Some have some drawbacks, they need client components, Others are purely just compatible with React Server components. You get to find out in every single one of these how they perform. So what we're going to do is with each of these libraries, we are going to build this simple blog application. Up in the upper left-hand corner, we get the current list of articles in our example blog.
What this shows us is how we do typography and how we handle just rendering out of a React Server component. Then up in the upper right-hand side, we see the form where we can add new entries to our blog. That tells us a couple things. It gives us how do they work with client components, and how do they handle things like forms and inputs and buttons, how the components basically work. And then the page overall demonstrates how to do a two column layout.
So you get to see a little bit of how the component library does layout, as well as dark mode for the dark mode display. Now in this first video where I show off ShazCN, we're gonna go in depth in how the application itself works. So I definitely think you should watch that one all the way through. After that, just go pick a framework that might be interesting to you that you've heard about, jump in, and we'll talk mostly about how to install it and how to use components, but we're not gonna go as in depth as we are in the ShadCN example. So again, be sure to watch the ShadCN example first before digging into any of the other ones.
Or if ShadCN is what you want, then there you go, you're done. All right, I'll see you over in the chat to see an example.
Jack Herrington