Why styling options matter in NextJS - See It in Action

Why styling options matter

📖 Scenario: You are building a simple Next.js app to show a welcome message. You want to explore different ways to style this message to see how styling affects the look and feel of your app.

🎯 Goal: Create a Next.js component that displays a welcome message. Apply styles using inline styles and CSS modules to understand how each styling option changes the appearance.

📋 What You'll Learn

Create a functional component called WelcomeMessage in Next.js

Add a message variable with the text 'Welcome to Next.js styling options!'

Apply inline styles to the message text in Step 3

Add a CSS module file with a class that styles the message text in Step 4

💡 Why This Matters

🌍 Real World

Understanding styling options helps you build visually appealing and maintainable web apps with Next.js.

💼 Career

Front-end developers often choose between inline styles, CSS modules, and utility-first CSS frameworks like Tailwind to style React and Next.js apps efficiently.

1

DATA SETUP: Create the Next.js component with message

Create a functional component called WelcomeMessage that returns a <div> containing a variable called message with the exact text 'Welcome to Next.js styling options!'.

NextJS

export default function WelcomeMessage() {
  const message = 'Welcome to Next.js styling options!'
  // Your code here
}

Need a hint?

Define the component function, create the message variable, and return a <div> with the message inside.

2

CONFIGURATION: Prepare for inline styling

Inside the WelcomeMessage component, create a constant called inlineStyle that is an object with color set to 'blue' and fontWeight set to 'bold'.

NextJS

export default function WelcomeMessage() {
  const message = 'Welcome to Next.js styling options!'
  const inlineStyle = { color: 'blue', fontWeight: 'bold' }
  // Your code here
  return {message}
}

Need a hint?

Create an object named inlineStyle with the specified CSS properties.

3

CORE LOGIC: Apply inline styles to the message

Modify the <div> in WelcomeMessage to use the inlineStyle object for its style attribute.

NextJS

export default function WelcomeMessage() {
  const message = 'Welcome to Next.js styling options!'
  const inlineStyle = { color: 'blue', fontWeight: 'bold' }
  return {message} // Your code here
}

Need a hint?

Add style={inlineStyle} to the <div> tag.

4

COMPLETION: Add CSS module and apply class

Create a CSS module file named WelcomeMessage.module.css with a class message that sets color to green and font-style to italic. Import this module in the component and apply the message class to the <div> instead of inline styles.

NextJS

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

export default function WelcomeMessage() {
  const message = 'Welcome to Next.js styling options!'
  // Your code here
  return {message}
}

Need a hint?

Create the CSS module file with the class and import it. Use className={styles.message} on the <div>.