M

MLOG

Deutsch

Erfahren Sie, wie Sie Next.js API-Routen nutzen, um serverseitige Backends direkt in Ihrer Next.js-Anwendung zu erstellen. Dieser Leitfaden behandelt alles von der grundlegenden Einrichtung bis hin zu fortgeschrittenen Techniken.

Next.js API-Routen: Erstellen Sie Ihr Backend mit Leichtigkeit

Next.js hat die Frontend-Entwicklung mit seinen leistungsstarken Funktionen und seiner intuitiven Struktur revolutioniert. Aber wussten Sie, dass es auch die Backend-Entwicklung erheblich vereinfachen kann? Mit Next.js API-Routen können Sie serverseitige API-Endpunkte direkt in Ihrer Next.js-Anwendung erstellen, wodurch in vielen Fällen ein separater Backend-Server überflüssig wird. Dieser umfassende Leitfaden führt Sie durch den Prozess des Aufbaus eines robusten und skalierbaren Backends mit Next.js API-Routen.

Was sind Next.js API-Routen?

API-Routen sind serverseitige Funktionen, die Sie in Ihrem /pages/api-Verzeichnis in Ihrem Next.js-Projekt erstellen. Diese Funktionen verarbeiten eingehende HTTP-Anfragen und geben Antworten zurück, genau wie eine herkömmliche Backend-API. Der Hauptunterschied besteht darin, dass sie als serverseitige Funktionen bereitgestellt werden, was bedeutet, dass Sie keine Server oder Infrastruktur verwalten müssen.

Stellen Sie sie sich als leichtgewichtige, bei Bedarf verfügbare Backend-Funktionen vor, die nahtlos in Ihr Next.js-Frontend integriert sind.

Vorteile der Verwendung von Next.js API-Routen

Erste Schritte mit Next.js API-Routen

Lassen Sie uns eine einfache API-Route erstellen, die eine JSON-Antwort zurückgibt. Stellen Sie zunächst sicher, dass Sie ein Next.js-Projekt eingerichtet haben. Falls nicht, erstellen Sie eines mit:

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

Erstellen Sie nun eine Datei namens hello.js im Verzeichnis /pages/api:

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

Dieser Code definiert eine einfache API-Route, die mit einem JSON-Objekt antwortet, das den Namen „John Doe“ enthält. Um auf diese API-Route zuzugreifen, starten Sie Ihren Next.js-Entwicklungsserver:

npm run dev

Öffnen Sie dann Ihren Browser und navigieren Sie zu http://localhost:3000/api/hello. Sie sollten die folgende JSON-Antwort sehen:

{"name": "John Doe"}

Den API-Routen-Handler verstehen

Die handler-Funktion in Ihrer API-Route erhält zwei Argumente:

Sie können diese Objekte verwenden, um verschiedene Arten von Anfragen zu bearbeiten, Daten aus dem Anfrage-Body zu lesen, Antwort-Header zu setzen und verschiedene Arten von Antworten zu senden.

Umgang mit verschiedenen HTTP-Methoden

Sie können die req.method-Eigenschaft verwenden, um die HTTP-Methode der eingehenden Anfrage zu bestimmen und verschiedene Methoden entsprechend zu behandeln. Zum Beispiel:

// pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // GET-Anfrage bearbeiten
    res.status(200).json({ message: 'Dies ist eine GET-Anfrage' })
  } else if (req.method === 'POST') {
    // POST-Anfrage bearbeiten
    res.status(200).json({ message: 'Dies ist eine POST-Anfrage' })
  } else {
    // Andere Methoden bearbeiten
    res.status(405).json({ message: 'Methode nicht erlaubt' })
  }
}

In diesem Beispiel behandelt die API-Route sowohl GET- als auch POST-Anfragen. Wenn die Anfragemethode GET ist, antwortet sie mit einem JSON-Objekt, das die Nachricht „Dies ist eine GET-Anfrage“ enthält. Wenn die Anfragemethode POST ist, antwortet sie mit einem JSON-Objekt, das die Nachricht „Dies ist eine POST-Anfrage“ enthält. Wenn die Anfragemethode eine andere ist, antwortet sie mit einem 405 „Methode nicht erlaubt“-Fehler.

