Why styling options matter in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a CSS class to a Next.js component.

NextJS

export default function Button() {
  return <button className=[1]>Click me</button>;
}

Drag options to blanks, or click blank then click option'

Aclass="btn-primary"

Bbtn-primary

C"btn-primary"

DclassName=btn-primary

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the class name string.

Using HTML attribute class instead of className.

In JSX, class names must be passed as strings inside curly braces. So className="btn-primary" is correct.

2fill in blank

medium

Complete the code to import a CSS module in Next.js.

NextJS

import styles from '[1]';

export default function Header() {
  return <h1 className={styles.title}>Welcome</h1>;
}

Drag options to blanks, or click blank then click option'

A"./Header.css"

B"Header.css"

C"Header.module.scss"

D"./Header.module.css"

Attempts:

3 left

💡 Hint

Common Mistakes

Importing plain CSS files without the .module part.

Using wrong file extensions like .scss without setup.

Next.js uses CSS modules with the .module.css extension for scoped styles.

3fill in blank

hard

Fix the error in the styled JSX block to apply red text color.

NextJS

export default function Alert() {
  return (
    <>
      <p>Warning!</p>
      <style jsx>[1]
        p { color: red; }
      </style>
    </>
  );
}

Drag options to blanks, or click blank then click option'

A"

B`

C'

D{`

Attempts:

3 left

💡 Hint

Common Mistakes

Using double or single quotes instead of backticks.

Not wrapping CSS in a template literal.

Styled JSX requires a template literal wrapped in backticks ` for CSS.

4fill in blank

hard

Fill both blanks to create a responsive container with Tailwind CSS in Next.js.

NextJS

<div className="[1] [2]">
  Content here
</div>

Drag options to blanks, or click blank then click option'

Acontainer

Bmx-auto

Ctext-center

Dbg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using background or text alignment classes instead of layout classes.

Forgetting to center the container horizontally.

Using container centers content with max width, and mx-auto centers horizontally.

5fill in blank

hard

Fill all three blanks to create a Next.js component using CSS modules with a button that has padding and blue background.

NextJS

import styles from '[1]';

export default function BlueButton() {
  return <button className="[2] [3]">Click me</button>;
}

Drag options to blanks, or click blank then click option'

A"./BlueButton.module.css"

Bstyles.padding

Cstyles.bgBlue

Dstyles.button

Attempts:

3 left

💡 Hint

Common Mistakes

Using plain strings instead of referencing styles object.

Importing wrong file or missing the module extension.

Import the CSS module file, then use the module's padding and background color classes on the button.