Why optimization matters for performance in NextJS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

NextJS

import [1] from 'next/image';

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

APicture

Bimg

CImage

DNextImage

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'img' instead of 'Image' which is a standard HTML tag, not the Next.js optimized component.

Using 'Picture' or 'NextImage' which are not valid imports.

The Next.js Image component is imported as Image from 'next/image'. This component helps optimize images automatically.

2fill in blank

medium

Complete the code to use the Next.js Image component with a fixed width and height.

NextJS

<Image src="/logo.png" alt="Logo" width=[1] height={50} />

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

A100

B"100"

C"100px"

Dpx100

Attempts:

3 left

💡 Hint

Common Mistakes

Passing width as a string with quotes or units causes errors.

Using invalid values like 'px100' which is not a number.

The width and height props expect numbers, not strings with units. So use 100 without quotes or units.

3fill in blank

hard

Fix the error in the Next.js API route handler to send a JSON response.

NextJS

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

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

Awrite

Bsend

Crender

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using res.send() which is not recommended in Next.js API routes.

Using res.render() which is for server-side rendering, not API responses.

In Next.js API routes, res.json() sends a JSON response properly.

4fill in blank

hard

Fill both blanks to create a dynamic route in Next.js that fetches data based on the URL parameter.

NextJS

export async function getServerSideProps(context) {
  const id = context.params.[1];
  const res = await fetch(`https://api.example.com/data/$[2]`);
  const data = await res.json();
  return { props: { data } };
}

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

Aid

Bslug

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'id' and 'slug' inconsistently causes errors.

Using undefined parameter names.

The URL parameter is accessed via context.params.id, and the same id is used in the fetch URL.

5fill in blank

hard

Fill all three blanks to optimize a Next.js page by using React's useMemo hook to memoize a computed value.

NextJS

import { useMemo } from 'react';

export default function Page({ items }) {
  const total = useMemo(() => items.[1]((sum, item) => sum [2] item.value, [3]), [items]);
  return <div>Total: {total}</div>;
}

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

Areduce

B+

C0

Dmap

Attempts:

3 left

💡 Hint

Common Mistakes

Using map instead of reduce for summing values.

Using wrong initial value or operator causing incorrect totals.

Use reduce to sum values, + as the operator, and 0 as the initial sum value. useMemo memoizes this calculation for performance.