Comment créer et utiliser une API REST dans Next.js

Next.js est largement connu pour ses capacités de rendu côté serveur et de génération de sites statiques, mais il vous permet également de créer des applications à part entière avec serveur fonctionnalités côté, y compris les API. Avec Next.js, vous pouvez facilement créer une API REST directement dans le framework lui-même, qui peut être utilisée par votre application frontend ou tout service externe.

Dans cet article de blog, nous expliquerons comment créer une API REST simple dans Next.js et comment utiliser cette API à la fois au sein de votre application et en externe. À la fin, vous aurez une solide compréhension de la façon de créer et d'interagir avec des API dans un projet Next.js.

Création d'une API REST dans Next.js

Next.js fournit un moyen simple de créer des routes API à l'aide du répertoire pages/api. Chaque fichier que vous créez dans ce répertoire devient automatiquement un point de terminaison API, où le nom du fichier correspond à l'itinéraire du point de terminaison.

Étape 1 : Configurer un nouveau projet Next.js

Si vous n'avez pas encore de projet Next.js, vous pouvez facilement en créer un en exécutant les commandes suivantes :

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

Cela créera une application Next.js de base et démarrera le serveur de développement. Vous pouvez maintenant commencer à créer votre API REST.

Étape 2 : Créez votre route API

Dans Next.js, les routes API sont créées dans le dossier pages/api. Par exemple, si vous souhaitez créer une API simple pour gérer les utilisateurs, vous pouvez créer un fichier nommé users.js dans le répertoire pages/api.

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

Dans users.js, vous pouvez définir la route API. Voici un exemple simple qui répond avec une liste d'utilisateurs :

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

Étape 3 : Créer un utilitaire de connexion MongoDB
Pour vous assurer de ne pas ouvrir une nouvelle connexion à la base de données à chaque requête API, il est préférable de créer un utilitaire de connexion MongoDB réutilisable. Vous pouvez le faire en créant un fichier lib/mongodb.js, qui gère la connexion à votre instance MongoDB et la réutilisation de la connexion.

Voici un exemple d'utilitaire de connexion MongoDB simple :

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

Étape 4 : Configurer l'URI MongoDB dans .env.local
Pour stocker en toute sécurité votre URI MongoDB, créez un fichier .env.local dans le répertoire racine de votre projet. Ajoutez votre URI MongoDB ici :

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

Si vous utilisez MongoDB Atlas, vous pouvez obtenir cet URI à partir du tableau de bord Atlas.

Étape 5 : Créer une route API pour interagir avec MongoDB

Vous pouvez gérer différentes méthodes HTTP (GET, POST, PUT, DELETE) dans votre API en inspectant la propriété req.method. Voici une version mise à jour du fichier users.js qui répond différemment en fonction de la méthode HTTP.

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

Désormais, votre API est capable de gérer les requêtes GET, POST, PUT et DELETE pour gérer les utilisateurs.

• GET récupère tous les utilisateurs.
• POST ajoute un nouvel utilisateur.
• PUT met à jour un utilisateur existant.
• DELETE supprime un utilisateur.

Étape 6 : tester l'API

Maintenant que vous avez configuré l'API, vous pouvez la tester en faisant des requêtes à l'aide d'un outil comme Postman ou cURL. Voici les URL de chaque méthode :

• Requête GET à /api/users pour récupérer la liste des utilisateurs.
• Requête POST à ​​/api/users pour créer un nouvel utilisateur (envoyer les données utilisateur dans le corps de la requête).
• PUT requête à /api/users pour mettre à jour un utilisateur existant (envoyer les données utilisateur dans le corps de la requête).
• DELETE demande à /api/users pour supprimer un utilisateur (envoyer l'ID utilisateur dans le corps de la demande).

Étape 5 : Protéger votre API (facultatif)

Vous souhaiterez peut-être ajouter une authentification ou une autorisation de base à votre API pour empêcher tout accès non autorisé. Vous pouvez le faire facilement en inspectant les req.headers ou en utilisant des variables d'environnement pour stocker les clés API. Par exemple :

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

Consommer l'API REST dans votre application Next.js

Maintenant que vous avez configuré une API, voyons comment l'utiliser dans votre application Next.js. Il existe plusieurs façons d'utiliser l'API, mais l'approche la plus courante consiste à utiliser fetch (ou des bibliothèques comme Axios) pour effectuer des requêtes HTTP.

Étape 1 : Récupérer des données avec getServerSideProps

Si vous avez besoin de récupérer des données de votre API côté serveur, vous pouvez utiliser getServerSideProps de Next.js pour récupérer les données avant de rendre la page. Voici un exemple de la façon dont vous pouvez utiliser votre point de terminaison /api/users dans un composant de page :

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

Dans cet exemple, lorsqu'un utilisateur visite la page /users, getServerSideProps récupérera la liste des utilisateurs de l'API avant d'afficher la page. Cela garantit que les données sont déjà disponibles lorsque la page est chargée.

Étape 2 : Récupérer les données côté client avec useEffect

Vous pouvez également utiliser l'API côté client à l'aide du hook useEffect de React. Ceci est utile pour récupérer des données après le chargement de la page.

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

Dans cet exemple, la requête API est effectuée après le montage du composant et la liste des utilisateurs est mise à jour dans l'état du composant.

Étape 3 : Effectuer des requêtes POST pour ajouter des données

Pour envoyer des données à votre API, vous pouvez utiliser une requête POST. Voici un exemple de la façon dont vous pouvez envoyer les données d'un nouvel utilisateur à votre point de terminaison /api/users :

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

Dans cet exemple, le nom et l'adresse e-mail d'un nouvel utilisateur sont envoyés à l'API sous forme de requête POST. Une fois la demande réussie, une alerte s'affiche.

Conclusion

Next.js facilite incroyablement la création et l'utilisation d'API REST directement dans le même framework. En utilisant la fonctionnalité Routes API, vous pouvez créer des points de terminaison sans serveur capables de gérer les opérations CRUD et de les intégrer de manière transparente à votre interface.

Dans cet article, nous avons expliqué comment créer une API REST dans Next.js, gérer différentes méthodes HTTP et utiliser cette API à la fois côté serveur (avec getServerSideProps) et côté client (en utilisant useEffect). Cela ouvre de nombreuses possibilités pour créer des applications full-stack avec une configuration minimale.

Next.js continue de fournir aux développeurs une solution flexible et simple pour créer des applications évolutives avec des fonctionnalités backend intégrées. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!