Styling Next.js App Router Applications

00:00 1 of the first and potentially the most important decisions that you're going to make when you're constructing your App Writer application is how to style it, how to manage your CSS. Crazy, right? I mean, a lot of us just take it for granted. But you can't have a good or even decent looking application without CSS. There are a lot of

00:18 options in the CSS space for App Writer applications. So picking the right 1 that gives you the developer experience that you're looking for, can mean the difference between applications that's fun to develop in and performs well, and 1 that's a nightmare. It's not always easy to make the right decision when it comes to styling. There are a lot of choices to

00:36 choose from. On top of that, what you might want to use might not be compatible with the App Writer because of React Server components or RSCs. Remember, RSCs can't use hooks or context. There are a lot of CSS libraries like Emotion in particular, that use context to manage the theme

00:54 of the application. Even if you don't customize the theme, you're still going to be using context. So all the components that are styled in that way, need to be client components and that's a pain, honestly. It's not going to make the best use of the App Writer. This is a problem that's tripped up folks that wanted to use Material UI in particular.

01:14 It's a very popular UI framework with the App Router. RSCs flipped the apple cart on us and made us rethink the core mechanics like how to style your applications. Thankfully, React is really popular and Next.js is also really popular. So In pretty short order, we have some very viable

01:32 solutions that made CSS as easy to use as before, maybe even a little easier, and even perhaps more performant. So in this section of the course, we are going to take a look at a bunch of different styling options. I'll show you how to work with built-in CSS modules, how to use Tailwind, how to use BuildTime CSS systems like MetaStylax, and

01:51 materialize Pigment CSS, and even how to make Emotion work if that's what you wanted to do. As this course is a practical course, to demonstrate all of this, we are going to take a simple starter layout, that's just a stack of all these products and 1 big unstyled column, and we're going to turn

02:10 that into these beautiful cards with rounded edges that are fully responsive. Not only do we go from 3 columns on desktop to 1 column on mobile using media queries, but we also change the orientation of the cards themselves from a vertical layout to a horizontal layout using

02:27 container queries. And We also support light and dark mode using a customer's preferred color scheme. So we'll learn how to support all of these things, basic styling, meeting container queries, and color schemes using each of these technologies, and you'll get to decide for yourself which 1 works for your application the

02:46 best. Now, before we dig in, you can jump around from technology to technology in this section of the course, but I do recommend that you start with the CSS module section first, because in that tutorial, we'll go through step-by-step how the CSS is written and how it works. So that in the sections that follow, we'll just assume that you

03:05 know that already and we'll be talking more about the mechanics of applying the CSS using that particular technology. All right, let's dig into all of these different options and how to style your Next.js App Writer application. Next.js AppWriter application.

00:00 1 of the first and potentially the most important decisions that you're going to make when you're constructing your App Writer application is how to style it, how to manage your CSS. Crazy, right? I mean, a lot of us just take it for granted. But you can't have a good or even decent looking application without CSS. There are a lot of

00:18 options in the CSS space for App Writer applications. So picking the right 1 that gives you the developer experience that you're looking for, can mean the difference between applications that's fun to develop in and performs well, and 1 that's a nightmare. It's not always easy to make the right decision when it comes to styling. There are a lot of choices to

00:36 choose from. On top of that, what you might want to use might not be compatible with the App Writer because of React Server components or RSCs. Remember, RSCs can't use hooks or context. There are a lot of CSS libraries like Emotion in particular, that use context to manage the theme

00:54 of the application. Even if you don't customize the theme, you're still going to be using context. So all the components that are styled in that way, need to be client components and that's a pain, honestly. It's not going to make the best use of the App Writer. This is a problem that's tripped up folks that wanted to use Material UI in particular.

01:14 It's a very popular UI framework with the App Router. RSCs flipped the apple cart on us and made us rethink the core mechanics like how to style your applications. Thankfully, React is really popular and Next.js is also really popular. So In pretty short order, we have some very viable

01:32 solutions that made CSS as easy to use as before, maybe even a little easier, and even perhaps more performant. So in this section of the course, we are going to take a look at a bunch of different styling options. I'll show you how to work with built-in CSS modules, how to use Tailwind, how to use BuildTime CSS systems like MetaStylax, and

01:51 materialize Pigment CSS, and even how to make Emotion work if that's what you wanted to do. As this course is a practical course, to demonstrate all of this, we are going to take a simple starter layout, that's just a stack of all these products and 1 big unstyled column, and we're going to turn

02:10 that into these beautiful cards with rounded edges that are fully responsive. Not only do we go from 3 columns on desktop to 1 column on mobile using media queries, but we also change the orientation of the cards themselves from a vertical layout to a horizontal layout using

02:27 container queries. And We also support light and dark mode using a customer's preferred color scheme. So we'll learn how to support all of these things, basic styling, meeting container queries, and color schemes using each of these technologies, and you'll get to decide for yourself which 1 works for your application the

02:46 best. Now, before we dig in, you can jump around from technology to technology in this section of the course, but I do recommend that you start with the CSS module section first, because in that tutorial, we'll go through step-by-step how the CSS is written and how it works. So that in the sections that follow, we'll just assume that you

03:05 know that already and we'll be talking more about the mechanics of applying the CSS using that particular technology. All right, let's dig into all of these different options and how to style your Next.js App Writer application. Next.js AppWriter application.