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

• Forenklet udvikling: Skriv både din frontend- og backend-kode i samme projekt ved hjælp af JavaScript eller TypeScript. Ikke mere kontekstskifte mellem forskellige projekter og teknologier.
• Serverless arkitektur: Drag fordel af skalerbarheden, pålideligheden og omkostningseffektiviteten ved serverless computing. Betal kun for de ressourcer, du bruger.
• Nem implementering: Implementer hele din applikation (frontend og backend) med en enkelt kommando ved hjælp af platforme som Vercel eller Netlify.
• Indbygget sikkerhed: Next.js og serverless platforme tilbyder indbyggede sikkerhedsfunktioner til at beskytte dine API-endepunkter.
• Forbedret ydeevne: API Routes kan implementeres tættere på dine brugere, hvilket reducerer latenstid og forbedrer ydeevnen, hvilket især er en fordel for brugere globalt.
• Genbrugelighed af kode: Del kode mellem din frontend og backend, hvilket reducerer kodeduplikering og forbedrer vedligeholdeligheden.

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
            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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

            {"name": "John Doe"}
            

              
                Copy
              
            
          

Forståelse af API Route Handler

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

• req: En instans af http.IncomingMessage, som indeholder information om den indkommende anmodning, såsom anmodningsmetode, headers og body.
• res: En instans af http.ServerResponse, som giver dig mulighed for at sende et svar tilbage til klienten.

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

            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

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

            

              
                Copy
              
            
          

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:

• MongoDB: En populær NoSQL-database, der er velegnet til fleksible og ustrukturerede data.
• PostgreSQL: En kraftfuld og open-source relationel database, der er kendt for sin pålidelighed og dataintegritet.
• MySQL: Endnu en populær open-source relationel database, der er meget brugt til webapplikationer.
• Firebase: En skybaseret platform, der tilbyder en realtidsdatabase og andre tjenester.
• FaunaDB: En serverless database, der er designet til globale applikationer.

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

            

              
                Copy
              
            
          

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

            npm install mongodb
            

              
                Copy
              
            
          

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:

• JSON Web Tokens (JWT): En standard for sikker overførsel af information mellem parter som et JSON-objekt.
• API-nøgler: En simpel måde at begrænse adgangen til dine API-endepunkter.
• OAuth: En delegeringsprotokol, der giver brugere mulighed for at give tredjepartsapplikationer adgang til deres ressourcer uden at dele deres legitimationsoplysninger.
• NextAuth.js: En komplet open-source autentificeringsløsning til Next.js-applikationer.

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

            

              
                Copy
              
            
          

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

            npm install jsonwebtoken
            

              
                Copy
              
            
          

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:

• Autentificering: Verificer brugeroplysninger, før der gives adgang til API-endepunkter.
• Autorisation: Kontroller, om en bruger har de nødvendige tilladelser til at udføre en bestemt handling.
• Logning: Log indkommende anmodninger og udgående svar til revisions- og fejlfindingsformål.
• Validering: Valider anmodningsdata for at sikre, at de opfylder specifikke kriterier.
• Rate Limiting: Beskyt din API mod misbrug ved at begrænse antallet af anmodninger, en bruger kan foretage inden for en given tidsperiode.

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

            

              
                Copy
              
            
          

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)

            

              
                Copy
              
            
          

Bedste praksis for at bygge Next.js API Routes

• Hold dine API-ruter små og fokuserede. Hver API-rute bør håndtere en specifik opgave eller ressource.
• Brug miljøvariabler til følsomme data. Hardcode aldrig hemmeligheder eller API-nøgler i din kode.
• Valider anmodningsdata for at forhindre sikkerhedssårbarheder. Brug et bibliotek som Joi eller Yup til at validere request bodies.
• Håndter fejl elegant og giv informative fejlmeddelelser. Brug try-catch-blokke og log fejl til en central placering.
• Brug caching til at forbedre ydeevnen. Cache data, der ofte tilgås, for at reducere databasebelastningen.
• Overvåg dine API-ruter for ydeevne og fejl. Brug et overvågningsværktøj som Sentry eller Datadog til at spore din API's tilstand.
• Dokumenter dine API-ruter ved hjælp af et værktøj som Swagger eller OpenAPI. Dette gør det lettere for andre udviklere at bruge din API.
• Overvej at bruge TypeScript for typesikkerhed. TypeScript kan hjælpe dig med at fange fejl tidligt og forbedre vedligeholdeligheden af din kode.
• Tænk på internationalisering (i18n) fra starten. Hvis din applikation skal bruges af brugere fra forskellige lande, skal du designe dine API-ruter til at understøtte flere sprog og valutaer. For eksempel kan API-endepunkter til e-handel have brug for at håndtere forskellige skattesatser og forsendelsesomkostninger baseret på brugerens placering.
• Implementer korrekt CORS (Cross-Origin Resource Sharing) konfiguration. Dette er afgørende, når din API tilgås fra et andet domæne end din Next.js-applikation. Konfigurer omhyggeligt CORS for kun at tillade autoriserede oprindelser at få adgang til dine API-ressourcer.

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.