So erstellen und nutzen Sie eine REST-API in Next.js

Next.js ist weithin für seine Fähigkeiten im serverseitigen Rendering und der statischen Site-Generierung bekannt, ermöglicht Ihnen aber auch die Erstellung vollwertiger Anwendungen mit Server -seitige Funktionalität, einschließlich APIs. Mit Next.js können Sie ganz einfach eine REST-API direkt im Framework selbst erstellen, die von Ihrer Frontend-Anwendung oder einem beliebigen externen Dienst genutzt werden kann.

In diesem Blogbeitrag erklären wir Ihnen, wie Sie eine einfache REST-API in Next.js erstellen und diese API sowohl innerhalb Ihrer Anwendung als auch extern nutzen. Am Ende verfügen Sie über ein solides Verständnis dafür, wie Sie APIs in einem Next.js-Projekt erstellen und mit ihnen interagieren.

Erstellen einer REST-API in Next.js

Next.js bietet eine einfache Möglichkeit, API-Routen mithilfe des Verzeichnisses pages/api zu erstellen. Jede Datei, die Sie in diesem Verzeichnis erstellen, wird automatisch zu einem API-Endpunkt, wobei der Dateiname der Route des Endpunkts entspricht.

Schritt 1: Richten Sie ein neues Next.js-Projekt ein

Wenn Sie noch kein Next.js-Projekt haben, können Sie ganz einfach eines erstellen, indem Sie die folgenden Befehle ausführen:

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

Dadurch wird eine grundlegende Next.js-Anwendung erstellt und der Entwicklungsserver gestartet. Sie können jetzt mit dem Aufbau Ihrer REST-API beginnen.

Schritt 2: Erstellen Sie Ihre API-Route

In Next.js werden API-Routen im Ordner pages/api erstellt. Wenn Sie beispielsweise eine einfache API zum Verwalten von Benutzern erstellen möchten, können Sie eine Datei mit dem Namen users.js im Verzeichnis pages/api erstellen.

mkdir pages/api
touch pages/api/users.js

In users.js können Sie die API-Route definieren. Hier ist ein einfaches Beispiel, das mit einer Liste von Benutzern antwortet:

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

Schritt 3: MongoDB-Verbindungsdienstprogramm erstellen
Um sicherzustellen, dass Sie nicht bei jeder API-Anfrage eine neue Datenbankverbindung öffnen, erstellen Sie am besten ein wiederverwendbares MongoDB-Verbindungsdienstprogramm. Sie können dies tun, indem Sie eine lib/mongodb.js-Datei erstellen, die die Verbindung zu Ihrer MongoDB-Instanz und die Wiederverwendung der Verbindung übernimmt.

Hier ist ein Beispiel für ein einfaches MongoDB-Verbindungsdienstprogramm:

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

Schritt 4: Richten Sie den MongoDB-URI in .env.local ein
Um Ihren MongoDB-URI sicher zu speichern, erstellen Sie eine .env.local-Datei im Stammverzeichnis Ihres Projekts. Fügen Sie hier Ihren MongoDB-URI hinzu:

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

Wenn Sie MongoDB Atlas verwenden, können Sie diesen URI über das Atlas-Dashboard abrufen.

Schritt 5: Erstellen Sie eine API-Route für die Interaktion mit MongoDB

Sie können verschiedene HTTP-Methoden (GET, POST, PUT, DELETE) in Ihrer API verarbeiten, indem Sie die Eigenschaft req.method überprüfen. Hier ist eine aktualisierte Version der Datei users.js, die je nach HTTP-Methode unterschiedlich reagiert.

npx create-next-app my-next-api-project
cd my-next-api-project
npm install mongodb
npm run dev

Jetzt ist Ihre API in der Lage, GET-, POST-, PUT- und DELETE-Anfragen zur Benutzerverwaltung zu verarbeiten.

• GET ruft alle Benutzer ab.
• POST fügt einen neuen Benutzer hinzu.
• PUT aktualisiert einen vorhandenen Benutzer.
• LÖSCHENentfernt einen Benutzer.

Schritt 6: Testen der API

Nachdem Sie die API eingerichtet haben, können Sie sie testen, indem Sie Anfragen mit einem Tool wie Postman oder cURL stellen. Hier sind die URLs für jede Methode:

• GET-Anfrage an /api/users, um die Liste der Benutzer abzurufen.
• POST-Anfrage an /api/users, um einen neuen Benutzer zu erstellen (Benutzerdaten im Anfragetext senden).
• PUT-Anfrage an /api/users, um einen vorhandenen Benutzer zu aktualisieren (Benutzerdaten im Anfragetext senden).
• DELETE-Anfrage an /api/users zum Löschen eines Benutzers (senden Sie die Benutzer-ID im Anfragetext).

