<h3 class="nml__editor__content__heading">🚀 Structurer son API Next.js avec le pattern MVC</h3>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 : <a target="_blank" rel="noopener noreferrer nofollow" class="nml__editor__content__link" href="https://github.com/Drylead/starter-basic-api-js/tree/version_nextjs_mvc">version_nextjs_mvc sur GitHub</a><hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">Étapes de l’Intégration</h3><ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem"><a target="_blank" rel="noopener noreferrer nofollow" class="nml__editor__content__link" href="https://drylead.agency/blog/guide-complet-creer-une-api-avec-nextjs-et-express-deployee-sur-vercel">Créer une API personnalisé Express, déployée sur Vercel</a></li><li class="nml__editor__content__listItem"><a target="_blank" rel="noopener noreferrer nofollow" class="nml__editor__content__link MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineHover css-eo75f6" href="https://drylead.agency/blog/implementation-de-nextjs-dans-une-api-express-deployee-sur-vercel">Implémentation de Next.js dans une API Express déployée sur Vercel</a></li></ul><hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">🔍 Pourquoi adopter le MVC dans une API Next.js ?</h3>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 :<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem">Une meilleure organisation des fichiers</li><li class="nml__editor__content__listItem">Une testabilité accrue</li><li class="nml__editor__content__listItem">Une séparation entre la logique métier (controllers), l’accès aux données (models), et les routes (views dans notre cas)</li></ul><h3 class="nml__editor__content__heading">🧱 Structure du projet</h3>Voici un aperçu de la structure adoptée :<pre class="nml__editor__content__code__block"><code>/api
 /models → Schemas &amp; 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 &amp; middlewares
 /datas → Fixtures</code></pre><h3 class="nml__editor__content__heading">📁 Exemple concret :&nbsp;/items</h3><h4 class="nml__editor__content__heading">🧠 Model :&nbsp;api/models/item.ts</h4><pre class="nml__editor__content__code__block"><code class="language-javascript">// Fonction pour obtenir les items
const getItems = () =&gt; {
 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) =&gt; {
 try {
 return Datas.find((item) =&gt; item.id === id);
 } catch (error) {
 console.error('Erreur lors de la lecture des données :', error);
 return [];
 }
};

module.exports = { getItems, getItemById };</code></pre><h4 class="nml__editor__content__heading">📦 Controller :&nbsp;api/controllers/item.ts</h4><pre class="nml__editor__content__code__block"><code class="language-javascript">// Contrôleur pour obtenir tous les items
const getAllItems = (req, res) =&gt; {
 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) =&gt; {
 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 };</code></pre><h4 class="nml__editor__content__heading">🌐 Route :&nbsp;api/routes/items.ts</h4><pre class="nml__editor__content__code__block"><code class="language-javascript">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;</code></pre><hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">✅ Résultat</h3>Avec cette organisation :<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem">Le fichier routes/index.ts reste ultra-minimal</li><li class="nml__editor__content__listItem">Toute la logique métier est centralisée dans les controllers</li><li class="nml__editor__content__listItem">L’accès aux données est encapsulé dans les models</li><li class="nml__editor__content__listItem">Les routes peuvent facilement être étendues avec des middlewares (auth, validation…)</li></ul><h3 class="nml__editor__content__heading">📊 Illustration de la structure MVC</h3><hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">FAQ</h3>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.<hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">🔄 Et pour aller plus loin ?</h3>Quelques axes d’amélioration :<ul class="nml__editor__content__bullet__list"><li class="nml__editor__content__listItem">Intégrer une base de données (Sequelize ou Prisma)</li><li class="nml__editor__content__listItem">Ajouter un middleware global pour la gestion des erreurs</li><li class="nml__editor__content__listItem">Implémenter un système d’authentification</li><li class="nml__editor__content__listItem">Ajouter des tests unitaires avec Jest</li></ul><h3 class="nml__editor__content__heading">📦 Conclusion</h3>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.<hr class="nml__editor__content__hr"><h3 class="nml__editor__content__heading">📘 Glossaire</h3>API (Application Programming Interface)Interface permettant à deux applications de communiquer entre elles via des requêtes (HTTP, REST, GraphQL…).Next.jsFramework 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).ModelPartie de l’architecture responsable de la gestion des données, souvent liée à une base de données ou à des fichiers de simulation.ControllerComposant 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.HandlerFonction qui gère une requête HTTP. Dans Next.js, chaque API route est un handler (ou groupe de handlers) exporté depuis un fichier.MiddlewareFonction intermédiaire qui peut traiter ou modifier les requêtes/réponses avant qu’elles n’atteignent le contrôleur (ex : auth, validation, logging).VitestFramework de test moderne et rapide pour les projets JavaScript/TypeScript, souvent utilisé avec Vite ou Next.js.

Dans cet article, nous explorons comment structurer proprement une API Next.js en adoptant le pattern MVC (Model - View - Controller). Grâce à cette architecture, la logique métier, les routes et l’accès aux données sont clairement séparés, rendant le code plus lisible, modulaire et évolutif.

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

Agence Drylead

Informations

📱 Vous avez un projet d'application mobile ?

Faites-le passer à la vitesse supérieure ! 🚀

Articles similaires