Server and client component composition in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the 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'

AButtonClient

BClientButton

CButtonServer

DServerButton

Attempts:

3 left

💡 Hint

Common Mistakes

Not adding "use client" at the top of the file.

Using a server component name for a client component.

The component is marked as a client component by adding "use client" at the top. The function name can be any valid name, here ClientButton is used.

2fill in blank

medium

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

NextJS

import [1] from './ClientButton';

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

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

AClientButton

BServerButton

CButtonClient

DButtonServer

Attempts:

3 left

💡 Hint

Common Mistakes

Importing a server component name instead of the client component.

Using a wrong component name in JSX.

Client components can be imported and used inside server components. The import name must match the exported client component name.

3fill in blank

hard

Fix the error in the client component by adding the missing directive.

NextJS

"use client";

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

// Missing directive: [1]

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

A"use jsx"

B"use server"

C"use strict"

D"use client"

Attempts:

3 left

💡 Hint

Common Mistakes

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

Not adding any directive at all.

Client components in Next.js must start with the directive "use client" to enable client-side features like hooks and event handlers.

4fill in blank

hard

Fill both blanks to create a server component that renders a client component with a prop.

NextJS

import [1] from './[2]';

export default function ServerComp() {
  return <div><ClientComp message="Hello" /></div>;
}

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

AClientComp

BServerComp

CClientComponent

DServerComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing server and client component names.

Using wrong import names or file names.

The server component imports the client component named ClientComp from the file ClientComponent. Then it renders it with a prop.

5fill in blank

hard

Fill all three blanks to pass a callback from a server component to a client component.

NextJS

import [1] from './[2]';

export default function ServerParent() {
  function handleClick() {
    console.log('Clicked');
  }

  return <[3] onClick={handleClick} />;
}

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

AClientChild

BClientComponent

DServerParent

Attempts:

3 left

💡 Hint

Common Mistakes

Using server component names in place of client components.

Not matching import and JSX component names.

The server component imports the client component ClientComponent and passes a callback handleClick as a prop named onClick. The client component can then use this callback.