Next.js & React

API Route

What It Is

A serverless function that handles backend logic within your Next.js app

Analogy

A waiter who can also cook — handles the request and prepares the response

Try It Out

TypeScriptapp/api/users/route.ts
1400">class=400">class="text-emerald-400">"text-zinc-500 italic">// app/api/users/route.ts
2400">import { NextResponse } 400">from 400">class="text-emerald-400">'next/server';
3 
4400">export 400">async 400">function GET() {
5 400">const users = 400">await db.users.findMany();
6 400">return NextResponse.json(users);
7}
8 
9400">export 400">async 400">function POST(request: Request) {
10 400">const body = 400">await request.json();
11 400">const user = 400">await db.users.create({ data: body });
12 400">return NextResponse.json(user, { status: 201 });
13}

Related Terms in Next.js & React

Framework

A food truck that comes with the kitchen already set up — you just add your recipes

Component

LEGO blocks — each one is self-contained, and you combine them to build something bigger

Props

Instructions given when you delegate a task — "here's what you need to know"

State

The current mood of your restaurant — busy, slow, sold out — and the sign you flip accordingly