Next.js 15: fullstack-webbappar · Lektion

Bygga API-routehanterare

Skapa robusta RESTful API-endpoints med App Routers Route Handlers för backendlogik.

Lektion 1 av 411 steg

Bygga API-routehanterare är en gratis lektion i Next.js 15: fullstack-webbappar på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Next.js 15: fullstack-webbappar, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Välkommen till Route Handlers

I Next.js 15 är Route Handlers det kraftfulla sättet att bygga API-endpoints för backend direkt i ditt App Router-projekt.

Med dem kan du skapa RESTful-API:er, hantera webhooks eller utföra valfri logik på serversidan, allt samlat tillsammans med din frontendkod.

Varför använda Route Handlers?

Route Handlers erbjuder flera fördelar:

Enkelhet: Du behöver ingen separat backendserver.
Samlokalisering: API-logiken finns intill relaterade UI-komponenter.
Prestanda: De bygger på Web Standard APIs, vilket gör dem effektiva.
Flexibilitet: De stöder alla HTTP-metoder (GET, POST, PUT, DELETE med flera).

Skapa din första handler

Om du vill skapa en Route Handler definierar du en fil med namnet route.ts (eller .js) i ett segment i katalogen app. Till exempel hanterar app/api/hello/route.ts förfrågningar till /api/hello.

I den här filen exporterar du funktioner som motsvarar HTTP-metoder, till exempel GET och POST.

Hantera GET-förfrågningar

Funktionen GET hanterar HTTP GET-förfrågningar. Den tar emot ett NextRequest-objekt och ska returnera en NextResponse.

Vi skapar en enkel API-endpoint för ”hello world”.

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from API!' });
}

Så kommer du åt GET-handlern

Det föregående kodexemplet, placerat i app/api/hello/route.ts, skapar en endpoint som är tillgänglig på /api/hello.

När du går till http://localhost:3000/api/hello i webbläsaren ser du JSON-svaret: {"message":"Hello from API!"}.

Hantera POST-förfrågningar

För att skicka data använder du funktionen POST. Den tar också emot objektet NextRequest, som innehåller förfrågans body.

Du kan tolka JSON-bodyn med await request.json().

import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const data = await request.json();
  return NextResponse.json(
    { message: 'Data received', data },
    { status: 200 }
  );
}

Åtkomst till förfrågningsdetaljer

Objektet NextRequest ger omfattande åtkomst till förfrågningsdetaljer:

request.url: Den fullständiga URL:en för förfrågan.
request.headers: Förfrågans headers (till exempel request.headers.get('Content-Type')).
request.nextUrl.searchParams: Frågeparametrar (till exempel ?name=Alice).

Dessa är avgörande för dynamisk och säker API-logik.

Dynamiska segment i handlers

Precis som sidor kan Route Handlers ha dynamiska segment. Till exempel app/api/items/[id]/route.ts.

Du kommer åt dessa dynamiska parametrar via objektet params som skickas till handlerfunktionen.

import { NextRequest, NextResponse } from 'next/server';

interface Params {
  params: { id: string };
}

export async function GET(
  request: NextRequest,
  { params }: Params
) {
  const id = params.id; // '123' for /api/items/123
  return NextResponse.json({ itemId: id, message: 'Fetched item' });
}

Ange status och headers

När du returnerar en NextResponse kan du anpassa HTTP-statuskoden och headers.

Detta är viktigt för korrekt API-kommunikation, till exempel för att ange lyckade resultat (200, 201) eller fel (400, 404, 500).

import { NextResponse } from 'next/server';

export async function DELETE() {
  return new NextResponse(null, { status: 204 }); // No Content
}

Snabbkontroll: Grunderna i handlers

Du vill skapa en API-endpoint på /api/products som returnerar en lista med produkter när en GET-förfrågan görs.

Vilket kodexempel konfigurerar den här handlern korrekt i app/api/products/route.ts?

Besvara frågan i den interaktiva lektionen

Sammanfattning: Bygga API-handlers

Du har lärt dig grunderna i Route Handlers i Next.js 15!

De gör det möjligt att ha backendlogik samlad i katalogen app.
Definiera handlers genom att exportera funktioner (GET, POST med flera) i en fil med namnet route.ts.
Använd NextRequest för att komma åt förfrågningsdetaljer och NextResponse för att skicka svar.
Dynamiska segment möjliggör flexibla API-rutter.

Den här kraftfulla funktionen effektiviserar fullstackutveckling i Next.js.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 12
Lektioner: 48

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bygga API-routehanterare” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Next.js 15: fullstack-webbappar, inklusive ”Bygga API-routehanterare”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Next.js 15: fullstack-webbappar innehåller totalt 4 lektioner.

Vad lär jag mig i ”Bygga API-routehanterare”?

Skapa robusta RESTful API-endpoints med App Routers Route Handlers för backendlogik. Ni övar på Next.js 15: fullstack-webbappar med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Next.js 15: fullstack-webbappar?

Du behöver inga förkunskaper. Utbildningen i Next.js 15: fullstack-webbappar på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Bygga API-routehanterare”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Next.js 15: fullstack-webbappar-lektionen?

Ja. Varje Next.js 15: fullstack-webbappar-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Bygga API-routehanterare
Validering av anrop och säkerhet
Integrera externa tjänster
Hastighetsbegränsning och felhantering för API:er

← Tillbaka till Next.js 15: fullstack-webbappar