M

MLOG

Norsk

Lær hvordan du utnytter Next.js API-ruter for å bygge serverløse backender direkte i din Next.js-applikasjon. Denne guiden dekker alt fra grunnleggende oppsett til avanserte teknikker for håndtering av autentisering, datalagring og mer.

Next.js API-ruter: Bygg din backend med letthet

Next.js har revolusjonert front-end-utvikling med sine kraftige funksjoner og intuitive struktur. Men visste du at det også kan forenkle backend-utvikling betydelig? Next.js API-ruter lar deg lage serverløse API-endepunkter direkte i din Next.js-applikasjon, og eliminerer i mange tilfeller behovet for en separat backend-server. Denne omfattende guiden vil lede deg gjennom prosessen med å bygge en robust og skalerbar backend ved hjelp av Next.js API-ruter.

Hva er Next.js API-ruter?

API-ruter er serverløse funksjoner som du oppretter i /pages/api-mappen i Next.js-prosjektet ditt. Disse funksjonene håndterer innkommende HTTP-forespørsler og returnerer responser, akkurat som en tradisjonell backend-API. Hovedforskjellen er at de blir deployert som serverløse funksjoner, noe som betyr at du ikke trenger å administrere servere eller infrastruktur.

Tenk på dem som lettvektige, on-demand backend-funksjoner som er sømløst integrert med din Next.js front-end.

Fordeler med å bruke Next.js API-ruter

Kom i gang med Next.js API-ruter

La oss lage en enkel API-rute som returnerer en JSON-respons. Først, sørg for at du har et Next.js-prosjekt satt opp. Hvis ikke, opprett ett ved å bruke:

npx create-next-app my-app
cd my-app

Opprett nå en fil med navnet hello.js i /pages/api-mappen:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

Denne koden definerer en enkel API-rute som svarer med et JSON-objekt som inneholder navnet "John Doe". For å få tilgang til denne API-ruten, start Next.js-utviklingsserveren din:

npm run dev

Åpne deretter nettleseren din og naviger til http://localhost:3000/api/hello. Du bør se følgende JSON-respons:

{"name": "John Doe"}

Forstå API-rute-handleren

handler-funksjonen i API-ruten din mottar to argumenter:

Du kan bruke disse objektene til å håndtere forskjellige typer forespørsler, lese data fra forespørselskroppen, sette respons-headere og sende forskjellige typer responser.

Håndtering av ulike HTTP-metoder

Du kan bruke req.method-egenskapen for å bestemme HTTP-metoden for den innkommende forespørselen og håndtere forskjellige metoder deretter. For eksempel:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Håndter GET-forespørsel
    res.status(200).json({ message: 'Dette er en GET-forespørsel' })
  } else if (req.method === 'POST') {
    // Håndter POST-forespørsel
    res.status(200).json({ message: 'Dette er en POST-forespørsel' })
  } else {
    // Håndter andre metoder
    res.status(405).json({ message: 'Metode ikke tillatt' })
  }
}

I dette eksempelet håndterer API-ruten både GET- og POST-forespørsler. Hvis forespørselsmetoden er GET, svarer den med et JSON-objekt som inneholder meldingen "Dette er en GET-forespørsel". Hvis forespørselsmetoden er POST, svarer den med et JSON-objekt som inneholder meldingen "Dette er en POST-forespørsel". Hvis forespørselsmetoden er noe annet, svarer den med en 405 Metode ikke tillatt-feil.

Lese data fra forespørselskroppen

For POST-, PUT- og PATCH-forespørsler må du ofte lese data fra forespørselskroppen. Next.js gir innebygd støtte for å parse JSON og URL-kodede forespørselskropper. For å parse en JSON-forespørselskropp kan du bruke req.body-egenskapen. For eksempel:

// pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Behandle dataene
    console.log('Navn:', name)
    console.log('E-post:', email)

    res.status(200).json({ message: 'Data mottatt' })
  } else {
    res.status(405).json({ message: 'Metode ikke tillatt' })
  }
}

For å teste denne API-ruten kan du bruke et verktøy som Postman eller curl for å sende en POST-forespørsel med en JSON-kropp:

curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post

Sette respons-headere

Du kan bruke res.setHeader()-metoden for å sette respons-headere. Dette er nyttig for å sette innholdstype, cache-kontroll og annen viktig informasjon. For eksempel:

// pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Hallo, verden!' })
}

I dette eksempelet setter API-ruten Content-Type-headeren til application/json, noe som indikerer at responsen er et JSON-objekt. Den setter også Cache-Control-headeren til s-maxage=3600, som forteller nettleseren og CDN-en å cache responsen i opptil 1 time.

Feilhåndtering

