Build output analysis in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Next.js Image component.

NextJS

import [1] from 'next/image';

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

Aimg

BImage

CPicture

DNextImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'img' instead of 'Image'.

Trying to import a non-existent component like 'Picture'.

The Next.js Image component is imported as Image from 'next/image'.

2fill in blank

medium

Complete the code to export a Next.js page component as default.

NextJS

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

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

AHome

BComponent

CApp

DPage

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'Component' which are less descriptive.

Using lowercase function names which is not standard.

By convention, Next.js page components are often named Home or relevant to the page. Here, Home is used.

3fill in blank

hard

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

NextJS

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

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

Alet

Bconst

Cdefault

Dvar

Attempts:

3 left

💡 Hint

Common Mistakes

Using variable declarations like 'const' or 'let' instead of 'default'.

Omitting the export keyword entirely.

Next.js pages must be exported as default exports. Adding default fixes the error.

4fill in blank

hard

Fill both blanks to create a Next.js API route handler that sends a JSON response.

NextJS

export default function handler(req, res) { res.[1]({ message: '[2]' }); }

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

Ajson

Bsend

CHello from API

DHello World

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send() which sends plain text, not JSON.

Using incorrect message strings.

The res.json() method sends a JSON response. The message string is 'Hello World'.

5fill in blank

hard

Fill all three blanks to create a Next.js page that fetches data server-side and displays it.

NextJS

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

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

AgetServerSideProps

BgetStaticProps

Cjson

Dhttps://api.example.com/data

Attempts:

3 left

💡 Hint

Common Mistakes

Using getStaticProps which runs at build time instead of server-side.

Parsing response with incorrect method like res.text().

getServerSideProps fetches data at request time. The URL is 'https://api.example.com/data'. The response is parsed as JSON with res.json().