App directory (App Router) in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic page component in the Next.js App Router.

NextJS

export default function Home() {
  return <[1]>Hello, Next.js App Router!</[1]>;
}

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

Adiv

Bspan

Csection

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using an inline element like span which is less common for main containers.

The div element is a common container for page content in React components.

2fill in blank

medium

Complete the code to export a page component as a React Server Component in Next.js App Router.

NextJS

export default async function Page() {
  const data = await fetch('/api/data');
  const json = await data.json();
  return <pre>{JSON.stringify([1], null, 2)}</pre>;
}

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

Adata

Bjson

CPage

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using the raw fetch response object instead of the parsed JSON.

The variable json holds the parsed JSON data to display.

3fill in blank

hard

Fix the error in the Next.js App Router page component by completing the import statement.

NextJS

import [1] from 'next/navigation';

export default function Page() {
  const router = useRouter();
  return <button onClick={() => router.push('/about')}>Go to About</button>;
}

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

AuseContext

BuseState

CuseEffect

DuseRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks unrelated to routing causes runtime errors.

The useRouter hook from next/navigation is used to navigate programmatically.

4fill in blank

hard

Fill both blanks to create a layout component that wraps page content in Next.js App Router.

NextJS

export default function [1]({ children }) {
  return <[2]>{children}</[2]>;
}

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

ALayout

BPage

Cdiv

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect component names or inline elements for wrapping.

The layout component is conventionally named Layout and uses a div to wrap children.

5fill in blank

hard

Fill all three blanks to create a server action that updates data and redirects in Next.js App Router.

NextJS

import { redirect } from 'next/navigation';

export async function [1](formData) {
  await updateData(formData.get('[2]'));
  [3]('/success');
}

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

AupdateUser

Busername

Credirect

DhandleSubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names or missing the redirect call.

The server action is named updateUser, it gets the username from form data, and calls redirect to navigate after update.