NEXT109 - Styling in Next.js

Styling in Next.js builds upon standard CSS concepts while adding framework-specific conventions for scalability and performance.
In this lesson, you will learn the recommended ways to style Next.js applications and understand when to use each approach.

Styling Options in Next.js

Next.js supports multiple styling strategies out of the box:

• Global CSS
• CSS Modules
• Component-scoped styles
• Inline styles (limited use)

Choosing the right strategy helps keep your UI consistent and maintainable.

Global CSS

Global CSS applies styles across the entire application.

Global styles must be imported in the root layout.

Example file:

• app/globals.css

Importing global styles:

import "./globals.css";

Global CSS is best for:

• Resets
• Typography
• Base styles
• Design tokens

CSS Modules

CSS Modules scope styles locally to a component.

File naming convention:

• Component.module.css

Example CSS module:

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

Using CSS Modules:

import styles from "./Title.module.css";
 
function Title() {
  return <h1 className={styles.title}>Hello Next.js</h1>;
}

CSS Modules prevent class name collisions automatically.

Component-Scoped Styling

Component-scoped styles are achieved using CSS Modules or colocated styles.

Benefits:

• Predictable styling
• Easy refactoring
• No global conflicts

This approach scales well in large applications.

Conditional Styling

Styles can change based on props or state.

function Button({ active }) {
  return (
    <button
      className={active ? "btn active" : "btn"}
    >
      Click
    </button>
  );
}

This pattern is common for interactive UI elements.

Inline Styles

Inline styles use JavaScript objects.

function Box() {
  return (
    <div style={{ padding: "16px", backgroundColor: "lightgray" }}>
      Box
    </div>
  );
}

Inline styles should be used sparingly because they:

• Do not support pseudo-classes
• Are harder to maintain
• Bypass CSS optimizations

Styling Layouts vs Pages

Best practice:

• Layout styles = structure and shared UI
• Page styles = page-specific content

This separation keeps responsibilities clear.

Styling Best Practices

Follow these guidelines:

• Prefer CSS Modules for components
• Use global CSS only when necessary
• Keep styles close to components
• Avoid overly complex selectors
• Be consistent across the project

Good styling practices improve long-term maintainability.

Common Styling Mistakes

Avoid these mistakes:

• Putting everything in global CSS
• Mixing multiple styling strategies randomly
• Overusing inline styles
• Ignoring responsive design

Consistency matters more than the chosen method.

Summary

In this lesson, you learned:

• Styling options available in Next.js
• How to use global CSS
• How CSS Modules work
• Component-scoped styling patterns
• Conditional and inline styling
• Best practices and common pitfalls

In the next lesson, we will explore environment variables in Next.js and learn how to manage configuration securely.