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.

Practice

1. What is the main purpose of the use client directive in Next.js?

easy

A. To enable server-side rendering for a component

B. To define API routes in Next.js

C. To import CSS styles globally

D. To mark a component to run only in the browser

Solution

1. Step 1: Understand the role of use client

   The directive tells Next.js that the component should run on the client side (browser) instead of the server.

2. Step 2: Identify when to use it

   It is used when components use React hooks or browser-specific APIs that require client-side execution.

3. Final Answer:

   To mark a component to run only in the browser -> Option D

4. Quick Check:

   Client directive = run in browser [OK]

Hint: Remember: use client means browser-only code [OK]

Common Mistakes:

• Thinking it enables server-side rendering
• Using it to import styles
• Confusing it with API route setup

2. Where should the use client directive be placed in a Next.js component file?

easy

A. At the very top, before any imports or code

B. After all imports but before the component function

C. Inside the component function body

D. At the bottom of the file

Solution

1. Step 1: Recall the directive placement rule

   The use client directive must be the first line in the file to be recognized properly.

2. Step 2: Understand why placement matters

   Placing it first ensures Next.js treats the entire file as a client component before processing imports or code.

3. Final Answer:

   At the very top, before any imports or code -> Option A

4. Quick Check:

   Directive first line = correct placement [OK]

Hint: Always put use client as the first line [OK]

Common Mistakes:

• Placing it inside the component function
• Putting it after imports
• Adding it at the file end

3. Given this Next.js component code, what will happen when it is rendered?

"use client";
import { useState } from 'react';

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

medium

A. The button will display and increment the count on clicks

B. The component will throw a syntax error due to missing quotes

C. The count will not update because use client is missing

D. The component will render but the button won't respond to clicks

Solution

1. Step 1: Check for use client directive

   The directive is present as the first line, so this is a client component that can use hooks.

2. Step 2: Analyze the useState hook usage

   The useState hook manages the count state, and the button updates it on click, so the count increments correctly.

3. Final Answer:

   The button will display and increment the count on clicks -> Option A

4. Quick Check:

   Client directive + useState = interactive button [OK]

Hint: If use client is present, hooks work normally [OK]

Common Mistakes:

• Assuming missing quotes cause syntax error
• Thinking use client is missing
• Believing button won't update state

4. Identify the error in this Next.js component:

import { useState } from 'react';

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

medium

A. Invalid JSX syntax in the return statement

B. Missing use client directive at the top

C. Incorrect import statement for useState

D. State variable count is not initialized

Solution

1. Step 1: Check for use client directive

   The component uses useState hook but lacks the use client directive, which is required for client-side hooks.

2. Step 2: Verify other code parts

   Imports and JSX syntax are correct, and the state variable is initialized properly.

3. Final Answer:

   Missing use client directive at the top -> Option B

4. Quick Check:

   Hooks need use client directive [OK]

Hint: Hooks require use client directive to work [OK]

Common Mistakes:

• Ignoring the missing directive
• Thinking import is wrong
• Assuming JSX syntax error

5. You want to create a Next.js component that uses useState and also fetches data from an API on the client side using useEffect. Which is the correct way to set up this component?

hard

A. "use server"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

B. import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

C. "use client"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return {data ? JSON.stringify(data) : 'Loading...'}; }

D. "use client"; import { useState } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); fetch('/api/data').then(res => res.json()).then(setData); return {data ? JSON.stringify(data) : 'Loading...'}; }

Solution

1. Step 1: Confirm client directive usage

   Since the component uses hooks (useState, useEffect) and browser APIs, it must start with "use client";.

2. Step 2: Check correct hook usage for data fetching

   Data fetching should be inside useEffect to run after render, avoiding side effects during rendering.

3. Step 3: Identify the correct option

   "use client"; import { useState, useEffect } from 'react'; export default function DataFetcher() { const [data, setData] = useState(null); useEffect(() => { fetch('/api/data').then(res => res.json()).then(setData); }, []); return
   {data ? JSON.stringify(data) : 'Loading...'}; } correctly includes the directive, imports both hooks, and uses useEffect for fetching data.

4. Final Answer:

   "use client"; with useState, useEffect, and fetch inside useEffect -> Option C

5. Quick Check:

   Client directive + useEffect fetch = correct pattern [OK]

Hint: Use "use client" and fetch inside useEffect [OK]

Common Mistakes:

• Omitting use client directive
• Fetching data outside useEffect
• Using "use server" directive incorrectly