Lesen von Daten aus dem Anfrage-Body

Für POST-, PUT- und PATCH-Anfragen müssen Sie oft Daten aus dem Anfrage-Body lesen. Next.js bietet integrierte Unterstützung für das Parsen von JSON- und URL-kodierten Anfrage-Bodys. Um einen JSON-Anfrage-Body zu parsen, können Sie die req.body-Eigenschaft verwenden. Zum Beispiel:

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

    // Die Daten verarbeiten
    console.log('Name:', name)
    console.log('Email:', email)

    res.status(200).json({ message: 'Daten erfolgreich empfangen' })
  } else {
    res.status(405).json({ message: 'Methode nicht erlaubt' })
  }
}

Um diese API-Route zu testen, können Sie ein Tool wie Postman oder curl verwenden, um eine POST-Anfrage mit einem JSON-Body zu senden:

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

Setzen von Antwort-Headern

Sie können die res.setHeader()-Methode verwenden, um Antwort-Header zu setzen. Dies ist nützlich, um den Inhaltstyp, die Cache-Steuerung und andere wichtige Informationen festzulegen. Zum Beispiel:

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

In diesem Beispiel setzt die API-Route den Content-Type-Header auf application/json, was anzeigt, dass die Antwort ein JSON-Objekt ist. Sie setzt auch den Cache-Control-Header auf s-maxage=3600, was dem Browser und dem CDN mitteilt, die Antwort für bis zu 1 Stunde zwischenzuspeichern.

Fehlerbehandlung

Es ist wichtig, Fehler in Ihren API-Routen ordnungsgemäß zu behandeln. Sie können try-catch-Blöcke verwenden, um Ausnahmen abzufangen und entsprechende Fehlerantworten an den Client zu senden. Zum Beispiel:

// pages/api/error.js
export default async function handler(req, res) {
  try {
    // Einen Fehler simulieren
    throw new Error('Etwas ist schiefgelaufen')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Interner Serverfehler' })
  }
}

In diesem Beispiel simuliert die API-Route einen Fehler, indem sie ein neues Error-Objekt wirft. Der catch-Block fängt den Fehler ab, protokolliert ihn in der Konsole und sendet eine 500 „Interner Serverfehler“-Antwort an den Client. Erwägen Sie die Verwendung eines robusten Protokollierungssystems wie Sentry oder Datadog für Produktionsumgebungen.

Verbindung zu einer Datenbank herstellen

Einer der häufigsten Anwendungsfälle für API-Routen ist die Verbindung zu einer Datenbank. Next.js API-Routen lassen sich nahtlos in verschiedene Datenbanken integrieren, darunter:

Hier ist ein Beispiel, wie man sich in einer Next.js API-Route mit einer MongoDB-Datenbank verbindet:

// 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('Bitte fügen Sie Ihre Mongo URI zu .env.local hinzu')
}

if (process.env.NODE_ENV === 'development') {
  // Im Entwicklungsmodus eine globale Variable verwenden, damit der Wert
  // über Modul-Neuladungen durch HMR (Hot Module Replacement) hinweg erhalten bleibt.
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // Im Produktionsmodus ist es am besten, keine globale Variable zu verwenden.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Ein Modul-gebundenes MongoClient-Promise exportieren. Indem dies in einem
// separaten Modul geschieht, kann der Client sicher über mehrere
// Funktionen hinweg wiederverwendet werden. Siehe: 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: 'Benutzer konnten nicht abgerufen werden' })
  }
}

Bevor Sie diesen Code ausführen, stellen Sie sicher, dass Sie das mongodb-Paket installiert haben:

npm install mongodb

Sie müssen auch die Umgebungsvariablen MONGODB_URI und MONGODB_DB setzen. Diese Variablen sollten in Ihrer .env.local-Datei (oder in den Umgebungsvariableneinstellungen Ihres Hosting-Anbieters für die Produktion) definiert werden. Die MONGODB_URI enthält die Verbindungszeichenfolge zu Ihrer MongoDB-Datenbank und MONGODB_DB gibt den Datenbanknamen an.

