Créer une API Next.js + Express déployée sur Vercel

Créer une API performante avec Next.js et Express représente aujourd'hui l'une des approches les plus efficaces pour les équipes qui souhaitent un déploiement rapide sans sacrifier la robustesse. Ce guide vous accompagne étape par étape : de l'initialisation du projet jusqu'à la mise en ligne sur Vercel, en passant par la configuration des routes et les pièges courants à éviter.

Prérequis avant de commencer

Avant de lancer la moindre commande, vérifiez que votre environnement est correctement configuré :

• Node.js (version 18 ou supérieure recommandée) installé sur votre machine
• Connaissances de base en JavaScript et en principes d'API REST (méthodes HTTP, codes de statut, format JSON)
• Un compte Vercel — la création est gratuite et prend deux minutes
• Un dépôt Git (GitHub, GitLab ou Bitbucket) connecté à votre compte Vercel pour le déploiement continu

Voici les étapes de l'intégration documentées dans ce guide :

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

Structure des dossiers du projet API

Avant de créer les fichiers, il est utile de visualiser l'arborescence cible. Une structure claire sépare les responsabilités et facilite la maintenance à long terme. Le dossier api/ contiendra le point d'entrée Express ; Vercel détecte automatiquement ce dossier comme racine serverless grâce au fichier vercel.json.

Étape 1 : Créer un nouveau projet

Créez un répertoire dédié et positionnez-vous dedans. Piège courant : ne placez pas ce dossier à l'intérieur d'un projet Next.js existant — l'API doit être un projet indépendant pour que Vercel puisse la déployer en tant que fonction serverless isolée.

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

Étape 2 : Initialiser le projet et installer les dépendances

Trois paquets sont nécessaires : Express (framework HTTP), Cors (requêtes cross-origin) et Body-parser (décodage des corps de requête). L'ordre d'installation n'a pas d'importance, mais les middlewares devront être déclarés avant les routes dans le code.

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

Sans cors, les appels depuis un navigateur sur un domaine différent seront bloqués. Sans body-parser, Express ne pourra pas lire les corps de requêtes POST/PUT.

Étape 3 : Configurer Vercel

Ce fichier vercel.json à la racine est indispensable. Il redirige toutes les requêtes entrantes vers votre dossier api/, quelle que soit l'URL appelée. Sans cette règle, Vercel ne saurait pas déléguer les routes à votre handler Express.

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

La règle (.*) capture tous les segments d'URL et les transmet à Express, qui prend ensuite le relais pour le routage interne.

Étape 4 : Dossier API et les routes

Voici le cœur de l'API : le fichier api/index.js déclare trois routes d'exemple. Notez que module.exports = app est obligatoire — c'est ce qui permet à Vercel d'importer votre application Express comme handler serverless.

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;

La regex ([0-9]+) dans /items/:id filtre les identifiants non numériques directement au niveau du routage, avant d'atteindre le handler — une bonne pratique de défense en profondeur. En production, remplacez origin: '*' par la liste explicite des domaines autorisés.

Étape 5 : Déployer le projet sur Vercel

Connectez-vous sur Vercel et reliez votre dépôt Git. Le déploiement se fait en trois clics.

Créez la connexion avec votre plateforme collaborative — ici GitHub :

Sélectionnez le projet à importer :

Plus qu'à déployer :

Vercel génère automatiquement une URL de production (votre-projet.vercel.app) et une URL de prévisualisation pour chaque branche. Chaque git push sur la branche principale déclenche un nouveau déploiement automatique.

Félicitations ! Vous disposez maintenant d'une API fonctionnant avec Express et déployée sur Vercel. Ce setup flexible vous permet de faire évoluer facilement votre API en ajoutant des routes, des middlewares d'authentification ou une connexion base de données. La phase 2 du guide montrera comment tirer parti de Next.js pour structurer et optimiser davantage vos endpoints.

Code source complet disponible sur Github. Pour aller plus loin sur la structuration d'API en Node.js, consultez aussi notre guide sur le pattern MVC et notre section création d'application web.

FAQ

Peut-on utiliser TypeScript à la place de JavaScript dans cette configuration ?

Oui, Vercel supporte TypeScript nativement. Renommez index.js en index.ts, ajoutez typescript et @types/express en dépendances de développement, et créez un tsconfig.json adapté. La configuration vercel.json reste identique.

Mon API fonctionne en local mais retourne une erreur 404 sur Vercel — pourquoi ?

La cause la plus fréquente est un vercel.json absent ou mal formé. Vérifiez que la règle de réécriture pointe bien vers /api et que votre fichier d'entrée s'appelle index.js à l'intérieur du dossier api/. Consultez l'onglet Functions dans le tableau de bord Vercel pour voir les logs d'exécution en temps réel.

Comment sécuriser les routes sensibles avec une clé API ?

Créez un middleware Express qui vérifie la présence d'un header x-api-key avant de laisser passer la requête. Stockez la clé dans les variables d'environnement Vercel (Settings → Environment Variables) et accédez-y via process.env.API_KEY — ne la codez jamais en dur dans le source.

---

Vous souhaitez construire une application web complète autour de votre API ? Drylead accompagne les entreprises de la conception à la mise en production. Contactez-nous pour en discuter.

Pour aller plus loin

• Création site Node ExpressJS : API performante
• Création site Strapi : CMS headless performant
• Création site Next.js SEO