CSS Modules in NextJS - Mini Project: Build & Apply

Styling a Next.js Component with CSS Modules

📖 Scenario: You are building a simple Next.js app that shows a welcome message. You want to style this message using CSS Modules to keep styles scoped and organized.

🎯 Goal: Create a Next.js functional component called WelcomeMessage and style it using a CSS Module file named WelcomeMessage.module.css. The message should appear in blue color with some padding.

📋 What You'll Learn

Create a Next.js functional component named WelcomeMessage

Create a CSS Module file named WelcomeMessage.module.css

Add a CSS class named message in the CSS Module with blue text color and padding

Import and apply the CSS Module class to the component's main <div>

Use semantic HTML and accessible practices

💡 Why This Matters

🌍 Real World

CSS Modules help keep styles scoped to components, avoiding conflicts in large Next.js apps.

💼 Career

Understanding CSS Modules is essential for frontend developers working with React and Next.js frameworks to build maintainable UI.

1

Create the Next.js component

Create a functional component called WelcomeMessage that returns a <div> containing the text "Welcome to Next.js with CSS Modules!".

NextJS

# Create a functional component named WelcomeMessage
# Your code here

Need a hint?

Use export default function WelcomeMessage() and return a <div> with the exact text inside.

2

Create the CSS Module file

Create a CSS Module file named WelcomeMessage.module.css with a class called message that sets the text color to blue and adds padding of 1rem.

NextJS

export default function WelcomeMessage() {
  return Welcome to Next.js with CSS Modules!;
}

/* Create WelcomeMessage.module.css with .message class */
/* Your code here */

Need a hint?

Define .message class with color: blue; and padding: 1rem; in the CSS Module file.

3

Import the CSS Module in the component

Import the CSS Module file WelcomeMessage.module.css as styles in the WelcomeMessage component file.

NextJS

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

export default function WelcomeMessage() {
  return Welcome to Next.js with CSS Modules!;
}

/* WelcomeMessage.module.css */
.message {
  color: blue;
  padding: 1rem;
}

# Your code here

Need a hint?

Use import styles from './WelcomeMessage.module.css'; at the top of the component file.

4

Apply the CSS Module class to the component

Apply the CSS Module class message to the <div> in the WelcomeMessage component using className={styles.message}.

NextJS

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

export default function WelcomeMessage() {
  return Welcome to Next.js with CSS Modules!;
}

/* WelcomeMessage.module.css */
.message {
  color: blue;
  padding: 1rem;
}

# Your code here

Need a hint?

Use className={styles.message} inside the <div> tag to apply the CSS Module style.