Authentifizierung und Autorisierung

Der Schutz Ihrer API-Routen ist für die Sicherheit von entscheidender Bedeutung. Next.js API-Routen können mit verschiedenen Authentifizierungs- und Autorisierungstechniken gesichert werden, darunter:

Hier ist ein Beispiel, wie man eine API-Route mit JWT-Authentifizierung schützt:

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

  try {
    const decoded = jwt.verify(token, secret)
    // Das „decoded“-Objekt enthält die im Token eingebetteten Benutzerinformationen
    // Zum Beispiel: const userId = decoded.userId;

    // Die Anfrage weiterverarbeiten
    res.status(200).json({ message: 'Geschützte Ressource erfolgreich aufgerufen' })
  } catch (error) {
    return res.status(401).json({ message: 'Ungültiger Token' })
  }
}

Bevor Sie diesen Code ausführen, stellen Sie sicher, dass Sie das jsonwebtoken-Paket installiert haben:

npm install jsonwebtoken

Sie müssen auch die Umgebungsvariable JWT_SECRET setzen. Dies sollte ein starker, zufällig generierter geheimer Schlüssel sein, der zum Signieren und Verifizieren von JWTs verwendet wird. Bewahren Sie diesen sicher auf und geben Sie ihn niemals in Ihrem clientseitigen Code preis.

Middleware

Obwohl Next.js keine traditionelle Middleware für API-Routen auf die gleiche Weise wie Express.js anbietet, können Sie eine ähnliche Funktionalität erreichen, indem Sie Ihre API-Routen-Handler mit wiederverwendbaren Funktionen umschließen. Dies ermöglicht es Ihnen, Aufgaben wie die folgenden auszuführen:

Hier ist ein Beispiel, wie man eine einfache Protokollierungs-Middleware erstellt:

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

Um diese Middleware zu verwenden, umschließen Sie einfach Ihren API-Routen-Handler mit der withLogging-Funktion:

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

async function handler(req, res) {
  res.status(200).json({ message: 'Diese Anfrage wurde protokolliert' })
}

export default withLogging(handler)

Best Practices für die Erstellung von Next.js API-Routen

Fortgeschrittene Techniken

Hintergrund-Jobs

Für lang andauernde Aufgaben, die die API-Antwort nicht blockieren sollten, sollten Sie Hintergrund-Jobs in Betracht ziehen. Sie können Bibliotheken wie BullMQ oder Bree verwenden, um Ihre Hintergrund-Jobs zu verwalten und sie asynchron zu verarbeiten.

WebSockets

Für Echtzeitanwendungen können Sie WebSockets in Ihren Next.js API-Routen verwenden. Bibliotheken wie Socket.IO und ws erleichtern den Aufbau dauerhafter Verbindungen zwischen dem Client und dem Server.

GraphQL

Wenn Sie eine flexiblere und effizientere Methode zum Abrufen von Daten benötigen, sollten Sie GraphQL in Betracht ziehen. Sie können Bibliotheken wie Apollo Server oder Yoga verwenden, um einen GraphQL-API-Endpunkt in Ihrer Next.js-Anwendung zu erstellen.

Fazit

Next.js API-Routen bieten eine leistungsstarke und bequeme Möglichkeit, serverseitige Backends direkt in Ihrer Next.js-Anwendung zu erstellen. Durch die Nutzung der Vorteile der serverseitigen Architektur können Sie die Entwicklung vereinfachen, die Leistung verbessern und die Kosten senken. Egal, ob Sie ein einfaches Kontaktformular oder eine komplexe E-Commerce-Plattform erstellen, Next.js API-Routen können Ihnen dabei helfen, mühelos ein robustes und skalierbares Backend zu erstellen. Mit einem soliden Verständnis der Grundlagen und der Anwendung von Best Practices können Sie dieses leistungsstarke Werkzeug nutzen, um effiziente, sichere und global zugängliche Anwendungen zu erstellen.