nextjs
  1. nextjs-styling-in-nextjs
PreviousNext

Next.js Styling in Next.js

Next.js is a popular React-based framework for building server-side rendered (SSR) and static web applications. It offers an efficient, optimized and easy-to-use solution for rendering React components on the server side, while the styling can be added using different techniques. In this article, we will discuss the various ways to add styling to Next.js applications.

Syntax

There are several ways to add styling to your Next.js application. Here are three ways:

  1. Using built-in CSS support:

    • Create a CSS file in the top level 'public' folder and link it to pages using <link> tags.

  2. Using CSS modules:

    • Create a CSS file and name it with .module.css suffix.
    • Import the CSS file in the component.
    • Apply the styles using the CSS class names as an object.

  3. Using CSS-in-JS:

    • Install a CSS-in-JS library like styled-components or emotion.
    • Define CSS styles using JavaScript.
    • Apply the CSS styles to your components.

Example

Example 1: Using built-in CSS support

/public/styles.css

h1 {
  color: blue;
  font-size: 36px;
}

/pages/index.js

import Head from 'next/head'

export default function Home() {
  return (
    <>
      <Head>
        <title>Homepage</title>
        <link rel="stylesheet" href="/styles.css" />
      </Head>
      <h1>Welcome to my Next.js site</h1>
      <p>A simple example to demonstrate built-in CSS support</p>
    </>
  )
}

Example 2: Using CSS modules

/components/Header.module.css

.header {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 24px;
}

/components/Header.js

import styles from './Header.module.css'

export default function Header() {
  return (
    <header className={styles.header}>
      <h1>My Next.js Site</h1>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  )
}

Example 3: Using CSS-in-JS (styled-components)

/components/Heading.js

import styled from 'styled-components'

const Heading1 = styled.h1`
  color: blue;
  font-size: 36px;
  margin-top: 50px;
`

export default function Heading() {
  return (
    <Heading1>Welcome to my Next.js site</Heading1>
  )
}

Output

In all these examples, you will see the styles being applied when you go to the respective pages in the browser.

Explanation

Next.js provides multiple ways to add styling to your web application. The three most common ways of styling your Next.js application are using built-in CSS support, CSS modules, and CSS-in-JS.

Using built-in CSS support is the easiest way to add CSS to the application. In this method, you need to create a CSS file in the top-level 'public' folder and link it to the pages using <link> tags.

With CSS modules, each CSS file is scoped locally to the component where it is imported, this prevents name collision and allows for better encapsulation. To use CSS modules, you just simply add a .module.css extension to the name of the CSS file, import it, and apply the styles to your components as an object.

CSS-in-JS allows you to write CSS styles in JavaScript. It is helpful especially for managing dynamic styling and applying specific styles based on components' logic. Next.js supports all major CSS-in-JS libraries like styled-components, emotion, and others.

Use

Understanding the different ways to add styling to your Next.js application gives you the flexibility and freedom to choose the most efficient and suitable option depending on your project requirements. When deciding on a styling approach, consider factors such as performance, component isolation, and the ability to write maintainable and scalable code.

Important Points

  • Next.js provides built-in support for CSS.
  • CSS modules allow for better encapsulation and prevent naming collisions.
  • CSS-in-JS lets you write CSS styles in JS based on components' logic.
  • You can use different CSS-in-JS libraries with Next.js like styled-components, emotion and others.
  • Choose the styling approach that is suitable for your Next.js project based on specific needs.

Summary

Styling your applications is crucial and Next.js provides you with different ways to add styles through built-in CSS support, CSS modules, and CSS-in-JS. This article guided you through examples to give you a better understanding of how to use each method. Understanding the differences between these options, as well as their advantages and disadvantages, helps you choose the appropriate styling method for your needs and make a well-informed decision going forward.

RenderingStyling Approaches
Published on: