What can run in server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data in a Next.js server component.

NextJS

export default async function Page() {
  const res = await fetch('[1]');
  const data = await res.json();
  return <div>{JSON.stringify(data)}</div>;
}

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

A'localStorage.getItem("token")'

B'/api/client-only'

C'window.location.href'

D'https://api.example.com/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use browser-only APIs like localStorage or window in server components.

Fetching from client-only API routes that require client context.

Server components can fetch data from external APIs using fetch with a URL string.

2fill in blank

medium

Complete the code to import a React hook that cannot run in server components.

NextJS

'use client';

import React, { [1] } from 'react';

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

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

AuseState

BuseEffect

CuseMemo

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect in server components causes errors.

Confusing hooks that run on server and client.

useState is a React hook that manages state and only works in client components, not server components.

3fill in blank

hard

Complete the code to access route parameters in a Next.js server component.

NextJS

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

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

Aparams

BuseParams

CuseRouter

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-only hooks like useParams from next/navigation.

Confusing server props with client hooks like useRouter.

Server components receive params as a prop to access dynamic route parameters. No import is needed.

4fill in blank

hard

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

NextJS

export default async function List() {
  const res = await fetch('[1]');
  const data = await res.json();
  return (
    <ul>
      {data.map(item => <li key={item.[2]>{item.name}</li>)}
    </ul>
  );
}

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

A'https://api.example.com/items'

Bid

Cindex

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-only APIs or variables in server components.

Using non-unique or invalid keys in list rendering.

The server component fetches data from an API URL and uses the id property as the key for list items.

5fill in blank

hard

Fill all three blanks to create a server component that fetches data and renders a title and description.

NextJS

export default async function Product() {
  const response = await fetch('[1]');
  const product = await response.[2]();
  return (
    <section>
      <h1>{product.[3]</h1>
      <p>{product.description}</p>
    </section>
  );
}

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

A'https://api.example.com/product/123'

Bjson

Ctitle

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() to parse response.

Trying to access properties that don't exist on the product object.

The server component fetches product data from the API URL, parses JSON, and renders the product's title and description.