What is Next.js - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple Next.js page component.

NextJS

export default function Home() {
  return <main>[1]</main>;
}

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

A<div>Hello</div>

Bconsole.log('Hello')

C"Welcome to Next.js!"

D12345

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a console.log statement instead of JSX.

Returning a number without JSX tags.

The main content of a Next.js page is returned as JSX inside the component function.

2fill in blank

medium

Complete the code to import the Link component from Next.js.

NextJS

import [1] from 'next/link';

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

ARouter

BLink

CNav

DRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using Router instead of Link.

Using Nav or Route which are not Next.js components.

Next.js provides a Link component for client-side navigation.

3fill in blank

hard

Fix the error in this Next.js page export statement.

NextJS

export [1] function About() {
  return <p>About page</p>;
}

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

Adefault

Bconst

Clet

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to use default in the export.

Using variable declarations instead of function export.

Next.js pages must export a default function component.

4fill in blank

hard

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

NextJS

export async function [1]() {
  const res = await fetch('/api/data');
  const data = await res.[2]();
  return data;
}

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

AgetServerSideProps

Bjson

Ctext

DgetStaticProps

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps when dynamic data is needed.

Parsing response with text() instead of json().

getServerSideProps fetches data on each request, and res.json() parses the response as JSON.

5fill in blank

hard

Fill all three blanks to create a Next.js API route handler.

NextJS

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

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

APOST

B200

CHello from API

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for this handler.

Using wrong status codes or missing JSON response.

This API route responds to GET requests with status 200 and a JSON message.