Lesson Three: Managing Styles in Next.js

Introduction

In modern applications, design plays a major role in attracting users. In this lesson, we’ll explore different ways to manage styles in Next.js, including:

• Adding global CSS files .
• Using CSS Modules for local styles.
• Adding Styling Libraries like Tailwind CSS or Material-UI.

1. Adding a Global CSS File

Next.js allows you to add a global CSS file that applies to your entire application. This file can contain basic styles that are applied across all pages.

Steps:

1.1 Creating a Global CSS File

• Open the styles/ folder in your project.
• Create a new file named global.css .

1.2 Adding Styles to the File

Add some simple styles to global.css :

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}


h1 {
color: #333;
}


a {
text-decoration: none;
color: #007bff;
}


a:hover {
text-decoration: underline;
}

1.3 Linking the File to the Application

To ensure these styles are applied to all pages, link the file in the _app.js component.

• Open the _app.js file located in the pages/ folder.
• Import the global.css file:

import '../styles/global.css';


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


export default MyApp;

2. Using CSS Modules for Local Styles

CSS Modules is a tool that allows you to write styles specific to each component separately, preventing naming conflicts between styles.

Steps:

2.1 Creating a CSS Module

• Open the about.js file located in the pages/ folder.
• Create a new file named about.module.css next to the about.js file.

2.2 Adding Styles to the File

Add the following styles to about.module.css :

.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.title {
font-size: 24px;
color: #444;
}


.description {
font-size: 16px;
color: #666;
}

2.3 Importing and Using the Styles

Modify the about.js file to use the styles:

import styles from './about.module.css';


export default function About() {
return (
<div className={styles.container}>
<h1 className={styles.title}>About Us</h1>
<p className={styles.description}>
This is the about page for the website. We provide our services in a professional and innovative way.
</p>
</div>
);
}

3. Adding a Styling Library (Example: Tailwind CSS)

Tailwind CSS is a popular styling framework that provides ready-to-use CSS classes you can apply directly in your HTML.

Steps:

3.1 Installing Tailwind CSS

In the Terminal, install Tailwind CSS using the following command:

npm install tailwindcss postcss autoprefixer

3.2 Creating Tailwind Configuration Files

Create configuration files using the following command:

npx tailwindcss init

3.3 Modifying the tailwind.config.js File

Ensure the tailwind.config.js file contains the following settings:

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

3.4 Adding Tailwind to the CSS File

Open the global.css file and add the following code:

@tailwind base;
@tailwind components;
@tailwind utilities;

3.5 Using Tailwind in a Page

Modify the index.js file to use Tailwind:

import Link from 'next/link';


export default function Home() {
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
<h1 className="text-3xl font-bold text-blue-600">Welcome to Our Website!</h1>
<p className="mt-4 text-gray-700">Choose a page:</p>
<nav className="mt-4 space-x-4">
<Link href="/about">
<a className="text-blue-500 hover:text-blue-700">About Us</a>
</Link>
<Link href="/contact">
<a className="text-blue-500 hover:text-blue-700">Contact Us</a>
</Link>
</nav>
</div>
);
}

4. Testing the Styles

After completing the above steps, run the project using:

npm run dev

Open your browser and go to http://localhost:3000 . You will notice that the styles have been successfully applied.

5. Comparison of Different Approaches

Conclusion of Lesson Three

In this lesson, you learned how to:

• Add a global CSS file to your application.
• Use CSS Modules to manage local styles.
• Add a styling library like Tailwind CSS.

In the next lesson, we’ll discuss managing data using getStaticProps and getServerSideProps .

See you in Lesson Four! 🚀