When will you use this?

Use Route Handlers when a mobile app, webhook, or external client needs JSON from your server.

• Mobile apps and partner sites call your Next.js Route Handlers for JSON over HTTP.
• Webhook endpoints for payment providers live in app/api routes.

Real-world: ShopNest storefront

The E-commerce team building ShopNest storefront uses Streaming and Suspense to apply Streaming and Suspense when building product pages, cart, and checkout flow. customers and admins never see the TypeScript files — they just get a fast, reliable product pages, cart, and checkout flow.

Production-style code

import { Suspense } from 'react';
import { LessonListSkeleton } from '@/components/LessonListSkeleton';
import { LessonList } from '@/components/LessonList';

export default function CoursePage() {
  return (
    <main>
      <h1>Next.js Masterclass</h1>
      <Suspense fallback={<LessonListSkeleton />}>
        <LessonList courseId="nextjs-101" />
      </Suspense>
    </main>
  );
}

What happens in production: In ShopNest storefront, getting Streaming and Suspense 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.

import { Suspense } from 'react';
import { LessonListSkeleton } from '@/components/LessonListSkeleton';
import { LessonList } from '@/components/LessonList';

export default function CoursePage() {
  return (
    <main>
      <h1>Next.js Masterclass</h1>
      <Suspense fallback={<LessonListSkeleton />}>
        <LessonList courseId="nextjs-101" />
      </Suspense>
    </main>
  );
}

Line-by-line walkthrough

How it works (big picture)

• Wrap slow Server Components in Suspense.
• Next.js streams the shell first, then the lesson list when data arrives.

Do this on your computer

1. Create a LessonList async Server Component with a slow fetch.
2. Wrap it in Suspense with a skeleton fallback.
3. Reload and watch the shell appear before the list.
4. Read the real-world section and name which part of LearnHub uses this topic.
5. Run the example locally with npm run dev and confirm the same behavior.
6. 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.
• Use npm run dev while editing Streaming and Suspense — the page hot-reloads on save.

Remember

Streaming improves perceived speed. Suspense defines loading boundaries. Split fast and slow UI on the same page.

Common questions