Next.js API Routes: Eenvoudig je Backend Bouwen

Next.js heeft een revolutie teweeggebracht in front-end ontwikkeling met zijn krachtige functies en intuïtieve structuur. Maar wist je dat het ook de backend-ontwikkeling aanzienlijk kan vereenvoudigen? Met Next.js API Routes kun je serverless API-eindpunten direct binnen je Next.js-applicatie creëren, waardoor in veel gevallen een aparte backend-server overbodig wordt. Deze uitgebreide gids leidt je door het proces van het bouwen van een robuuste en schaalbare backend met behulp van Next.js API Routes.

Wat zijn Next.js API Routes?

API Routes zijn serverless functies die je aanmaakt in de /pages/api map van je Next.js-project. Deze functies verwerken inkomende HTTP-verzoeken en sturen antwoorden terug, net als een traditionele backend-API. Het belangrijkste verschil is dat ze worden geïmplementeerd als serverless functies, wat betekent dat je geen servers of infrastructuur hoeft te beheren.

Zie ze als lichtgewicht, on-demand backend-functies die naadloos zijn geïntegreerd met je Next.js front-end.

Voordelen van het Gebruik van Next.js API Routes

• Vereenvoudigde Ontwikkeling: Schrijf zowel je front-end- als backend-code in hetzelfde project, met JavaScript of TypeScript. Geen contextwisselingen meer tussen verschillende projecten en technologieën.
• Serverless Architectuur: Profiteer van de schaalbaarheid, betrouwbaarheid en kosteneffectiviteit van serverless computing. Betaal alleen voor de resources die je verbruikt.
• Eenvoudige Implementatie: Implementeer je volledige applicatie (front-end en backend) met één enkel commando via platforms zoals Vercel of Netlify.
• Ingebouwde Beveiliging: Next.js en serverless platforms bieden ingebouwde beveiligingsfuncties om je API-eindpunten te beschermen.
• Verbeterde Prestaties: API Routes kunnen dichter bij je gebruikers worden geïmplementeerd, wat de latentie vermindert en de prestaties verbetert, wat vooral voordelig is voor gebruikers wereldwijd.
• Herbruikbaarheid van Code: Deel code tussen je front-end en backend, waardoor codeduplicatie wordt verminderd en de onderhoudbaarheid wordt verbeterd.

Aan de Slag met Next.js API Routes

Laten we een eenvoudige API-route maken die een JSON-antwoord retourneert. Zorg er eerst voor dat je een Next.js-project hebt opgezet. Zo niet, maak er dan een aan met:

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

              
                Copy
              
            
          

Maak nu een bestand aan met de naam hello.js in de map /pages/api:

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

            

              
                Copy
              
            
          

Deze code definieert een eenvoudige API-route die antwoordt met een JSON-object met de naam "John Doe". Om deze API-route te benaderen, start je je Next.js-ontwikkelingsserver:

            npm run dev
            

              
                Copy
              
            
          

Open vervolgens je browser en navigeer naar http://localhost:3000/api/hello. Je zou het volgende JSON-antwoord moeten zien:

            {"name": "John Doe"}
            

              
                Copy
              
            
          

De API Route Handler Begrijpen

De handler-functie in je API-route ontvangt twee argumenten:

• req: Een instantie van http.IncomingMessage, die informatie bevat over het inkomende verzoek, zoals de verzoekmethode, headers en body.
• res: Een instantie van http.ServerResponse, waarmee je een antwoord terug kunt sturen naar de client.

Je kunt deze objecten gebruiken om verschillende soorten verzoeken af te handelen, data uit de request body te lezen, response headers in te stellen en verschillende soorten antwoorden te verzenden.

Verschillende HTTP-Methoden Afhandelen

Je kunt de req.method-eigenschap gebruiken om de HTTP-methode van het inkomende verzoek te bepalen en verschillende methoden dienovereenkomstig af te handelen. Bijvoorbeeld:

            // pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Verwerk GET-verzoek
    res.status(200).json({ message: 'Dit is een GET-verzoek' })
  } else if (req.method === 'POST') {
    // Verwerk POST-verzoek
    res.status(200).json({ message: 'Dit is een POST-verzoek' })
  } else {
    // Verwerk andere methoden
    res.status(405).json({ message: 'Methode Niet Toegestaan' })
  }
}

            

              
                Copy
              
            
          

In dit voorbeeld handelt de API-route zowel GET- als POST-verzoeken af. Als de verzoekmethode GET is, antwoordt het met een JSON-object met het bericht "Dit is een GET-verzoek". Als de verzoekmethode POST is, antwoordt het met een JSON-object met het bericht "Dit is een POST-verzoek". Als de verzoekmethode iets anders is, antwoordt het met een 405 Method Not Allowed-fout.

Data Lezen uit de Request Body

