Mastering Next.js Styling: A Comprehensive Guide

Next.js has become a powerful framework for building fast and scalable web applications. When it comes to styling your Next.js applications, you have various options at your disposal.

This blog will delve into the intricacies of Next.js styling, covering everything from CSS Modules to Tailwind, and ensuring you get the best out of your Next.js projects.

Setting Up Your Project

Before diving into styling, you need to initialize your project.

Copy
npx create-next-app@latest

This command will create a new Next.js project structure, setting up the basic configuration and file structure.

Installing Dependencies

Next.js works seamlessly with many CSS frameworks and tools. To install the necessary packages, run the following npm commands:

Copy
npm install --save-dev tailwindcss postcss autoprefixer
npx tailwindcss init -p

This install process sets up Tailwind CSS, which is a utility-first CSS framework.

Adding Global CSS

For global styles, Next.js supports the use of a global CSS file. You can include a global css file by importing it into your _app.js or _app.tsx file.

Copy
// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

This setup ensures your global CSS file is applied across all pages.

CSS Modules

For component-specific styling, CSS Modules offer a great way to encapsulate styles. CSS Modules allow you to scope CSS locally to the component, preventing naming conflicts.

Create a CSS module file and import it into your component:

Copy
/* styles/Home.module.css */
.container {
  padding: 0 2rem;
}

Copy
// pages/index.js
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to Next.js!</h1>
    </div>
  )
}

Using CSS Modules, the styles are scoped to the component, avoiding any conflicts.

Tailwind CSS

Integrating Tailwind CSS with Next.js is straightforward and enhances the styling process. Tailwind provides utility classes to style your components efficiently.

Configure Tailwind

Ensure your tailwind config file is set up correctly:

Copy
// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration ensures Tailwind scans all your js, ts, jsx, tsx files for class names.

Using Tailwind

You can now add Tailwind classes directly in your JSX:

Copy
// pages/index.js
export default function Home() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <h1 className="text-4xl font-bold">Hello, Next.js with Tailwind!</h1>
    </div>
  )
}

The utility-first approach of Tailwind makes it easy to create responsive designs without writing custom CSS.

Handling CSS in JS

Next.js supports various CSS-in-JS solutions, including styled-components and emotion. These libraries allow you to write CSS directly in your JavaScript or TypeScript files.

Styled-Components Example

First, install styled-components:

Next, configure Babel to use the styled-components plugin:

You can now use styled-components in your Next.js components:

This approach allows you to create and manage component-level styles effectively.

Emotion Example

Emotion is another popular CSS-in-JS library that works well with Next.js. To get started, install the necessary packages:

You can now use Emotion to style your components:

Adding Custom Fonts

Adding custom fonts in Next.js can enhance the look and feel of your application. You can include web fonts by updating your global CSS or using the next/font package.

Including Fonts in Global CSS

To include custom fonts, update your global CSS:

Using next/font

Alternatively, you can use the next/font package for a more efficient way to load fonts:

Then use it in your _app.js:

This method ensures your fonts are optimized and loaded efficiently.

Additional Styling Options

Formatting with Prettier

To ensure a consistent coding style, use prettier Next.js along with ESLint. Prettier automatically formats your code, making it easier to maintain a clean codebase.

Using Sass for Enhanced Styling

Next.js also supports Sass and Less for those who prefer these preprocessors. Additionally, you can manage fonts, global state , and themes efficiently within your Next.js applications.

To use Sass, install the necessary package:

You can now use .scss or .sass files in your project:

Conclusion

Styling your Next.js application can be achieved through various methods, each offering unique advantages. Whether you choose CSS Modules, Tailwind, styled-components, emotion, or Sass, Next.js provides the flexibility to implement the best solution for your needs.

Understanding these styling techniques enhances your ability to build robust, scalable, and maintainable applications. With the knowledge gained, you can now confidently create beautiful and functional Next.js projects.

npm install styled-components
npm install --save-dev babel-plugin-styled-components

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

import styled from 'styled-components';

const Container = styled.div`
  padding: 2rem;
  background-color: #f0f0f0;
`;

export default function Home() {
  return (
    <Container>
      <h1>Styled Components in Next.js</h1>
    </Container>
  )
}

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const containerStyle = css`
  padding: 2rem;
  background-color: #f0f0f0;
`;

const Heading = styled.h1`
  color: #333;
`;

export default function Home() {
  return (
    <div css={containerStyle}>
      <Heading>Emotion in Next.js</Heading>
    </div>
  )
}

/* styles/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

npm install @next/font

import { Roboto } from '@next/font/google';

const roboto = Roboto({
  weight: ['400', '700'],
  subsets: ['latin'],
});

function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

export default MyApp;

npm install sass

// styles/Home.module.scss
.container {
  padding: 2rem;
  background-color: #f0f0f0;
}

import styles from '../styles/Home.module.scss'

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Sass in Next.js</h1>
    </div>
  )
}