Frontend Academy · Lektion

Next.js API-Routen und Middleware

Erstellen Sie serverlose API-Endpunkte im Verzeichnis api/, verarbeiten Sie Anfragen in Route Handlers und führen Sie Edge-Middleware für Authentifizierung und Weiterleitungen aus.

Next.js API-Routen und Middleware ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum API-Routen?

Next.js liefert einen Server zusammen mit Ihrer App aus. Sie können Backend-Endpunkte neben Ihren Seiten schreiben, ohne ein separates Node-Projekt zu benötigen. Das eignet sich hervorragend für Proxying, Formularübermittlungen, Webhooks und kleine APIs.

API-Routen im Pages Router

Dateien in pages/api/ exportieren eine Standardfunktion mit req und res im Express-Stil.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    return res.json(users);
  }
  if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    return res.status(201).json(user);
  }
  return res.status(405).end();
}

Route Handler im App Router

Der App Router verwendet die standardisierte Web-API Request/Response. Jede HTTP-Methode wird als benannter Export bereitgestellt.

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

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

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

Dynamische API-Routen

Dynamische Segmente funktionieren genauso: app/api/users/[id]/route.ts entspricht /api/users/123.

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

Cookies und Header auslesen

Verwenden Sie im App Router die Hilfsfunktionen aus next/headers, die an die jeweilige Anfrage gebunden sind.

import { cookies, headers } from 'next/headers';

export async function GET() {
  const token = cookies().get('token')?.value;
  const userAgent = headers().get('user-agent');
  // ...
}

Gestreamte Antworten

Route Handler können eine gestreamte Antwort zurückgeben – nützlich für KI-Chat-Vervollständigungen oder die Generierung großer Dateien.

export async function GET() {
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for (let i = 0; i < 5; i++) {
        controller.enqueue(encoder.encode(`chunk ${i}\n`));
        await new Promise(r => setTimeout(r, 500));
      }
      controller.close();
    }
  });
  return new Response(stream);
}

Middleware – vor Routen ausführen

middleware.ts im Stammverzeichnis des Projekts wird ausgeführt, bevor Anfragen Seiten oder API-Routen erreichen. Verwenden Sie sie für Authentifizierungsprüfungen, Weiterleitungen, das Umschreiben von Headern und A/B-Tests.

// middleware.ts
import { NextResponse, type NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('token');
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

Middleware-Matcher

Begrenzen Sie mit einer Matcher-Konfiguration, für welche Pfade die Middleware ausgeführt wird.

export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/:path*',
    '/((?!_next/static|_next/image|favicon.ico).*)'
  ]
};

Middleware-Laufzeit

Die Middleware wird standardmäßig in der Edge Runtime ausgeführt – einer leichtgewichtigen V8-Isolierung, nicht in vollständigem Node. Die verfügbaren APIs sind eingeschränkt: keine Node-Module wie fs und keine nativen Abhängigkeiten.

Authentifizierungsmuster mit Middleware

Ein übliches Vorgehen: Überprüfen Sie ein JWT in der Middleware, leiten Sie bei fehlendem oder ungültigem JWT zur Anmeldung weiter und fügen Sie den dekodierten Benutzer einem Anfrage-Header hinzu, den nachgelagerte Routen auslesen können.

import jwt from 'jsonwebtoken';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', req.url));
  try {
    const decoded = jwt.verify(token, process.env.SECRET!);
    const res = NextResponse.next();
    res.headers.set('x-user-id', String(decoded.sub));
    return res;
  } catch {
    return NextResponse.redirect(new URL('/login', req.url));
  }
}

Ratenbegrenzung in der Middleware

Kombinieren Sie die Middleware mit einem KV-Speicher wie Upstash oder Vercel KV, um Ratenlimits pro IP-Adresse durchzusetzen, bevor Ihre API-Logik erreicht wird.

Wann Sie API-Routen NICHT verwenden sollten

Für separate Microservices oder gemeinsam genutzte APIs sollten Sie ein echtes Backend wie Hono, Express oder NestJS bereitstellen. Die API-Routen von Next.js eignen sich hervorragend für Proxying, Webhooks und anwendungsspezifische Endpunkte – nicht für die Bereitstellung einer öffentlichen API für andere Clients.

Schnelltest

Wo wird die Next.js-Middleware ausgeführt und was ist ihr häufigster Anwendungsfall?

Zusammenfassung: API-Routen und Middleware

Pages Router: pages/api mit req/res. App Router: app/api/.../route.ts mit Methodenexporten (GET/POST usw.) unter Verwendung von Request/Response. Cookies und Header werden über next/headers ausgelesen. Gestreamte Antworten verwenden ReadableStream. middleware.ts wird vor den Routen in der Edge Runtime ausgeführt – für Authentifizierung, Weiterleitungen und Header. Die Matcher-Konfiguration begrenzt die Pfade. Für öffentliche APIs sollten Sie ein echtes Backend verwenden.

Häufig gestellte Fragen

Ist die Lektion „Next.js API-Routen und Middleware“ kostenlos?

Ja — der vollständige Text von „Next.js API-Routen und Middleware“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Next.js API-Routen und Middleware“?

Erstellen Sie serverlose API-Endpunkte im Verzeichnis api/, verarbeiten Sie Anfragen in Route Handlers und führen Sie Edge-Middleware für Authentifizierung und Weiterleitungen aus. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Next.js API-Routen und Middleware“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy