ProNextJS
    Loading
    lesson

    Styling Next.js App Router Applications

    Jack HerringtonJack Herrington
    Code

    In this section, we'll explore some different options for how to style a Next.js App Router application. CSS is essential for creating visually appealing and well-performing applications, and choosing the right approach can greatly impact your developer experience.

    Styling Challenges with React Server Components

    The introduction of React Server Components (RSCs) in the App Router has brought some challenges when it comes to styling. RSCs cannot use hooks or context, which means that popular CSS libraries like Emotion and Material UI may not be compatible out of the box. This can be a pain point, as it requires all components styled with such libraries to be client components, limiting the benefits of the App Router.

    Styling Options for the App Router

    Fortunately, the popularity of React and Next.js has led to the development of viable solutions that make CSS easy to use and performant in the App Router. In this section, we'll explore various styling options, including:

    • Built-in CSS Modules
    • Tailwind CSS
    • Meta's Stylex, a build-time CSS system
    • Materialize Pigment CSS
    • Making Emotion work with the App Router

    Practical Demonstration

    To demonstrate these styling options, we'll start with a simple starter layout consisting of a stack of unstyled products in a single column. Throughout these lessons, we'll transform this layout into beautiful, fully responsive cards with rounded edges.

    We'll cover the following aspects of styling:

    • Basic styling
    • Media queries for responsive design (e.g., 3 columns on desktop to 1 column on mobile)
    • Container queries to change card orientation from vertical to horizontal layout
    • Supporting light and dark mode using the user's preferred color scheme

    By the end of this section, you'll have a clear understanding of how to apply each styling technology and be able to decide which one works best for your application.

    Getting Started

    While you can jump around from technology to technology in this section, it's recommended to start with the CSS Modules section first. In the following sections, we'll assume you're already familiar with the CSS and focus more on the mechanics of applying the CSS using each specific technology.

    With that said, let's dig into the world of styling your Next.js App Router application!

    Transcript

    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

    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

    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

    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.

    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

    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

    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

    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

    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

    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

    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.