Next.js 15 -täyden pinon verkkosovellukset · Oppitunti

API-reittikäsittelijöiden rakentaminen

Luokaa vankat RESTful API -päätepisteet App Routerin Route Handlers -käsittelijöillä taustalogiikkaa varten.

Oppitunti 1/411 vaihetta

API-reittikäsittelijöiden rakentaminen on ilmainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Next.js 15 -täyden pinon verkkosovellukset-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Tervetuloa Route Handlers -käsittelijöiden pariin

Next.js 15:ssä Route Handlers tarjoaa tehokkaan tavan rakentaa taustajärjestelmän API-päätepisteitä suoraan App Router -projektiin.

Niiden avulla voitte luoda RESTful-rajapintoja, käsitellä webhookeja tai suorittaa mitä tahansa palvelinpuolen logiikkaa samassa paikassa käyttöliittymäkoodin kanssa.

Miksi Route Handlers -käsittelijöitä käytetään?

Route Handlers tarjoaa useita hyötyjä:

Yksinkertaisuus: Erillistä taustapalvelinta ei tarvita.
Yhteissijainti: API-logiikka sijaitsee siihen liittyvien käyttöliittymäkomponenttien vieressä.
Suorituskyky: Ne perustuvat Web Standard API -rajapintoihin, joten ne ovat tehokkaita.
Joustavuus: Ne tukevat kaikkia HTTP-metodeja (GET, POST, PUT, DELETE jne.).

Ensimmäisen käsittelijän luominen

Voitte luoda Route Handler -käsittelijän määrittämällä route.ts- (tai .js-)tiedoston app-hakemistosegmenttiin. Esimerkiksi app/api/hello/route.ts käsittelee osoitteeseen /api/hello lähetetyt pyynnöt.

Viekää tässä tiedostossa funktiot, jotka vastaavat HTTP-metodeja, kuten GET ja POST.

GET-pyyntöjen käsittely

GET-funktio käsittelee HTTP GET -pyynnöt. Se vastaanottaa NextRequest-objektin ja sen tulee palauttaa NextResponse.

Luodaan yksinkertainen Hello World -API-päätepiste.

import { NextResponse } from 'next/server';

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

GET-käsittelijän käyttäminen

Kun edellinen koodiesimerkki sijoitetaan tiedostoon app/api/hello/route.ts, se luo päätepisteen, joka on käytettävissä osoitteessa /api/hello.

Kun siirrytte selaimella osoitteeseen http://localhost:3000/api/hello, näette JSON-vastauksen: {"message":"Hello from API!"}.

POST-pyyntöjen käsittely

Tietojen lähettämiseen käytätte POST-funktiota. Se vastaanottaa myös NextRequest-objektin, joka sisältää pyynnön rungon.

Voitte jäsentää JSON-rungon käyttämällä kutsua 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 }
  );
}

Pyyntöjen tietojen tarkasteleminen

NextRequest-objekti tarjoaa monipuolisen pääsyn pyynnön tietoihin:

request.url: Pyynnön täydellinen URL-osoite.
request.headers: Pyynnön otsakkeet (esimerkiksi request.headers.get('Content-Type')).
request.nextUrl.searchParams: Kyselyparametrit (esimerkiksi ?name=Alice).

Nämä ovat olennaisia dynaamisen ja turvallisen API-logiikan kannalta.

Dynaamiset segmentit käsittelijöissä

Sivujen tavoin myös Route Handlers -käsittelijöillä voi olla dynaamisia segmenttejä. Esimerkki tästä on app/api/items/[id]/route.ts.

Voitte käyttää näitä dynaamisia parametreja käsittelijäfunktiolle välitettävästä params-objektista.

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' });
}

Tilakoodin ja otsakkeiden määrittäminen

Kun palautatte NextResponse-vastauksen, voitte mukauttaa HTTP-tilakoodia ja otsakkeita.

Tämä on tärkeää asianmukaisen API-viestinnän kannalta, esimerkiksi onnistumisen (200, 201) tai virheiden (400, 404, 500) ilmoittamisessa.

import { NextResponse } from 'next/server';

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

Pikatarkistus: Käsittelijöiden perusteet

Haluatte luoda API-päätepisteen osoitteeseen /api/products, joka palauttaa tuoteluettelon GET-pyynnön yhteydessä.

Mikä koodikatkelma määrittää tämän käsittelijän oikein tiedostossa app/api/products/route.ts?

Vastaa interaktiivisessa oppitunnissa

Kertaus: API-käsittelijöiden rakentaminen

Olette oppineet Next.js 15:n Route Handlers -käsittelijöiden perusteet!

Niiden avulla taustajärjestelmän logiikka voidaan sijoittaa samaan paikkaan app-hakemiston kanssa.
Määrittäkää käsittelijät viemällä funktioita (GET, POST jne.) route.ts-tiedostossa.
Käyttäkää NextRequest-objektia pyyntöjen tietojen lukemiseen ja NextResponse-objektia vastausten lähettämiseen.
Dynaamiset segmentit mahdollistavat joustavat API-reitit.

Tämä tehokas ominaisuus sujuvoittaa fullstack-kehitystä Next.js:ssä.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 12
Oppitunnit: 48

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”API-reittikäsittelijöiden rakentaminen” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Next.js 15 -täyden pinon verkkosovellukset-oppimispolun 3 oppituntia, myös oppitunnin “API-reittikäsittelijöiden rakentaminen”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Next.js 15 -täyden pinon verkkosovellukset-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”API-reittikäsittelijöiden rakentaminen”?

Luokaa vankat RESTful API -päätepisteet App Routerin Route Handlers -käsittelijöillä taustalogiikkaa varten. Harjoittelet Next.js 15 -täyden pinon verkkosovellukset-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Next.js 15 -täyden pinon verkkosovellukset-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Next.js 15 -täyden pinon verkkosovellukset-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”API-reittikäsittelijöiden rakentaminen”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Next.js 15 -täyden pinon verkkosovellukset-oppitunnilla?

Kyllä. Jokainen Next.js 15 -täyden pinon verkkosovellukset-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

API-reittikäsittelijöiden rakentaminen
Pyyntöjen validointi ja tietoturva
Ulkoisten palvelujen integrointi
Pyyntörajoitukset ja API-virheiden käsittely

← Takaisin: Next.js 15 -täyden pinon verkkosovellukset