Why Next.js over plain React - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Next.js page component that renders a heading.

NextJS

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

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

A<Welcome to Next.js!>

BWelcome to Next.js!

C"Welcome to Next.js!"

DWelcome to Next.js

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Using angle brackets instead of quotes

The heading text must be a string inside quotes in JSX.

2fill in blank

medium

Complete the code to import the Next.js Link component for navigation.

NextJS

import [1] from 'next/link';

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

ALink

BRouter

CNavLink

DNavigation

Attempts:

3 left

💡 Hint

Common Mistakes

Using React Router components instead

Misspelling the component name

Next.js uses the Link component from 'next/link' for client-side navigation.

3fill in blank

hard

Fix the error in this Next.js server component export statement.

NextJS

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

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

AApp

Bpage

CPage

Dhome

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Page' instead of lowercase

Using generic names like 'App' or 'home'

In Next.js App Router, the default export for a page file must be named page (lowercase) to be recognized as a server component.

4fill in blank

hard

Fill both blanks to create a server action that updates state and triggers a re-render.

NextJS

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  async function increment() {
    await [1](count + 1);
  }

  return (
    <button onClick=[2]>Count: {count}</button>
  );
}

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

AsetCount

Bcount + 1

C() => increment()

Dincrement()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling increment directly in onClick

Passing count + 1 directly to onClick

The increment function calls setCount to update state. The button's onClick needs a function, so we pass () => increment().

5fill in blank

hard

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

NextJS

export async function [1](req, res) {
  const data = { message: 'Hello from API' };
  res.[2](200).[3](data);
}

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

AGET

Bstatus

Cjson

Dsend

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'get' instead of uppercase 'GET'

Using 'send' instead of 'json' to send JSON response

Next.js API routes export HTTP method functions like GET. The response uses status(200) to set status and json(data) to send JSON.