Use client directive in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make this Next.js component a client component.

NextJS

"[1]"

export default function Greeting() {
  return <h1>Hello from client!</h1>;
}

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

A"use client"

B"client only"

C"client side"

D"use server"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" instead of "use client"

Placing the directive inside the component function

Misspelling the directive string

The directive "use client" at the top of the file tells Next.js this is a client component.

2fill in blank

medium

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

NextJS

"use client"

import [1] from './Button';

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

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

AClientButton

Bbutton

CButton

Dbtn

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components

Using a different name than the exported component

The import must match the exported component name exactly, which is 'Button' here.

3fill in blank

hard

Fix the error in this client component by adding the correct directive.

NextJS

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

[1]

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

A"use server"

B"use client"

C"client component"

D"use state"

Attempts:

3 left

💡 Hint

Common Mistakes

Not adding any directive

Adding "use server" which disables hooks

Adding the directive inside the component function

Client components must have the "use client" directive at the top to use hooks like useState.

4fill in blank

hard

Fill both blanks to correctly declare and export a client component in Next.js.

NextJS

[1]

function [2]() {
  return <p>This is a client component.</p>;
}

export default [2];

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

A"use client"

BClientComponent

CClientComp

D"use server"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" instead of "use client"

Mismatching function and export names

The directive "use client" must be at the top, and the function name must match the export name.

5fill in blank

hard

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

NextJS

[1]

import React, { useState } from 'react';

function [2]() {
  const [value, setValue] = useState(0);
  return <button onClick={() => setValue(value + 1)}>Clicked [3] times</button>;
}

export default [2];

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

A"use client"

BClickCounter

Cvalue

D"use server"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the "use client" directive

Using a different name in export and function

Not using the state variable in the output

The "use client" directive enables hooks, the function name matches the export, and the state variable is used in the button text.