CSS-in-JS considerations in NextJS - Mini Project: Build & Apply

CSS-in-JS Styling in Next.js

📖 Scenario: You are building a simple Next.js app that shows a greeting message. You want to style this message using CSS-in-JS to keep styles close to the component and make your app easier to maintain.

🎯 Goal: Create a Next.js functional component that uses CSS-in-JS styling with the styled-jsx approach. You will define styles inside the component and apply them to the greeting text.

📋 What You'll Learn

Create a functional component named Greeting that returns a <div> with the text 'Hello, Next.js!'

Add a CSS-in-JS block using <style jsx> inside the component

Style the <div> with a blue text color and a font size of 2rem

Export the Greeting component as default

💡 Why This Matters

🌍 Real World

CSS-in-JS is popular in React and Next.js apps to keep styles close to components, making maintenance easier and avoiding global CSS conflicts.

💼 Career

Understanding CSS-in-JS is important for frontend developers working with modern React frameworks like Next.js, as many companies use this pattern for scalable styling.

1

Create the Greeting component with text

Create a functional component called Greeting that returns a <div> containing the exact text Hello, Next.js!.

NextJS

// Your code here

Need a hint?

Use a function named Greeting that returns JSX with a <div> and the text inside.

2

Add a CSS-in-JS style block

Inside the Greeting component, add a <style jsx> block after the <div> that will hold your CSS styles.

NextJS

export default function Greeting() {
  return 
    Hello, Next.js!
    {/* Add a  block here */}
  ;
}

Need a hint?

Use <style jsx>{``}</style> to add CSS inside the component.

3

Style the div with blue text and 2rem font size

Inside the <style jsx> block, write CSS to style the <div> so that its text color is blue and its font size is 2rem.

NextJS

export default function Greeting() {
  return 
    Hello, Next.js!
    {`
      /* Style the div here */
    `}
  ;
}

Need a hint?

Write CSS inside the template literal to style the div selector.

4

Wrap the return in a fragment and export default

Ensure the Greeting component's return value is wrapped in a React fragment <></> and that the component is exported as default.

NextJS

export default function Greeting() {
  return (
    
      Hello, Next.js!
      {`
        div {
          color: blue;
          font-size: 2rem;
        }
      `}
    
  );
}
// Make sure the component is exported as default

Need a hint?

Wrap the JSX in () and use <></> around the elements. Confirm the export default is present.