When will you use this?

Reach for data fetching and Server Actions when pages need database content or form submissions.

• Enrollments, quiz scores, and course progress load from the server — often with Server Actions.
• Forms that enroll a student in a course use Server Actions instead of a separate REST call.

Real-world: ShopNest storefront

The E-commerce team building ShopNest storefront uses API Route Handlers to expose JSON endpoints for mobile apps or webhooks. customers and admins never see the TypeScript files — they just get a fast, reliable product pages, cart, and checkout flow.

Production-style code

// app/api/courses/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const courses = [
    { id: '1', title: 'Next.js Fundamentals', lessons: 24 }
  ];
  return NextResponse.json(courses);
}

What happens in production: In ShopNest storefront, getting API Route Handlers right means customers and admins trust the product pages, cart, and checkout flow every day.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

// app/api/courses/route.ts
import { NextResponse } from 'next/server';

const courses = [
  { id: '1', title: 'Next.js Fundamentals', lessons: 24 },
  { id: '2', title: 'TypeScript Essentials', lessons: 18 }
];

export async function GET() {
  return NextResponse.json(courses);
}

export async function POST(request: Request) {
  const body = await request.json();
  return NextResponse.json({ created: body }, { status: 201 });
}

Line-by-line walkthrough

How it works (big picture)

• GET returns JSON array.
• POST reads request.json() for body.
• Status 201 means created.
• Same-origin fetch from Client Components can call these URLs.

Do this on your computer

1. Create app/api/courses/route.ts
2. Open /api/courses in browser
3. POST with curl or Thunder Client
4. Add basic error handling for invalid JSON
5. Read the real-world section and name which part of LearnHub uses this topic.
6. Run the example locally with npm run dev and confirm the same behavior.
7. Change one value in the example (route, text, or course id) and predict what will happen before you save.

Experiments — try changing this

• Change a string or route in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error overlay, then fix it.
• Change the API URL or course id and see how the page data changes.
• Use npm run dev while editing API Route Handlers — the page hot-reloads on save.

Remember

route.ts = API endpoint. Export HTTP method functions. NextResponse.json for JSON bodies.

Common questions