⚡Backend

API Routes in Next.js

Dein Backend direkt in Next.js bauen

Du brauchst keinen separaten Backend-Server. Next.js Route Handlers lassen dich APIs direkt neben deinen Seiten bauen. Gleicher Tech-Stack, gleiches Deployment, null Extra-Infrastruktur.

Pro-Tip — Der schnelle Weg
Nutze Route Handlers nur fuer einfache APIs und Webhooks. Fuer komplexe Business-Logik mit vielen Endpunkten ist ein separater Backend-Service langfristig wartbarer.
Seite 1
1

Route Handler erstellen

Erstelle eine route.ts Datei im app-Verzeichnis. Der Dateipfad bestimmt die URL. Exportiere benannte Funktionen fuer HTTP-Methoden.

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


export async function GET() {
 const users = await db.user.findMany();
 return NextResponse.json(users);
}


export async function POST(request: Request) {
 const body = await request.json();
 const user = await db.user.create({ data: body });
 return NextResponse.json(user, { status: 201 });
}
2

Dynamische Routen

Fuer einzelne Ressourcen nutze dynamische Segmente mit eckigen Klammern. Der Parameter kommt ueber die params.

// app/api/users/[id]/route.ts
export async function GET(request: Request, { params }: { params: { id: string } }) {
 const user = await db.user.findUnique({ where: { id: params.id } });
 if (!user) return NextResponse.json({ error: 'Not found' }, { status: 404 });
 return NextResponse.json(user);
}
3

Request validieren

Validiere eingehende Daten immer bevor du sie verarbeitest. Zod ist perfekt dafuer weil es TypeScript-Typen automatisch ableitet.

import { z } from 'zod';


const CreateUserSchema = z.object({
 name: z.string().min(2),
 email: z.string().email(),
});


export async function POST(request: Request) {
 const body = await request.json();
 const parsed = CreateUserSchema.safeParse(body);
 if (!parsed.success) return NextResponse.json(parsed.error.issues, { status: 400 });
 // ... create user
}
4

Error Handling einbauen

Fange Fehler sauber ab und gib hilfreiche HTTP-Statuscodes zurueck. Ein try-catch um die gesamte Handler-Logik reicht fuer den Anfang.

export async function POST(request: Request) {
 try {
 const body = await request.json();
 const user = await db.user.create({ data: body });
 return NextResponse.json(user, { status: 201 });
 } catch (error) {
 console.error('Create user failed:', error);
 return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
 }
}
Seite 2
Warum das funktioniert
  • Kein separater Server spart Infrastruktur und Deployment-Komplexitaet
  • TypeScript End-to-End bedeutet gleiche Typen im Frontend und Backend
  • Vercel deployed API Routes automatisch als serverlose Funktionen
  • Zod-Validierung verhindert ungueltige Daten bevor sie die Datenbank erreichen
Tipps
  • Route Handlers sind standardmaessig nicht gecacht bei dynamischen Daten
  • Nutze NextRequest statt Request fuer Zugriff auf Cookies und Search Params
  • Gruppiere verwandte Routes in Ordner wie api/auth, api/users, api/products
  • Teste deine API Routes mit Tools wie Thunder Client oder einfach fetch im Browser
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen