M

MLOG

Dansk

Lær hvordan du udnytter Next.js API Routes til at bygge serverless backends direkte i din Next.js-applikation. Denne guide dækker alt fra grundlæggende opsætning til avancerede teknikker for håndtering af autentificering, datapersistens og meget mere.

Next.js API Routes: Byg din backend med lethed

Next.js har revolutioneret front-end-udvikling med sine kraftfulde funktioner og intuitive struktur. Men vidste du, at det også kan forenkle backend-udvikling betydeligt? Next.js API Routes giver dig mulighed for at oprette serverless API-endepunkter direkte i din Next.js-applikation, hvilket i mange tilfælde fjerner behovet for en separat backend-server. Denne omfattende guide vil lede dig gennem processen med at bygge en robust og skalerbar backend ved hjælp af Next.js API Routes.

Hvad er Next.js API Routes?

API Routes er serverless funktioner, som du opretter i din /pages/api-mappe i dit Next.js-projekt. Disse funktioner håndterer indkommende HTTP-forespørgsler og returnerer svar, ligesom en traditionel backend-API. Den vigtigste forskel er, at de implementeres som serverless funktioner, hvilket betyder, at du ikke behøver at administrere servere eller infrastruktur.

Tænk på dem som letvægts, on-demand backend-funktioner, der er problemfrit integreret med din Next.js-frontend.

Fordele ved at bruge Next.js API Routes

Kom i gang med Next.js API Routes

Lad os oprette en simpel API-rute, der returnerer et JSON-svar. Sørg først for, at du har et Next.js-projekt sat op. Hvis ikke, opret et ved hjælp af:

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

Opret nu en fil ved navn hello.js i mappen /pages/api:

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

Denne kode definerer en simpel API-rute, der svarer med et JSON-objekt indeholdende navnet "John Doe". For at tilgå denne API-rute, start din Next.js-udviklingsserver:

npm run dev

Åbn derefter din browser og naviger til http://localhost:3000/api/hello. Du skulle se følgende JSON-svar:

{"name": "John Doe"}

Forståelse af API Route Handler

handler-funktionen i din API-rute modtager to argumenter:

Du kan bruge disse objekter til at håndtere forskellige typer anmodninger, læse data fra anmodningens body, sætte svar-headers og sende forskellige typer svar.

Håndtering af forskellige HTTP-metoder

Du kan bruge req.method-egenskaben til at bestemme HTTP-metoden for den indkommende anmodning og håndtere forskellige metoder i overensstemmelse hermed. For eksempel:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Håndter GET-anmodning
    res.status(200).json({ message: 'This is a GET request' })
  } else if (req.method === 'POST') {
    // Håndter POST-anmodning
    res.status(200).json({ message: 'This is a POST request' })
  } else {
    // Håndter andre metoder
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

I dette eksempel håndterer API-ruten både GET- og POST-anmodninger. Hvis anmodningsmetoden er GET, svarer den med et JSON-objekt, der indeholder beskeden "This is a GET request". Hvis anmodningsmetoden er POST, svarer den med et JSON-objekt, der indeholder beskeden "This is a POST request". Hvis anmodningsmetoden er noget andet, svarer den med en 405 Method Not Allowed-fejl.

Læsning af data fra anmodningens body

For POST-, PUT- og PATCH-anmodninger skal du ofte læse data fra anmodningens body. Next.js har indbygget understøttelse af at parse JSON og URL-enkodede request bodies. For at parse en JSON request body kan du bruge req.body-egenskaben. For eksempel:

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

    // Behandl dataene
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Data received successfully' })
  } else {
    res.status(405).json({ message: 'Method Not Allowed' })
  }
}

For at teste denne API-rute kan du bruge et værktøj som Postman eller curl til at sende en POST-anmodning med en JSON-body:

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

Indstilling af svar-headers

Du kan bruge res.setHeader()-metoden til at indstille svar-headers. Dette er nyttigt til at indstille content type, cache control og anden vigtig information. 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: 'Hello, world!' })
}

I dette eksempel indstiller API-ruten Content-Type-headeren til application/json, hvilket indikerer, at svaret er et JSON-objekt. Den indstiller også Cache-Control-headeren til s-maxage=3600, hvilket fortæller browseren og CDN'en, at de skal cache svaret i op til 1 time.

Fejlhåndtering

Det er vigtigt at håndtere fejl elegant i dine API-ruter. Du kan bruge try-catch-blokke til at fange undtagelser og sende passende fejlsvar til klienten. For eksempel:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuler en fejl
    throw new Error('Something went wrong')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internal Server Error' })
  }
}