Voor POST-, PUT- en PATCH-verzoeken moet je vaak data uit de request body lezen. Next.js biedt ingebouwde ondersteuning voor het parsen van JSON en URL-gecodeerde request bodies. Om een JSON request body te parsen, kun je de req.body-eigenschap gebruiken. Bijvoorbeeld:

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

    // Verwerk de data
    console.log('Naam:', name)
    console.log('E-mail:', email)

    res.status(200).json({ message: 'Data succesvol ontvangen' })
  } else {
    res.status(405).json({ message: 'Methode Niet Toegestaan' })
  }
}

            

              
                Copy
              
            
          

Om deze API-route te testen, kun je een tool zoals Postman of curl gebruiken om een POST-verzoek met een JSON-body te sturen:

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

              
                Copy
              
            
          

Response Headers Instellen

Je kunt de res.setHeader()-methode gebruiken om response headers in te stellen. Dit is handig voor het instellen van het contenttype, cache control en andere belangrijke informatie. Bijvoorbeeld:

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

            

              
                Copy
              
            
          

In dit voorbeeld stelt de API-route de Content-Type-header in op application/json, wat aangeeft dat het antwoord een JSON-object is. Het stelt ook de Cache-Control-header in op s-maxage=3600, wat de browser en CDN vertelt om het antwoord tot 1 uur te cachen.

Foutafhandeling

Het is belangrijk om fouten correct af te handelen in je API-routes. Je kunt try-catch-blokken gebruiken om uitzonderingen op te vangen en passende foutreacties naar de client te sturen. Bijvoorbeeld:

            // pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simuleer een fout
    throw new Error('Er is iets misgegaan')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Interne Server Fout' })
  }
}

            

              
                Copy
              
            
          

In dit voorbeeld simuleert de API-route een fout door een nieuw Error-object te gooien. Het catch-blok vangt de fout op, logt deze naar de console en stuurt een 500 Internal Server Error-antwoord naar de client. Overweeg een robuust logsysteem zoals Sentry of Datadog te gebruiken voor productieomgevingen.

Verbinding Maken met een Database

Een van de meest voorkomende toepassingen voor API-routes is het verbinden met een database. Next.js API Routes integreren naadloos met verschillende databases, waaronder:

• MongoDB: Een populaire NoSQL-database die zeer geschikt is voor flexibele en ongestructureerde data.
• PostgreSQL: Een krachtige en open-source relationele database die bekend staat om zijn betrouwbaarheid en data-integriteit.
• MySQL: Een andere populaire open-source relationele database die veel wordt gebruikt voor webapplicaties.
• Firebase: Een cloudgebaseerd platform dat een real-time database en andere diensten biedt.
• FaunaDB: Een serverless database die is ontworpen voor wereldwijde applicaties.

Hier is een voorbeeld van hoe je verbinding maakt met een MongoDB-database in een Next.js API-route:

            // 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('Voeg uw Mongo URI toe aan .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // In ontwikkelmodus, gebruik een globale variabele zodat de waarde
  // behouden blijft bij het herladen van modules veroorzaakt door HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // In productiemodus is het beter om geen globale variabele te gebruiken.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exporteer een module-scoped MongoClient promise. Door dit in een
// aparte module te doen, kan de client veilig worden hergebruikt over meerdere
// functies.  Zie: 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: 'Ophalen van gebruikers mislukt' })
  }
}

            

              
                Copy
              
            
          

Voordat je deze code uitvoert, zorg ervoor dat je het mongodb-pakket hebt geïnstalleerd:

            npm install mongodb
            

              
                Copy
              
            
          

Je moet ook de omgevingsvariabelen MONGODB_URI en MONGODB_DB instellen. Deze variabelen moeten worden gedefinieerd in je .env.local-bestand (of de instellingen voor omgevingsvariabelen van je hostingprovider voor productie). De MONGODB_URI bevat de verbindingsreeks naar je MongoDB-database, en MONGODB_DB specificeert de databasenaam.

Authenticatie en Autorisatie

Het beveiligen van je API-routes is cruciaal voor de veiligheid. Next.js API Routes kunnen worden beveiligd met verschillende authenticatie- en autorisatietechnieken, waaronder:

• JSON Web Tokens (JWT): Een standaard voor het veilig verzenden van informatie tussen partijen als een JSON-object.
• API-sleutels: Een eenvoudige manier om de toegang tot je API-eindpunten te beperken.
• OAuth: Een delegatieprotocol waarmee gebruikers derde partijen toegang kunnen verlenen tot hun bronnen zonder hun inloggegevens te delen.
• NextAuth.js: Een complete open-source authenticatieoplossing voor Next.js-applicaties.

Hier is een voorbeeld van hoe je een API-route beveiligt met JWT-authenticatie:

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

  try {
    const decoded = jwt.verify(token, secret)
    // Het "decoded"-object bevat de gebruikersinformatie die in de token is ingebed
    // Bijvoorbeeld: const userId = decoded.userId;

    // Ga door met het verwerken van het verzoek
    res.status(200).json({ message: 'Beschermde bron succesvol benaderd' })
  } catch (error) {
    return res.status(401).json({ message: 'Ongeldige token' })
  }
}

            

              
                Copy
              
            
          

