Global CSS in NextJS - Mini Project: Build & Apply

Global CSS in Next.js

📖 Scenario: You are building a simple Next.js app that needs consistent styling across all pages. You want to apply global CSS styles so that the entire app shares the same look and feel, like setting a background color and font style.

🎯 Goal: Create a Next.js app that uses a global CSS file to style the entire application with a background color and font family.

📋 What You'll Learn

Create a global CSS file named globals.css inside the styles folder

Add CSS rules to set the body background color to #f0f0f0 and font family to Arial, sans-serif

Import the global CSS file in the custom _app.js file

Ensure the global styles apply to all pages in the Next.js app

💡 Why This Matters

🌍 Real World

Global CSS is used in real websites to keep a consistent look and feel across all pages without repeating styles.

💼 Career

Knowing how to apply global styles in Next.js is essential for frontend developers building scalable React apps with consistent design.

1

Create the global CSS file

Create a file named globals.css inside the styles folder with these exact CSS rules: set the body background color to #f0f0f0 and font family to Arial, sans-serif.

NextJS

/* Your CSS here */

Need a hint?

Remember to create the globals.css file inside the styles folder and add CSS rules for the body selector.

2

Create the custom App component

Create a file named _app.js inside the pages folder. Import "../styles/globals.css" at the top of the file.

NextJS

import '../styles/globals.css'

// Your code here

Need a hint?

The _app.js file wraps all pages. Importing the CSS here applies styles globally.

3

Add a simple page component

Create a file named index.js inside the pages folder. Export a default function named Home that returns an <h1> element with the text "Welcome to Next.js!".

NextJS

export default function Home() {
  // Your code here
}

Need a hint?

This page will show the heading styled by your global CSS.

4

Verify global styles apply

Ensure the _app.js imports globals.css and the index.js page renders the heading. This completes the global CSS setup in Next.js.

NextJS

// Verify your imports and components are correct
// Your code here

Need a hint?

Check that your global CSS is imported in _app.js and your page component returns the heading.