Det er viktig å håndtere feil på en elegant måte i API-rutene dine. Du kan bruke try-catch-blokker for å fange unntak og sende passende feilresponser til klienten. For eksempel:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuler en feil
    throw new Error('Noe gikk galt')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Intern serverfeil' })
  }
}

I dette eksempelet simulerer API-ruten en feil ved å kaste et nytt Error-objekt. Catch-blokken fanger feilen, logger den til konsollen, og sender en 500 Intern serverfeil-respons til klienten. Vurder å bruke et robust loggingsystem som Sentry eller Datadog for produksjonsmiljøer.

Koble til en database

En av de vanligste bruksområdene for API-ruter er å koble til en database. Next.js API-ruter integreres sømløst med ulike databaser, inkludert:

Her er et eksempel på hvordan du kobler til en MongoDB-database i en Next.js API-rute:

// pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Vennligst legg til din Mongo URI i .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // I utviklingsmodus, bruk en global variabel slik at verdien
  // bevares på tvers av modullasting forårsaket av HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // I produksjonsmodus er det best å ikke bruke en global variabel.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Eksporter et modul-scooped MongoClient-løfte. Ved å gjøre dette i en
// separat modul, kan klienten trygt gjenbrukes på tvers av flere
// funksjoner. Se: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Klarte ikke å hente brukere' })
  }
}

Før du kjører denne koden, sørg for at du har mongodb-pakken installert:

npm install mongodb

Du må også sette miljøvariablene MONGODB_URI og MONGODB_DB. Disse variablene bør defineres i .env.local-filen din (eller i innstillingene for miljøvariabler hos din hosting-leverandør for produksjon). MONGODB_URI inneholder tilkoblingsstrengen til din MongoDB-database, og MONGODB_DB spesifiserer databasenavnet.

Autentisering og autorisering

Å beskytte API-rutene dine er avgjørende for sikkerheten. Next.js API-ruter kan sikres ved hjelp av ulike autentiserings- og autoriseringsteknikker, inkludert:

Her er et eksempel på hvordan du beskytter en API-rute ved hjelp av JWT-autentisering:

// pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Uautorisert' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded"-objektet inneholder brukerinformasjonen som er innebygd i tokenet
    // For eksempel: const userId = decoded.userId;

    // Fortsett å behandle forespørselen
    res.status(200).json({ message: 'Beskyttet ressurs tilgjengeliggjort' })
  } catch (error) {
    return res.status(401).json({ message: 'Ugyldig token' })
  }
}

Før du kjører denne koden, sørg for at du har jsonwebtoken-pakken installert:

npm install jsonwebtoken

Du må også sette JWT_SECRET-miljøvariabelen. Dette bør være en sterk, tilfeldig generert hemmelig nøkkel som brukes til å signere og verifisere JWT-er. Lagre denne sikkert og eksponer den aldri i din klient-side-kode.

Middleware

Selv om Next.js ikke tilbyr tradisjonell middleware for API-ruter på samme måte som Express.js, kan du oppnå lignende funksjonalitet ved å pakke inn API-rute-handlerne dine med gjenbrukbare funksjoner. Dette lar deg utføre oppgaver som:

Her er et eksempel på hvordan du lager en enkel logging-middleware:

// utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

For å bruke denne middlewaren, pakk bare API-rute-handleren din inn med withLogging-funksjonen:

// pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'Denne forespørselen ble logget' })
}

export default withLogging(handler)

Beste praksis for å bygge Next.js API-ruter

Avanserte teknikker

Bakgrunnsjobber

For langvarige oppgaver som ikke bør blokkere API-responsen, vurder å bruke bakgrunnsjobber. Du kan bruke biblioteker som BullMQ eller Bree for å administrere bakgrunnsjobbene dine og behandle dem asynkront.

WebSockets

For sanntidsapplikasjoner kan du bruke WebSockets i Next.js API-rutene dine. Biblioteker som Socket.IO og ws gjør det enkelt å etablere vedvarende forbindelser mellom klienten og serveren.

GraphQL

Hvis du trenger en mer fleksibel og effektiv måte å hente data på, vurder å bruke GraphQL. Du kan bruke biblioteker som Apollo Server eller Yoga for å lage et GraphQL API-endepunkt i Next.js-applikasjonen din.

Konklusjon

Next.js API-ruter gir en kraftig og praktisk måte å bygge serverløse backender direkte i Next.js-applikasjonen din. Ved å utnytte fordelene med serverløs arkitektur kan du forenkle utviklingen, forbedre ytelsen og redusere kostnadene. Enten du bygger et enkelt kontaktskjema eller en kompleks e-handelsplattform, kan Next.js API-ruter hjelpe deg med å lage en robust og skalerbar backend med letthet. Med en solid forståelse av det grunnleggende og anvendelse av beste praksis, kan du utnytte dette kraftige verktøyet til å lage effektive, sikre og globalt tilgjengelige applikasjoner.