Styling

We have already covered styling in React in our previous lecture, let's zero in on the specifics of CSS in Next.js, mainly where we can import different types of styles. This is a crucial aspect for organising our blog application effectively.

  • CSS Modules: These are designed for component-level styling and should be imported directly into the component where they're used. The typical pattern is to place the .module.css file (or .module.scss for Sass) in the same directory as the component itself. This keeps the styles closely tied to the component, making our codebase easier to manage.
  • Global CSS: Global styles, as the name suggests, apply to the entire application. Therefore, they need to be imported into a component that's rendered on every page. The ideal place for this is your root layout component, usually app/layout.tsx. Importing global CSS here ensures that these styles are available throughout your blog.
  • Tailwind CSS: With Tailwind, you'll typically have a globals.css file (or similar) where you include the @tailwinddirectives. This file, containing your Tailwind setup, is then imported into your root layout (app/layout.tsx), just like global CSS. This makes the Tailwind utilities available across your entire application.
  • External Stylesheets: If you're using CSS from an external package (like Bootstrap), you can import it directly into any component where you need those styles. Often, this is done in the root layout (app/layout.tsx) if the external styles are intended to be global, or within a specific component if the styles are only needed there. Just remember, you must import the stylesheet directly from the npm package or a colocated file; you cannot use <link rel="stylesheet" />.
  • Sass: Sass files, whether they are module-specific (.module.scss) or global (.scss), follow the same import rules as regular CSS files. Module-specific Sass goes into the corresponding component's directory and is imported there, while global Sass can be imported into the root layout.

Key takeaway: The location of your CSS import depends on the scope of the styles. Component-specific styles (CSS Modules and sometimes external stylesheets) are imported into the components themselves. Global styles (global CSS, Tailwind setup, or global Sass) are imported into the root layout to ensure they're applied everywhere. Keeping this pattern consistent will make our blog's styling much more maintainable.

Slides

Alright, let's talk CSS in Next.js, specifically focusing on where we import our styles. A well-structured CSS setup is absolutely essential for keeping our blog application maintainable as it grows.

The location of our CSS import directly determines the scope of those styles – whether they apply to a single component or the entire application. It's all about keeping things organized and preventing style conflicts.

First up: CSS Modules. These are designed for component-level styling.

We place the .module.css file (or .module.scss for Sass) right next to the component file itself. This establishes a clear connection between the component and its styles.

And the import? It happens directly within the component file. This localizes the styles, preventing them from accidentally affecting other parts of the application. It's like each component having its own self-contained style sheet.

Here's a typical example. We import styles from the corresponding module css file. Next.js handles the rest, ensuring the styles are only scoped to this component.

Global CSS applies to application-wide styles and is accessible in every component.

We usually create a globals.css file (or similar) to house these styles.

The crucial step is to import this globals css file into our root layout component, usually app/layout tsx. This ensures that the global styles are loaded on every blog page. You can further import styles from any package stored in the node modules.

A simple import statement in our root layout makes these styles globally accessible. This is the designated spot for styles that should be consistent across all pages.

Let's explore some additional styling options.

We've talked about Tailwind, but to reiterate, it's a utility-first CSS framework. Instead of writing custom CSS, you apply pre-defined utility classes directly in your HTML. Think classes like text-3xl font-bold for large, bold text. It's quick for development but can sometimes lead to long class names.

CSS-in-JS libraries let you write CSS inside your JavaScript components. While convenient, we generally recommend CSS Modules or Tailwind for our blog. CSS-in-JS can introduce performance considerations, especially with React Server Components, and might not be the most efficient solution in the long run.

CSS frameworks like Bootstrap and Material UI provide pre-built components and styling. They can speed up development but might add extra weight to your project if you only use a small portion of their features. Import them as external stylesheets.