M

MLOG

Nederlands

Leer hoe je Next.js API Routes kunt gebruiken om serverless backends te bouwen direct in je Next.js-applicatie. Deze gids behandelt alles van de basisinstallatie tot geavanceerde technieken voor authenticatie, datapersistentie en meer.

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

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

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

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

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

{"name": "John Doe"}

De API Route Handler Begrijpen

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

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

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

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

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

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

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:

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

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

npm install mongodb

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:

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

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

npm install jsonwebtoken

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:

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

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)

Best Practices voor het Bouwen van Next.js API Routes

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.