Use server directive in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the component as a server component.

NextJS

"use [1]";

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

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

Aclient

Bstrict

Cserver

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use client" instead of "use server"

Forgetting the directive line

Writing the directive inside the component function

The directive "use server" tells Next.js this component runs on the server.

2fill in blank

medium

Complete the code to import a server component correctly.

NextJS

"use client";

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

export default function ClientPage() {
  return <ServerComp />;
}

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

A.client

B.server

C.jsx

D.ts

Attempts:

3 left

💡 Hint

Common Mistakes

Using ".client" suffix for server components

Omitting the suffix and causing import errors

Using wrong file extensions

Server components often have the ".server" suffix to distinguish them.

3fill in blank

hard

Fix the error in the server component directive.

NextJS

"use [1]r";

export default function ServerComp() {
  return <p>Server side content</p>;
}

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

Aserver

Bservr

Cserv

Dserve

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the directive as "use serve" or "use servr"

Adding extra characters or typos

The correct directive is exactly "use server" with no extra letters.

4fill in blank

hard

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

NextJS

"use [1]";

async function fetchData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await fetchData();
  return <pre>{JSON.stringify([2], null, 2)}</pre>;
}

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

Aserver

Bclient

Cdata

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use client" directive here

Referencing wrong variable name in JSX

The directive must be "use server" and the variable holding fetched data is "data".

5fill in blank

hard

Fill all three blanks to create a server component that renders a list from fetched data.

NextJS

"use [1]";

async function getUsers() {
  const response = await fetch('https://api.example.com/users');
  return response.json();
}

export default async function UsersList() {
  const [2] = await getUsers();
  return (
    <ul>
      { [3].map(user => (
        <li key={user.id}>{user.name}</li>
      )) }
    </ul>
  );
}

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

Aserver

Busers

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using "use client" directive

Using different variable names inconsistently

Forgetting to use the key prop in list items

The directive is "use server". The fetched list is stored in "users" and mapped over "users".