When to use client components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark a React component as a client component in Next.js.

NextJS

"use client";

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

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

AButtonStatic

BServerButton

CButtonServer

DClientButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using a name that suggests server-side rendering instead of client-side.

Forgetting to add "use client" at the top of the file.

In Next.js, to make a component a client component, you add "use client" at the top and export a React component. Naming it clearly like ClientButton helps understand its role.

2fill in blank

medium

Complete the code to import a client component correctly in a Next.js server component.

NextJS

import [1] from './ClientButton';

export default function Page() {
  return <[1] />;
}

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

AServerButton

BButtonStatic

CClientButton

DStaticButton

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a server component name instead of the client component.

Using a name that does not match the exported component.

You import the client component by its exact exported name. Here, ClientButton is the client component imported into a server component.

3fill in blank

hard

Fix the error in the client component declaration by completing the missing directive.

NextJS

[1]

import React from 'react';

export default function Clicker() {
  const [count, setCount] = React.useState(0);
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>;
}

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

A"use client";

B"use server";

Cimport React from 'react';

Dexport const client = true;

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" instead of "use client".

Forgetting to add the directive at the top of the component.

Client components in Next.js must start with the directive "use client"; to enable client-side features like state and events.

4fill in blank

hard

Fill both blanks to correctly use a client component with state and event in Next.js.

NextJS

"use client";

import React, { [1] } from 'react';

export default function Counter() {
  const [count, setCount] = [2](0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

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

AuseState

BuseEffect

CuseRef

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks like useEffect or useRef instead of useState for state.

Importing the wrong hook or forgetting to import useState.

The useState hook is imported and used to create state in a client component for interactive behavior.

5fill in blank

hard

Fill all three blanks to create a client component that uses state and effect.

NextJS

"use client";

import React, { [1], [2] } from 'react';

export default function Timer() {
  const [seconds, setSeconds] = [3](0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <button>Seconds: {seconds}</button>;
}

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

AuseState

BuseEffect

CuseRef

DuseCallback

Attempts:

3 left

💡 Hint

Common Mistakes

Importing or using the wrong hooks like useRef or useCallback.

Not matching the hook usage with the import.

The component imports useState and useEffect. It uses useState to hold seconds and useEffect to update seconds every second.