Optimiser votre API Next.js avec le pattern MVC : structure, exemples et bonnes pratiques

🚀 Structurer son API Next.js avec le pattern MVC

Dans notre précédent article, nous avons vu comment migrer une API Express vers une API basée sur Next.js, tout en profitant de l’écosystème Vercel. Cette approche permet de capitaliser sur les performances, l’auto-scaling et la facilité de déploiement.

Aujourd’hui, nous allons franchir une nouvelle étape en organisant notre code avec une architecture MVC (Model-View-Controller). Ce pattern, bien connu du monde backend, apporte une séparation claire des responsabilités, facilite la maintenance et prépare le terrain pour des projets ambitieux.

👉 Code source : version_nextjs_mvc sur GitHub

Étapes de l’Intégration

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

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

🔍 Pourquoi adopter le MVC dans une API Next.js ?

Même si Next.js est à la base un framework orienté frontend, sa flexibilité permet de construire une API robuste côté serveur, notamment via le dossier app/api/.

L’architecture MVC permet :

• Une meilleure organisation des fichiers

• Une testabilité accrue

• Une séparation entre la logique métier (controllers), l’accès aux données (models), et les routes (views dans notre cas)

🧱 Structure du projet

Voici un aperçu de la structure adoptée :

/api
/models         → Schemas & logique d’accès aux données
/controllers    → Logique métier
/routes         → Fonctions de gestion des requêtes Next.js (API Routes)
/utils          → Fonctions utilitaires & middlewares
/datas          → Fixtures

📁 Exemple concret : /items

🧠 Model : api/models/item.ts

// Fonction pour obtenir les items
const getItems = () => {
try {
return Datas;
} catch (error) {
console.error('Erreur lors de la lecture des données :', error);
return [];
}
};

// Fonction pour obtenir un item par ID
const getItemById = (id) => {
try {
return Datas.find((item) => item.id === id);
} catch (error) {
console.error('Erreur lors de la lecture des données :', error);
return [];
}
};
module.exports = { getItems, getItemById };

📦 Controller : api/controllers/item.ts

// Contrôleur pour obtenir tous les items
const getAllItems = (req, res) => {
try {
const items = getItems();
res.status(200).json(items);
} catch (error) {
console.error("Erreur lors de la récupération des items:", error);
res.status(500).json({ message: "Erreur serveur" });
}
};

// Contrôleur pour obtenir un item par ID
const getItem = (req, res) => {
try {
const itemId = parseInt(req.params.id, 10);
const item = getItemById(itemId);
    if (item) {
        res.status(200).json(item);
    } else {
        res.status(404).json({ message: "Item non trouvé" });
    }
} catch (error) {
    console.error("Erreur lors de la récupération de l'item:", error);
    res.status(500).json({ message: "Erreur serveur" });
}

};
module.exports = { getAllItems, getItem };

🌐 Route : api/routes/items.ts

const express = require('express');
const { getAllItems, getItem } = require('../controllers/item.ts');
const router = express.Router();

router.get('/', getAllItems);
router.get('/:id([0-9]+)', getItem);
module.exports = router;

✅ Résultat

Avec cette organisation :

• Le fichier routes/index.ts reste ultra-minimal

• Toute la logique métier est centralisée dans les controllers

• L’accès aux données est encapsulé dans les models

• Les routes peuvent facilement être étendues avec des middlewares (auth, validation…)

📊 Illustration de la structure MVC

❓ FAQ (optimisée SEO)

Pourquoi utiliser le modèle MVC avec Next.js ?

Le modèle MVC permet de structurer l’API en couches indépendantes, facilitant la maintenance, les tests et l’évolutivité du code.

Next.js est-il adapté à une API MVC ?

Oui. Grâce aux API Routes (notamment via le dossier api/), Next.js peut tout à fait supporter une architecture MVC moderne.

Peut-on connecter cette structure à une base de données ?

Absolument. Il suffit d’adapter la couche models pour qu’elle utilise Sequelize, Prisma, Mongoose ou tout autre ORM.

🔄 Et pour aller plus loin ?

Quelques axes d’amélioration :

• Intégrer une base de données (Sequelize ou Prisma)

• Ajouter un middleware global pour la gestion des erreurs

• Implémenter un système d’authentification

• Ajouter des tests unitaires avec Jest

📦 Conclusion

En adoptant MVC dans votre API Next.js, vous vous offrez une structure solide et évolutive, tout en restant dans l’écosystème moderne de Vercel. C’est une étape cruciale pour construire des applications complexes, performantes et maintenables à long terme.

📘 Glossaire

API (Application Programming Interface)

Interface permettant à deux applications de communiquer entre elles via des requêtes (HTTP, REST, GraphQL…).

Next.js

Framework React fullstack développé par Vercel, permettant le rendu côté serveur (SSR), les API Routes, et le déploiement simplifié.

MVC (Model - View - Controller)

Pattern d’architecture qui sépare les données (Model), la logique métier (Controller) et les points d’entrée (View ou Routes).

Model

Partie de l’architecture responsable de la gestion des données, souvent liée à une base de données ou à des fichiers de simulation.

Controller

Composant chargé de la logique métier. Il traite les requêtes entrantes, appelle les bons modèles, applique des règles, puis retourne les résultats.

Route (API Route)

Dans le contexte Next.js, une route correspond à un handler HTTP (GET, POST, etc.) défini dans app/api/..., jouant le rôle de point d’entrée.

Handler

Fonction qui gère une requête HTTP. Dans Next.js, chaque API route est un handler (ou groupe de handlers) exporté depuis un fichier.

Middleware

Fonction intermédiaire qui peut traiter ou modifier les requêtes/réponses avant qu’elles n’atteignent le contrôleur (ex : auth, validation, logging).

Vitest

Framework de test moderne et rapide pour les projets JavaScript/TypeScript, souvent utilisé avec Vite ou Next.js.