Global CSS in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a global CSS file in a Next.js app.

NextJS

import '[1]';

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

A'./utils/helpers.css'

B'./components/Button.css'

C'./pages/index.css'

D'./styles/global.css'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CSS files inside components instead of _app.js

Using incorrect relative paths

Trying to import CSS files outside the styles folder

In Next.js, global CSS files are imported in the _app.js or _app.tsx file using a relative path like './styles/global.css'.

2fill in blank

medium

Complete the code to create a custom App component that applies global CSS in Next.js.

NextJS

export default function MyApp({ Component, pageProps }) {
  [1]
}

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

Areturn <div>{Component}</div>;

Breturn <Component />;

Creturn <Component {...pageProps} />;

Dreturn pageProps;

Attempts:

3 left

💡 Hint

Common Mistakes

Not passing pageProps to Component

Wrapping Component incorrectly

Returning pageProps directly instead of JSX

The custom App component must return the page component with its props using <Component {...pageProps} /> to render pages correctly.

3fill in blank

hard

Fix the error in this _app.js file by completing the import statement for global CSS.

NextJS

import [1] from 'next/app';
import './styles/global.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

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

AApp

BReact

CuseState

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing React instead of App

Using wrong import names

Not importing anything from 'next/app'

To extend the default App in Next.js, you import App from 'next/app'. This is needed if you customize the App component class.

4fill in blank

hard

Fill both blanks to correctly import and use global CSS in a Next.js app.

NextJS

import [1] from 'next/app';
import [2];

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

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

AApp

B'./styles/global.css'

C'./components/button.css'

DReact

Attempts:

3 left

💡 Hint

Common Mistakes

Using component CSS instead of global CSS

Wrong import names or paths

Missing curly braces for named imports

You import App from 'next/app' if extending it, and import the global CSS file with its relative path.

5fill in blank

hard

Fill all three blanks to create a working _app.js file that applies global CSS in Next.js.

NextJS

import [1] from 'next/app';
import [2];

export default function [3]({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

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

AApp

B'./styles/global.css'

CMyApp

DReact

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function incorrectly

Not importing global CSS properly

Missing or wrong import from 'next/app'

The default export function is usually named MyApp. You import App from 'next/app' if needed, and import the global CSS file by its path.