Client component boundaries 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 <div>Hello from client!</div>;
}

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

AClientComponent

BServerComponent

CApp

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a lowercase component name.

Forgetting the "use client" directive.

Naming the component ServerComponent which implies server rendering.

In Next.js, to create a client component, you add the directive "use client"; at the top and export a React function component. The component name can be anything, but here ClientComponent is a clear choice.

2fill in blank

medium

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

NextJS

import [1] from './ClientComponent';

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

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

AserverComponent

BClientComponent

Cclientcomponent

DClientcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or incorrect capitalization in import names.

Trying to import a client component with a different name.

When importing a client component, use the exact exported name with correct capitalization. React components must start with a capital letter, so ClientComponent is correct.

3fill in blank

hard

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

NextJS

[1]

export default function ClientWidget() {
  return <button>Click me</button>;
}

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

Ause client;

B"use server";

CuseClient();

D"use client";

Attempts:

3 left

💡 Hint

Common Mistakes

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

Missing quotes around the directive.

Writing the directive as a function call.

The directive "use client"; must be a string literal at the top of the file to mark it as a client component in Next.js.

4fill in blank

hard

Fill both blanks to create a client component that uses a React hook.

NextJS

"[1]";

import { useState } from 'react';

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

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

Ause client

B+

C-

Duse server

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" directive in a client component.

Using the minus operator instead of plus to increment.

Client components must start with the directive "use client";. To increase the count, use the + operator inside the setCount callback.

5fill in blank

hard

Fill all three blanks to create a client component that imports a child component and uses it inside JSX.

NextJS

"[1]";

import Child from './Child';

export default function ClientWrapper() {
  return (
    <div>
      <Child [2]="value" />
      <button onClick={() => alert([3])}>Click</button>
    </div>
  );
}

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

Ause client

Bdata-prop

C"Hello"

Duse server

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use server" directive in a client component.

Passing props without quotes for string values.

Using invalid attribute names for props.

The client component must start with "use client";. The child component can receive props like data-prop. The alert shows a string, so use "Hello" with quotes.