Next.js challenges

Practice problem statements with input format, output format, constraints and solutions.

beginner

NextJS Introduction challenge

Build a small solution that uses NextJS Introduction in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>NextJS Introduction</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core nextjs introduction pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>NextJS Introduction solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

App Router Basics challenge

Build a small solution that uses App Router Basics in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 51 });
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core app router basics pattern before polishing the final output.

Solution

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 51 });
}

beginner

Routing and Pages challenge

Build a small solution that uses Routing and Pages in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>Routing and Pages</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core routing and pages pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>Routing and Pages solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

Nested Layouts challenge

Build a small solution that uses Nested Layouts in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>Nested Layouts</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core nested layouts pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>Nested Layouts solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

Dynamic Routes challenge

Build a small solution that uses Dynamic Routes in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 54 });
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core dynamic routes pattern before polishing the final output.

Solution

import { NextResponse } from "next/server";

export async function GET() {
  return NextResponse.json({ active: true, total: 54 });
}

beginner

Linking and Navigating challenge

Build a small solution that uses Linking and Navigating in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>Linking and Navigating</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core linking and navigating pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>Linking and Navigating solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

Server Components challenge

Build a small solution that uses Server Components in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core server components pattern before polishing the final output.

Solution

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}

beginner

Client Components challenge

Build a small solution that uses Client Components in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>Client Components</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core client components pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>Client Components solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

Data Fetching challenge

Build a small solution that uses Data Fetching in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

export default function Page() {
  return <section className="p-6"><h1>Data Fetching</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core data fetching pattern before polishing the final output.

Solution

export default function Page() {
  return <section className="p-6"><h1>Data Fetching solution</h1><p>NextJS App Router pre-rendered page.</p></section>;
}

beginner

Server Actions challenge

Build a small solution that uses Server Actions in Next.js and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core server actions pattern before polishing the final output.

Solution

// NextJS Server Component
import { SITE_URL } from "@/lib/constants";

export default async function Page() {
  const res = await fetch(`${SITE_URL}/api/orders`);
  const orders = await res.json();
  return <main><h1>Orders ({orders.length})</h1></main>;
}