I dette eksempel simulerer API-ruten en fejl ved at kaste et nyt Error-objekt. Catch-blokken fanger fejlen, logger den til konsollen og sender et 500 Internal Server Error-svar til klienten. Overvej at bruge et robust logningssystem som Sentry eller Datadog i produktionsmiljøer.

Forbindelse til en database

Et af de mest almindelige anvendelsestilfælde for API-ruter er at oprette forbindelse til en database. Next.js API Routes integreres problemfrit med forskellige databaser, herunder:

Her er et eksempel på, hvordan man opretter forbindelse 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('Tilføj venligst din Mongo URI til .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // I udviklingstilstand skal du bruge en global variabel, så værdien
  // bevares på tværs af modulgenindlæsninger forårsaget af HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // I produktionstilstand er det bedst ikke at bruge en global variabel.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Eksporter et modul-scooped MongoClient promise. Ved at gøre dette i et
// separat modul kan klienten sikkert genbruges på tværs af flere
// funktioner.  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: 'Failed to fetch users' })
  }
}

Før du kører denne kode, skal du sørge for, at du har mongodb-pakken installeret:

npm install mongodb

Du skal også indstille miljøvariablerne MONGODB_URI og MONGODB_DB. Disse variabler skal defineres i din .env.local-fil (eller din hostingudbyders indstillinger for miljøvariabler til produktion). MONGODB_URI indeholder forbindelsesstrengen til din MongoDB-database, og MONGODB_DB specificerer databasenavnet.

Autentificering og autorisation

Beskyttelse af dine API-ruter er afgørende for sikkerheden. Next.js API Routes kan sikres ved hjælp af forskellige autentificerings- og autorisationsteknikker, herunder:

Her er et eksempel på, hvordan man beskytter en API-rute ved hjælp af JWT-autentificering:

// 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: 'Unauthorized' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded"-objektet indeholder brugerinformationen, der er indlejret i tokenet
    // For eksempel: const userId = decoded.userId;

    // Fortsæt med at behandle anmodningen
    res.status(200).json({ message: 'Protected resource accessed successfully' })
  } catch (error) {
    return res.status(401).json({ message: 'Invalid token' })
  }
}

Før du kører denne kode, skal du sørge for, at du har jsonwebtoken-pakken installeret:

npm install jsonwebtoken

Du skal også indstille miljøvariablen JWT_SECRET. Dette skal være en stærk, tilfældigt genereret hemmelig nøgle, der bruges til at signere og verificere JWT'er. Opbevar denne sikkert og eksponer den aldrig i din klient-side-kode.

Middleware

Selvom Next.js ikke tilbyder traditionel middleware til API-ruter på samme måde som Express.js, kan du opnå lignende funktionalitet ved at wrappe dine API-rutehandlere med genanvendelige funktioner. Dette giver dig mulighed for at udføre opgaver som:

Her er et eksempel på, hvordan man opretter en simpel lognings-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 at bruge denne middleware skal du blot wrappe din API-rutehandler med withLogging-funktionen:

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

async function handler(req, res) {
  res.status(200).json({ message: 'This request was logged' })
}

export default withLogging(handler)

Bedste praksis for at bygge Next.js API Routes

Avancerede teknikker

Baggrundsjobs

For langvarige opgaver, der ikke bør blokere API-svaret, kan du overveje at bruge baggrundsjobs. Du kan bruge biblioteker som BullMQ eller Bree til at administrere dine baggrundsjobs og behandle dem asynkront.

WebSockets

For realtidsapplikationer kan du bruge WebSockets i dine Next.js API-ruter. Biblioteker som Socket.IO og ws gør det nemt at etablere vedvarende forbindelser mellem klienten og serveren.

GraphQL

Hvis du har brug for en mere fleksibel og effektiv måde at hente data på, kan du overveje at bruge GraphQL. Du kan bruge biblioteker som Apollo Server eller Yoga til at oprette et GraphQL API-endepunkt i din Next.js-applikation.

Konklusion

Next.js API Routes giver en kraftfuld og bekvem måde at bygge serverless backends direkte i din Next.js-applikation. Ved at udnytte fordelene ved serverless arkitektur kan du forenkle udviklingen, forbedre ydeevnen og reducere omkostningerne. Uanset om du bygger en simpel kontaktformular eller en kompleks e-handelsplatform, kan Next.js API Routes hjælpe dig med at skabe en robust og skalerbar backend med lethed. Med en solid forståelse af de grundlæggende principper og anvendelse af bedste praksis kan du udnytte dette kraftfulde værktøj til at skabe effektive, sikre og globalt tilgængelige applikationer.

Next.js API Routes: Byg din backend med lethed | MLOG