How Next.js renders (server-first model) - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a server component in Next.js.

NextJS

export default function [1]() { return <h1>Hello from server!</h1> }

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

APage

BServerComponent

CApp

DClientComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using ClientComponent name causes confusion with client components.

In Next.js, the default export named Page is recognized as a server component by default.

2fill in blank

medium

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

NextJS

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

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

A'/client/data'

B'/api/data'

C'/static/data'

D'/public/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Fetching from /client/data is not a standard API route.

Server components can fetch data from API routes or external endpoints using fetch.

3fill in blank

hard

Fix the error in the code to mark a 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'

APage

BApp

CServerComponent

DClientComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using Page without client directive causes server rendering.

Client components must be marked with "use client" and can have any name, but ClientComponent is a clear name here.

4fill in blank

hard

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

NextJS

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

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

A'/api/items'

Bitem.name

Citem.title

D'/api/data'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong API path or rendering wrong item property.

The server component fetches from /api/items and renders each item's name.

5fill in blank

hard

Fill all three blanks to create a client component with state and event handler in Next.js.

NextJS

"use client";

import { useState } from 'react';

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

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

A0

B+

ChandleClick

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong initial state or wrong event handler name.

The client component initializes state to 0, increments count by 1 on click, and uses handleClick as event handler.