Chapter 6: CSS and Built-In Styling Methods

What makes the difference between a great and a bad UI? Some people may answer "features!" and others may say "speed of interaction!" but I would personally define it as a good combination of a great design and ease of use. Your web application could potentially be the most powerful app in the world. Still, it would be difficult for your users to make it work as intended if the UI is not well designed and implemented. So here comes the concept of styling.

We all know what CSS is: a basic set of rules telling the browser how to render HTML content graphically. While this seems an easy task, the CSS ecosystem has evolved a lot during recent years, and so has all the tooling that helps developers build great user interfaces with modular, lightweight, and performant CSS rules.

In this chapter, we will look at several approaches to writing CSS rules. That will pave the way to Chapter 7, Using UI Frameworks, where we&apos...

Technical requirements

To run the code examples in this chapter, you need to have both Node.js and npm installed on your local machine.

If you prefer, you can use an online IDE such as https://repl.it or https://codesandbox.io; they both support Next.js, and you don't need to install any dependency on your computer. As for the other chapters, you can find the code base for this chapter on GitHub: https://github.com/PacktPublishing/Real-World-Next.js.

Exploring and using Styled JSX

In this section, we will explore Styled JSX, a built-in styling mechanism provided by default by Next.js.

If you don't want to learn a new styling language such as SASS or LESS and want to integrate a bit of JavaScript into your CSS rules, you might be interested in Styled JSX. It's a CSS-in-JS library (meaning that we can use JavaScript to write CSS properties) created by Vercel, the company behind Next.js, that allows you to write CSS rules and classes that are scoped to a specific component.

Let me explain this concept with an easy example. Let's say that we have a Button component, and we want to style it using Styled JSX:

export default function Button(props) {
  return (
    <>
      <button className="button">{props.children}</button>
      <style jsx>{`
       &...

CSS modules

In the previous section, we saw a CSS-in-JS library, meaning that we had to write our CSS definitions in JavaScript, transforming those styling rules to plain CSS at runtime or compile time, depending on which library we choose and how we configure it.

While I personally like the CSS-in-JS approach, I eventually recognized that it has some significant drawbacks to consider when choosing the styling method for a new Next.js app.

Many CSS-in-JS libraries don't provide good IDE/code editor support, making things way harder for developers (no syntax highlighting, autocomplete, linting, and so on). Also, using CSS-in-JS forces you to adopt more and more dependencies, making your application bundle bigger and slower.

Talking about performance, here's another big drawback: even if we pre-generate CSS rules on the server side, we would need to re-generate them after React hydration on the client side. That adds a high runtime cost, making the web application...

Integrating SASS with Next.js

SASS is probably one of the most loved and used CSS preprocessors out there, and Next.js did an excellent job making it possible to integrate it with ease. In fact, just like CSS modules and Styled JSX, SASS is supported out of the box; we just need to install the sass npm package inside of our Next.js project, and we're ready to go:

yarn add sass

At this point, you can start using CSS modules with SASS and SCSS syntax, just like we did in the previous section.

Let's look at a simple example. If we open the pages/index.js file from the previous section, we can just change the CSS import to look as follows:

import styles from '../styles/Home.module.scss';
export default function Home() {
  return (
    <div className={styles.homepage}>
      <h1> Welcome to the CSS Modules example </h1>
    </div>
  );
}

Now...

Summary

The CSS ecosystem has evolved a lot in recent years, and the Next.js team keeps the framework up to date with the most modern, performant, and modular solutions for writing CSS styles.

In this chapter, we've looked at three different built-in solutions, and of course, any one of them has some trade-offs compared with the others.

Styled JSX, for instance, is definitely one of the easiest ways of writing CSS rules. You can interoperate with JavaScript, dynamically change some CSS rules and properties depending on the user actions, and so on, but it also has some significant drawbacks. Like most CSS-in-JS libraries, Styled JSX first renders on the server side but re-renders the whole generated CSS on the client right after React hydration occurs. That adds some runtime cost to your application, making your application less performant and more challenging to scale. Also, it makes it impossible for the browser to cache your CSS rules, as they get regenerated on every...