Async server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an async server component in Next.js.

NextJS

export default async function [1]() {
  return <div>Hello from server component</div>;
}

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

AComponent

BServer

CApp

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-standard function name that Next.js does not recognize.

The default export function name is often Page in Next.js server components.

2fill in blank

medium

Complete the code to fetch data inside an async server component.

NextJS

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

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

A/api/message

Bhttps://example.com/api

C/api/data

Dhttp://localhost/api

Attempts:

3 left

💡 Hint

Common Mistakes

Using an absolute URL when a relative API route is expected.

Using /api/message is a common local API route in Next.js for fetching data.

3fill in blank

hard

Fix the error in the async server component by completing the code.

NextJS

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

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

Aawait

Basync

Casync function

Dfunction async

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to mark the function as async causes syntax errors.

The component function must be marked async to use await inside it.

4fill in blank

hard

Fill both blanks to correctly fetch and display data in an async server component.

NextJS

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

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

A/api/posts

Bjson

Ctext

D/api/users

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong API route or parsing method causes errors or wrong output.

Use /api/posts as the fetch URL and json() to parse the response.

5fill in blank

hard

Fill all three blanks to create an async server component that fetches and renders a list.

NextJS

export default async function Page() {
  const res = await fetch('[1]');
  const posts = await res.[2]();
  return (
    <ul>
      {posts.[3](post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

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

A/api/posts

Bjson

Cmap

D/api/comments

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong fetch URL, parsing method, or forgetting to map over the array.

The component fetches from /api/posts, parses JSON, and maps over posts to render list items.