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

Ce guide vous montre comment intégrer Next.js dans une API basée sur Express, puis la déployer sur Vercel. Pour une version antérieure sans Next.js, référez-vous à la Phase 1 de notre guide.

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

• Créer une API personnalisé Express, déployée sur Vercel

• Implémentation du pattern MVC (à venir)

Étape 1 : Clôner le Projet

Cloner le dépôt de départ en exécutant les commandes suivantes dans votre terminal :

git clone https://github.com/Drylead/starter-basic-api-js
cd starter-basic-api-js

Étape 2 : Configuration du projet

Nous allons installer les dépendances nécessaires, notamment NextJS, React et React dom.

Nous allons également supprimer body-parser, qui est désormais superflu avec Express 4.16+ (Merci Julien Poirier pour le rappel !).

// Paramètrage le projet
npm install # ou yarn install
// Installation du paquet NextJS
npm install next # ou yarn add next
// Installation du paquet React
npm install react # ou yarn add react
// Installation du paquet React DOM
npm install react-dom # ou yarn add react-dom
// Suppression du paquet Body-parser
npm uninstall body-parser # ou yarn remove body-parser

Étape 3 : Implémentation de Next.js dans l’API

Ensuite, nous allons modifier le fichier index.ts pour intégrer Next.js avec Express, avec quelques ajustements pour améliorer le traitement des requêtes.

const express = require('express');
const cors = require('cors');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const Datas = require('./datas.json');
const PORT = process.env.PORT || 3000;
app.prepare().then(() => {
const server = express();
const corsOptions = {
    origin: ['*'],
    optionsSuccessStatus: 200,
};

server.use(cors(corsOptions));

server.use(express.json());
server.use(express.urlencoded({ extended: true }));

// Point de terminaison racine
server.get('/', (req, res) => {
    res.send('Hello world');
});
// Point de terminaison pour récupérer tous les éléments
server.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
server.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);
});

server.listen(PORT, (err) => {
    if (err) throw err;
    console.log(`🚀 Server ready at: http://localhost:${PORT} ⭐️`);
});

});

Dans cet exemple, app.prepare() permet de s’assurer que tout est prêt avant de démarrer, et Express permet de gérer des routes et des middlewares personnalisés. Cette préparation préalable améliore les performances au démarrage de l’application et garantit que toutes les ressources sont bien disponibles lorsque le serveur est prêt.

Étape 4 : Déployer le projet sur Vercel

Vercel permet un déploiement automatique dès qu’un changement est détecté sur la branche configurée. Pour ceux qui débutent, assurez-vous d’avoir bien configuré votre projet sur la plateforme Vercel.

Testez votre API

Félicitations ! Vous avez maintenant une API qui combine Express et Next.js, et qui est déployée sur Vercel. Ce guide s’inscrit dans une série pour créer une API flexible et évolutive, prête à être adaptée en fonction des besoins de votre projet.

Retrouvez l’exemple complet sur GitHub.

Pourquoi utiliser un serveur personnalisé ?

Utiliser un serveur personnalisé avec Next.js et Express peut avoir plusieurs avantages selon les besoins de l’application :

1. Gestion de Routes Avancées

2. Intégration de Middlewares Personnalisés

3. Optimisation des Performances

4. Intégration avec des Services Externes

Le prochain volet est l'implémentation du pattern MVC