Why data fetching differs in Next.js - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data on the server side in Next.js using the recommended method.

NextJS

export async function [1]() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

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

AgetStaticPaths

BuseEffect

CgetServerSideProps

DcomponentDidMount

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side hooks like useEffect for server-side data fetching.

Confusing getStaticPaths with data fetching functions.

In Next.js, getServerSideProps is used to fetch data on the server side at request time.

2fill in blank

medium

Complete the code to fetch static data at build time in Next.js.

NextJS

export async function [1]() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

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

AgetStaticProps

BuseEffect

CcomponentDidMount

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using getServerSideProps when static generation is intended.

Trying to fetch data inside the component with useEffect for static pages.

getStaticProps fetches data at build time, generating static pages.

3fill in blank

hard

Fix the error in this Next.js page component by choosing the correct data fetching method.

NextJS

function Page({ data }) {
  return <div>{data.message}</div>;
}

export async function [1]() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default Page;

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

AgetStaticProps

BuseEffect

CcomponentDidMount

DgetServerSideProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side hooks as exported functions.

Confusing server-side and static generation methods.

The page uses static props, so getStaticProps is the correct method to fetch data at build time.

4fill in blank

hard

Fill both blanks to create a Next.js API route that returns JSON data.

NextJS

export default function handler(req, res) {
  if (req.method === '[1]') {
    res.status(200).json({ message: '[2]' });
  } else {
    res.status(405).end();
  }
}

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

AGET

BPOST

CHello from API

DData fetched

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase HTTP methods.

Returning non-JSON responses without proper headers.

API routes handle HTTP methods like GET. The message can be any string, here 'Hello from API'.

5fill in blank

hard

Fill all three blanks to fetch data in a React Server Component in Next.js 13+.

NextJS

import React from 'react';

async function fetchData() {
  const res = await fetch('[1]');
  return res.[2]();
}

export default async function Page() {
  const data = await fetchData();
  return <main><h1>[3]</h1></main>;
}

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

Ahttps://api.example.com/data

Bjson

CWelcome to Next.js

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() for JSON data.

Leaving the heading blank or unrelated.

The fetch URL is the API endpoint, json() parses the response, and the heading displays a welcome message.