Guide complet : Créer une API avec Next.js et Express, déployée sur Vercel

Vous souhaitez créer une API robuste avec Next.js et Express, et la rendre accessible sur Vercel pour un déploiement rapide et fiable ? Ce guide pas-à-pas vous montrera comment combiner ces technologies pour créer une API performante, et nous verrons les étapes nécessaires pour la configurer et la déployer sur Vercel.

Avant de commencer, assurez-vous d’avoir :

• Node.js installé sur votre machine

• Des connaissances de base en JavaScript et sur les principes d’API REST

• Un compte Vercel

Étapes de l’Intégration

• Implémentation de Next.js dans une API Express déployée sur Vercel

• Implémentation du pattern MVC (à venir)

Structure des dossiers du projet API

Étape 1 : Créer un nouveau Projet

mkdir starter-basic-api-js
cd starter-basic-api-js

Étape 2 : Initialiser le projet

Nous allons installer les paquets Express, Cors et Body-parser

// Initialiser le projet
npm init -y or yarn init -y
// Installation du paquet Express
npm install express or yarn add express
// Installation du paquet Cors
npm install cors or yarn add cors
// Installation du paquet Body-parser
npm install body-parser or yarn add body-parser

Étape 3 : Configurer Vercel

Nous configurons vercel pour que le dossier API soit la racine du projet

{
"version": 2,
"rewrites": [{ "source": "/(.*)", "destination": "/api" }]
}

Étape 4 : Dossier API et les routes

Nous allons créer pour l'exemple 3 routes voici la configuration du fichier index.ts

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const Datas = require('./datas.json');
const app = express();

// Configuration CORS
const corsOptions = { origin: '*', optionsSuccessStatus: 200 };
app.use(cors(corsOptions));
app.use(bodyParser.urlencoded({ extended: true }));
// Point de terminaison racine
app.get('/', (req, res) => {
res.send('Hello world');
});
// Point de terminaison pour récupérer tous les éléments
app.get('/items', (req, res) => {
if (!Datas || Datas.length === 0) {
return res.status(500).json({ message: 'Erreur technique' });
}
res.json(Datas);
});
// Point de terminaison pour récupérer un élément spécifique par son identifiant
app.get('/items/:id([0-9]+)', (req, res) => {
const id = parseInt(req.params.id, 10);
if (isNaN(id)) {
return res.status(400).json({ message: 'Identifiant invalide' });
}
const item = Datas.find(data => data.id === id);
if (!item) {
return res.status(404).json({ message: 'Élément non trouvé' });
}
res.json(item);
});
// Lancement du serveur
app.listen(3000, () => console.log('🚀 Server ready at: 3000 ⭐️'));
module.exports = app;

Étape 5 : Déployer le Projet sur Vercel

Connectez-vous ou créer un compte sur Vercel

Une fois crée, plus qu'a déployer, je vous propose des screens, je pense qu'il serait plus simple pour comprendre.

Créer la connection avec votre plateforme collaborative, en ce qui nous concerne, c'est Github.

Selectionnez le projet à importer

Plus qu'à déployer

Testez votre API

Félicitations ! Vous avez maintenant une API fonctionnant avec Express et déployée sur Vercel. Ce guide vous a montré comment utiliser Express pour créer des routes d’API personnalisées, et nous allons tirer parti de Next.js pour simplifier le déploiement dans la phase 2 de notre guide. Ce setup flexible vous permet de faire évoluer facilement votre API en fonction des besoins de votre projet.

Exemple sur Github