When to keep components on server in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

"use client" directive is used to mark a component as a client component. To keep it on the server, we do not use [1].

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

A"use client"

B"server component"

C"use server"

D"client component"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use client" to keep a component on the server.

Not understanding that server components are default.

In Next.js, server components are the default. To explicitly mark a component as a client component, you use "use client". There is no directive needed to keep it on the server; simply do not use "use client".

2fill in blank

medium

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

NextJS

import ClientComponent from './ClientComponent';

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

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

Aclientcomponent

BServerComponent

CclientComponent

DClientComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or incorrect casing for component names.

Trying to use a server component name instead.

You import the client component by its exact name and use it as a JSX tag inside the server component.

3fill in blank

hard

Identify the React hook causing the error in this server component.

NextJS

export default function ServerComponent() {
  const [count, setCount] = [1](0);
  return <p>{count}</p>;
}

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

AuseState

BuseEffect

CuseRef

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use hooks in server components.

Not understanding the difference between server and client components.

React hooks like useState cannot be used in server components because they run only on the server. This causes an error. To fix, you must remove hooks or convert the component to a client component.

4fill in blank

hard

Fill both blanks to create a server component that fetches data and renders it.

NextJS

export default async function DataComponent() {
  const data = await fetch('/api/data').then(res => res.[1]());
  return <div>{data.[2]</div>;
}

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

Ajson

Btext

Cvalue

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.text() instead of res.json().

Trying to render the whole data object directly.

To get JSON data from a fetch response, use res.json(). Then access the needed property from the data object to render.

5fill in blank

hard

Fill all three blanks to create a client component that updates state and calls a server action.

NextJS

"use client";

import { useState } from 'react';
import { serverAction } from './actions';

export default function ClientUpdater() {
  const [value, setValue] = useState('');

  async function handleClick() {
    await serverAction([1]);
  }

  return (
    <button onClick={() => setValue([2])} onClickCapture={handleClick}>
      [3]
    </button>
  );
}

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

Avalue

B'new value'

CClick me

DsetValue

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the setter function instead of the value to serverAction.

Using incorrect event handlers or button text.

The server action is called with the current value. The state is updated with a new string. The button text is set to "Click me".