Voordat je deze code uitvoert, zorg ervoor dat je het jsonwebtoken-pakket hebt geïnstalleerd:

            npm install jsonwebtoken
            

              
                Copy
              
            
          

Je moet ook de JWT_SECRET omgevingsvariabele instellen. Dit moet een sterke, willekeurig gegenereerde geheime sleutel zijn die wordt gebruikt om JWT's te ondertekenen en te verifiëren. Bewaar deze veilig en stel hem nooit bloot in je client-side code.

Middleware

Hoewel Next.js geen traditionele middleware voor API-routes biedt op dezelfde manier als Express.js, kun je vergelijkbare functionaliteit bereiken door je API-route handlers te omwikkelen met herbruikbare functies. Hiermee kun je taken uitvoeren zoals:

• Authenticatie: Verifieer gebruikersgegevens voordat toegang tot API-eindpunten wordt toegestaan.
• Autorisatie: Controleer of een gebruiker de benodigde rechten heeft om een specifieke actie uit te voeren.
• Logging: Log inkomende verzoeken en uitgaande antwoorden voor audit- en foutopsporingsdoeleinden.
• Validatie: Valideer verzoekdata om ervoor te zorgen dat deze aan specifieke criteria voldoet.
• Rate Limiting: Bescherm je API tegen misbruik door het aantal verzoeken dat een gebruiker binnen een bepaalde periode kan doen te beperken.

Hier is een voorbeeld van hoe je een eenvoudige logging-middleware maakt:

            // 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
              
            
          

Om deze middleware te gebruiken, omwikkel je simpelweg je API-route handler met de withLogging-functie:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Dit verzoek is gelogd' })
}

export default withLogging(handler)

            

              
                Copy
              
            
          

Best Practices voor het Bouwen van Next.js API Routes

• Houd je API-routes klein en gefocust. Elke API-route moet een specifieke taak of resource afhandelen.
• Gebruik omgevingsvariabelen voor gevoelige data. Hardcode nooit geheimen of API-sleutels in je code.
• Valideer verzoekdata om beveiligingskwetsbaarheden te voorkomen. Gebruik een bibliotheek zoals Joi of Yup om request bodies te valideren.
• Handel fouten correct af en geef informatieve foutmeldingen. Gebruik try-catch-blokken en log fouten naar een centrale locatie.
• Gebruik caching om de prestaties te verbeteren. Cache veelgebruikte data om de databasebelasting te verminderen.
• Monitor je API-routes op prestaties en fouten. Gebruik een monitoringtool zoals Sentry of Datadog om de gezondheid van je API bij te houden.
• Documenteer je API-routes met een tool zoals Swagger of OpenAPI. Dit maakt het voor andere ontwikkelaars gemakkelijker om je API te gebruiken.
• Overweeg TypeScript te gebruiken voor typeveiligheid. TypeScript kan je helpen fouten vroegtijdig op te sporen en de onderhoudbaarheid van je code te verbeteren.
• Denk vanaf het begin na over internationalisatie (i18n). Als je applicatie door gebruikers uit verschillende landen wordt gebruikt, ontwerp je API-routes dan zo dat ze meerdere talen en valuta's ondersteunen. API-eindpunten voor e-commerce moeten bijvoorbeeld mogelijk verschillende belastingtarieven en verzendkosten afhandelen op basis van de locatie van de gebruiker.
• Implementeer een juiste CORS (Cross-Origin Resource Sharing) configuratie. Dit is cruciaal wanneer je API wordt benaderd vanaf een ander domein dan je Next.js-applicatie. Configureer CORS zorgvuldig om alleen geautoriseerde origins toegang te geven tot je API-resources.

Geavanceerde Technieken

Achtergrondtaken

Voor langdurige taken die de API-respons niet mogen blokkeren, overweeg het gebruik van achtergrondtaken. Je kunt bibliotheken zoals BullMQ of Bree gebruiken om je achtergrondtaken te beheren en ze asynchroon te verwerken.

WebSockets

Voor real-time applicaties kun je WebSockets gebruiken in je Next.js API-routes. Bibliotheken zoals Socket.IO en ws maken het eenvoudig om persistente verbindingen tussen de client en de server tot stand te brengen.

GraphQL

Als je een flexibelere en efficiëntere manier nodig hebt om data op te halen, overweeg dan het gebruik van GraphQL. Je kunt bibliotheken zoals Apollo Server of Yoga gebruiken om een GraphQL API-eindpunt in je Next.js-applicatie te creëren.

Conclusie

Next.js API Routes bieden een krachtige en handige manier om serverless backends direct binnen je Next.js-applicatie te bouwen. Door de voordelen van een serverless architectuur te benutten, kun je de ontwikkeling vereenvoudigen, de prestaties verbeteren en de kosten verlagen. Of je nu een eenvoudig contactformulier of een complex e-commerceplatform bouwt, Next.js API Routes kunnen je helpen om met gemak een robuuste en schaalbare backend te creëren. Met een solide begrip van de fundamenten en de toepassing van best practices, kun je deze krachtige tool benutten om efficiënte, veilige en wereldwijd toegankelijke applicaties te maken.