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
1npx 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
1npm install --save-dev tailwindcss postcss autoprefixer
2npx 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
1// pages/_app.js
2import '../styles/globals.css'
3
4function MyApp({ Component, pageProps }) {
5  return <Component {...pageProps} />
6}
7
8export 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
1/* styles/Home.module.css */
2.container {
3  padding: 0 2rem;
4}

Copy
1// pages/index.js
2import styles from '../styles/Home.module.css'
3
4export default function Home() {
5  return (
6    <div className={styles.container}>
7      <h1>Welcome to Next.js!</h1>
8    </div>
9  )
10}

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
1// tailwind.config.js
2module.exports = {
3  content: [
4    './pages/**/*.{js,ts,jsx,tsx}',
5    './components/**/*.{js,ts,jsx,tsx}',
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

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
1// pages/index.js
2export default function Home() {
3  return (
4    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
5      <h1 className="text-4xl font-bold">Hello, Next.js with Tailwind!</h1>
6    </div>
7  )
8}

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:

Copy
1npm install styled-components
2npm install --save-dev babel-plugin-styled-components

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

Copy
1// .babelrc
2{
3  "presets": ["next/babel"],
4  "plugins": [["styled-components", { "ssr": true }]]
5}

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

Copy
1import styled from 'styled-components';
2
3const Container = styled.div`
4  padding: 2rem;
5  background-color: #f0f0f0;
6`;
7
8export default function Home() {
9  return (
10    <Container>
11      <h1>Styled Components in Next.js</h1>
12    </Container>
13  )
14}

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:

Copy
1npm install @emotion/react @emotion/styled

You can now use Emotion to style your components:

Copy
1/** @jsxImportSource @emotion/react */
2import { css } from '@emotion/react';
3import styled from '@emotion/styled';
4
5const containerStyle = css`
6  padding: 2rem;
7  background-color: #f0f0f0;
8`;
9
10const Heading = styled.h1`
11  color: #333;
12`;
13
14export default function Home() {
15  return (
16    <div css={containerStyle}>
17      <Heading>Emotion in Next.js</Heading>
18    </div>
19  )
20}

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:

Copy
1/* styles/globals.css */
2@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
3
4body {
5  font-family: 'Roboto', sans-serif;
6}

Using next/font

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

Copy
1npm install @next/font

Then use it in your _app.js:

Copy
1import { Roboto } from '@next/font/google';
2
3const roboto = Roboto({
4  weight: ['400', '700'],
5  subsets: ['latin'],
6});
7
8function MyApp({ Component, pageProps }) {
9  return (
10    <main className={roboto.className}>
11      <Component {...pageProps} />
12    </main>
13  );
14}
15
16export default MyApp;

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:

Copy
1npm install sass

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

Copy
1// styles/Home.module.scss
2.container {
3  padding: 2rem;
4  background-color: #f0f0f0;
5}

Copy
1import styles from '../styles/Home.module.scss'
2
3export default function Home() {
4  return (
5    <div className={styles.container}>
6      <h1>Sass in Next.js</h1>
7    </div>
8  )
9}

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.