Schritt 5: Schützen Sie Ihre API (optional)

Möglicherweise möchten Sie Ihrer API eine grundlegende Authentifizierung oder Autorisierung hinzufügen, um unbefugten Zugriff zu verhindern. Sie können dies ganz einfach tun, indem Sie die req.header überprüfen oder Umgebungsvariablen zum Speichern von API-Schlüsseln verwenden. Zum Beispiel:

mkdir pages/api
touch pages/api/users.js

Nutzung der REST-API in Ihrer Next.js-Anwendung

Da Sie nun eine API eingerichtet haben, schauen wir uns an, wie Sie diese in Ihrer Next.js-Anwendung nutzen können. Es gibt mehrere Möglichkeiten, die API zu nutzen, aber der häufigste Ansatz ist die Verwendung von fetch (oder Bibliotheken wie Axios), um HTTP-Anfragen zu stellen.

Schritt 1: Daten mit getServerSideProps abrufen

Wenn Sie serverseitig Daten von Ihrer API abrufen müssen, können Sie getServerSideProps von Next.js verwenden, um Daten vor dem Rendern der Seite abzurufen. Hier ist ein Beispiel dafür, wie Sie Ihren /api/users-Endpunkt innerhalb einer Seitenkomponente nutzen können:

// pages/api/users.js
export default function handler(req, res) {
  // Define a list of users
  const users = [
    { id: 1, name: "John Doe", email: "john@example.com" },
    { id: 2, name: "Jane Smith", email: "jane@example.com" },
  ];

  // Send the list of users as a JSON response
  res.status(200).json(users);
}

Wenn in diesem Beispiel ein Benutzer die Seite /users besucht, ruft getServerSideProps die Liste der Benutzer von der API ab, bevor die Seite gerendert wird. Dadurch wird sichergestellt, dass die Daten bereits beim Laden der Seite verfügbar sind.

Schritt 2: Daten clientseitig mit useEffect abrufen

Sie können die API auch clientseitig nutzen, indem Sie den useEffect-Hook von React verwenden. Dies ist nützlich, um Daten abzurufen, nachdem die Seite geladen wurde.

// lib/mongodb.js
import { MongoClient } from 'mongodb';

const client = new MongoClient(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

let clientPromise;

if (process.env.NODE_ENV === 'development') {
  // In development, use a global variable so the MongoDB client is not re-created on every reload
  if (global._mongoClientPromise) {
    clientPromise = global._mongoClientPromise;
  } else {
    global._mongoClientPromise = client.connect();
    clientPromise = global._mongoClientPromise;
  }
} else {
  // In production, it’s safe to use the MongoClient directly
  clientPromise = client.connect();
}

export default clientPromise;

In diesem Beispiel wird die API-Anfrage gestellt, nachdem die Komponente gemountet wurde, und die Liste der Benutzer wird im Status der Komponente aktualisiert.

Schritt 3: Stellen Sie POST-Anfragen zum Hinzufügen von Daten

Um Daten an Ihre API zu senden, können Sie eine POST-Anfrage verwenden. Hier ist ein Beispiel dafür, wie Sie die Daten eines neuen Benutzers an Ihren /api/users-Endpunkt senden können:

# .env.local
MONGODB_URI=mongodb+srv://<your-user>:<your-password>@cluster0.mongodb.net/mydatabase?retryWrites=true&w=majority

In diesem Beispiel werden der Name und die E-Mail-Adresse eines neuen Benutzers als POST-Anfrage an die API gesendet. Sobald die Anfrage erfolgreich ist, wird eine Warnung angezeigt.

Abschluss

Next.js macht es unglaublich einfach, REST-APIs direkt im selben Framework zu erstellen und zu nutzen. Mithilfe der Funktion API-Routen können Sie serverlose Endpunkte erstellen, die CRUD-Vorgänge verarbeiten und diese nahtlos in Ihr Frontend integrieren können.

In diesem Beitrag haben wir behandelt, wie man eine REST-API in Next.js erstellt, verschiedene HTTP-Methoden verarbeitet und diese API sowohl serverseitig (mit getServerSideProps) als auch clientseitig (mit useEffect) nutzt. Dies eröffnet viele Möglichkeiten zum Erstellen von Full-Stack-Anwendungen mit minimaler Konfiguration.

Next.js bietet Entwicklern weiterhin eine flexible und einfache Lösung zum Erstellen skalierbarer Anwendungen mit integrierter Backend-Funktionalität. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo erstellen und nutzen Sie eine REST-API in Next.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!