par Szymon Bodych
2025-10-26
Next.js est un framework populaire basé sur React, qui permet de créer des applications avec rendu côté serveur (SSR) et génération de site statique (SSG). Le code de l’application est écrit en TypeScript. Next.js a gagné en popularité grâce à la facilité avec laquelle on peut créer des applications utilisant le rendu côté serveur, ainsi que son support de la génération statique (SSG), qui permet de servir très vite des versions statiques des pages aux utilisateurs. Cependant, pour certains projets, il peut être pertinent d’examiner une alternative à Next.js.
Récemment, j’ai créé une liste de blogs pour développeurs en l’utilisant et je dois admettre que c’est une excellente solution, notamment pour le déploiement de l’application sur la plateforme vercel.com. Le processus de déploiement a été rapide et intuitif, ce qui rend Next.js très attractif pour ce type de projets. De plus, la création de ce site m’a servi de test pour vérifier si Next.js est la solution optimale pour mon prochain projet, qui sera disponible dans la plupart des langues du monde.
Cela dit, même si Next.js est un outil puissant, ce n’est pas toujours la solution optimale pour tous les projets. C’est pourquoi j’ai commencé à réfléchir à quelle alternative à Next.js conviendrait le mieux à mes besoins. Par exemple, le framework ajoute automatiquement des données supplémentaires, comme des fichiers JSON, au code HTML, contenant les informations nécessaires pour reconstituer l’état de l’application dans le navigateur. Ce processus, utile dans certains cas, peut toutefois conduire à envoyer plus d’informations que nécessaire.
Par exemple, lors de la création d’un site multilingue, Next.js envoie souvent toutes les traductions (pour plusieurs langues) au navigateur, même si l’utilisateur ne consulte qu’une seule version linguistique de la page. Next.js place ces données dans le code source de la page sous forme de fichiers JSON, afin de permettre un changement de langue instantané ou une reconstruction de l’état côté client. Le problème survient lorsqu’un site prend en charge plusieurs langues : toutes les traductions peuvent être envoyées au navigateur, même si l’utilisateur ne regarde qu’une version, par exemple en anglais.
Supposons, par exemple, que votre site prenne en charge 10 langues. Dans ce cas, Next.js peut générer des fichiers JSON contenant toutes les versions de traduction, y compris celles qui ne sont pas affichées. Cela entraîne un transfert de données redondantes, ce qui augmente le poids de la page et donc le temps de chargement. Un utilisateur qui visite la page en anglais n’a pas besoin des traductions en français, allemand ou japonais — et pourtant elles sont envoyées. C’est ici qu’une alternative à Next.js peut aider à éviter ces inefficacités en veillant à ne livrer que les données nécessaires.
Cela peut avoir un impact significatif sur les performances du site, en particulier pour les utilisateurs avec une connexion plus lente ou sur mobile. Plus de données à télécharger signifie des temps de chargement plus longs, ce qui nuit à l’expérience utilisateur (UX) et au référencement (SEO).
Par conséquent, si vous souhaitez garder un contrôle total sur les données envoyées et sur la façon dont la page est générée, il vaut la peine d’envisager des solutions alternatives à Next.js, comme NestJS combiné à Nunjucks ou à un autre moteur de templates. Avec cette approche, le rendu s’effectue entièrement côté serveur, et seuls les données nécessaires à la version affichée sont envoyées au navigateur. Ainsi, vous évitez les données redondantes et chaque version linguistique du site se charge de façon optimale et rapide.
Une approche efficace consiste à combiner NestJS avec Nunjucks et Tailwind CSS, ce qui offre davantage de flexibilité et de contrôle sur le processus de génération des pages. Dans cet article, nous verrons pourquoi ces technologies méritent d’être envisagées pour créer des projets globaux et multilingues susceptibles de générer beaucoup de trafic. L’association Nunjucks + Tailwind CSS permet de construire des applications rapides, flexibles et évolutives, proches des solutions classiques côté serveur, comme celles bien connues en PHP, mais avec des outils modernes et un meilleur contrôle des performances.
Si vous avez déjà utilisé PHP pour créer des sites web, vous vous souvenez sûrement de la façon dont le rendu des pages fonctionne. Les scripts PHP génèrent dynamiquement du HTML côté serveur et l’envoient au navigateur de l’utilisateur. De la même manière, NestJS avec Nunjucks permet de rendre des pages HTML côté serveur à partir de données, ce qui vous donne plus de flexibilité et de contrôle sur ce qui est généré et quand.
NestJS est un framework moderne pour Node.js, conçu pour des applications serveur évolutives et performantes. Il repose sur une architecture modulaire qui simplifie la gestion de projets complexes, à l’image de frameworks backend comme Spring en Java ou ASP.NET dans l’écosystème Microsoft. NestJS utilise TypeScript et offre un support natif du rendu côté serveur, ce qui en fait un excellent choix pour construire des API, des applications web ou des systèmes backend.
Pour le rendu de pages HTML, NestJS fonctionne avec plusieurs moteurs de templates ; l’un des plus puissants et flexibles est Nunjucks. Nunjucks est un moteur polyvalent, inspiré de Jinja2 (Python), qui offre des fonctionnalités avancées comme l’héritage de templates, les macros, les boucles, les conditions et l’insertion de données dynamiques. Avec Nunjucks, vous pouvez gérer des structures HTML complexes, afficher du contenu dynamique et contrôler la logique d’affichage des éléments. C’est une solution idéale pour construire des applications globales qui doivent traiter de nombreux composants et du contenu dynamique dans différentes langues.
Si NestJS avec Nunjucks vous semble la bonne solution et une meilleure alternative à Next.js, sachez aussi qu’il existe de nombreux autres moteurs de templates. Des moteurs comme Pug, Handlebars, Mustache ou EJS proposent des approches et des fonctionnalités différentes pour le rendu côté serveur. Le choix dépendra de la complexité de votre projet, de la structure des templates et de vos préférences de syntaxe.
Next.js automatise de nombreux aspects du rendu côté serveur, ce qui peut être limitant pour certains projets. Avec NestJS et Nunjucks, vous contrôlez chaque étape — de l’accès à la base de données jusqu’à la génération du HTML final — et vous optimisez vos pages exactement selon vos besoins.
Avec Next.js (SSR et SSG), lors de la génération des pages, en plus du HTML statique, des données sous forme de fichiers JSON sont ajoutées au code source. Elles servent à reconstituer l’état de l’application côté client — un fonctionnement typique des applis React. Mais cette approche peut amener à envoyer plus de données que nécessaire, ralentissant la page. Plus de données, c’est non seulement plus de temps de chargement, mais aussi des coûts potentiellement plus élevés si vous utilisez des clouds comme Azure, AWS ou Google Cloud. Selon les options choisies, le trafic sortant est souvent facturé, surtout avec beaucoup d’utilisateurs et un trafic important.
Avec Nunjucks dans NestJS, vous ne générez que ce qui est réellement nécessaire à l’instant T, ce qui minimise la quantité de données transférées. Vous améliorez ainsi les performances et réduisez les coûts de transfert, ce qui peut représenter des économies significatives sur le long terme, notamment pour les grandes applications ou les sites à fort trafic.
Après avoir présenté les avantages de la combinaison NestJS, Nunjucks et Tailwind CSS, passons à la partie pratique. Vous trouverez ci-dessous un guide pas à pas pour configurer l’environnement, installer les dépendances nécessaires et préparer la structure du projet.
Installez la CLI NestJS globalement si ce n’est pas déjà fait :
Angular
AWS
Azure
Blockchain
C#
CSS
Docker
.NET
Express.js
GCP
Git
Hibernate
HTML
Java
JavaScript
Kotlin
Linux
MongoDB
NestJS
Node.js
PHP
Python
R
React
RxJS
Spring
SQL
Swift
TypeScript
Vue.jsnpm i -g @nestjs/cliCréez un nouveau projet NestJS :
nest new name-of-your-projectInstallez le moteur de templates Nunjucks :
npm install nunjucksConfigurez Nunjucks comme moteur de vues dans le fichier main.ts :
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
// Set the views directory and Nunjucks engine
nunjucks.configure('views', {
autoescape: true,
express: app,
watch: true,
});
app.setViewEngine('njk');
// Serving static files from the 'public' directory
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
}
bootstrap();
Installez Tailwind CSS et les dépendances requises :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initConfigurez le fichier tailwind.config.js :
module.exports = {
content: [
'./views/**/*.njk',
'./public/**/*.js',
],
theme: {
extend: {},
},
plugins: [],
};Créez un fichier Tailwind CSS dans le dossier src/css/, par ex. src/css/styles.css, et ajoutez les directives Tailwind :
@tailwind base;
@tailwind components;
@tailwind utilities;Configurez PostCSS en créant le fichier postcss.config.js :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Créez le dossier views. Dans les fichiers Nunjucks, ajoutez un lien vers le fichier CSS généré (par exemple dans views/index.njk) :
<link href="/styles.css" rel="stylesheet">
Générez le CSS final avec Tailwind :
npx tailwindcss -o public/styles.css
Dans le fichier du contrôleur (par ex. app.controller.ts), créez une méthode qui renverra la vue Nunjucks. Exemple :
import { Controller, Get, Render } from '@nestjs/common';
@Controller()
export class AppController {
@Get()
@Render('index') // Refers to the 'index.njk' file in the 'views' folder
getHome() {
return { title: 'Strona główna' }; // You can pass data to the Nunjucks view
}
}Dans le fichier index.njk, vous pouvez ajouter un simple HTML pour afficher la page d’accueil :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/styles.css" rel="stylesheet">
<title>{{ title }}</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>Lancez l’application et rendez-vous sur la page d’accueil (http://localhost:3000/). Vous devriez voir la page avec le contenu du fichier index.njk.
En résumé :
views.index.njk, et c’est le contrôleur qui se charge de son rendu.Si vous le souhaitez, vous pouvez enrichir ce modèle avec d’autres sections et composants, et tirer pleinement parti de Tailwind CSS pour le style. À mon avis, la combinaison NestJS, Nunjucks et Tailwind CSS constitue une excellente alternative à Next.js, en particulier pour les projets qui exigent un contrôle total du processus de rendu et la minimisation des données transférées.
Dans le prochain article (ou en mettant à jour celui-ci), je montrerai comment faire évoluer cette application en y ajoutant une intégration avec MongoDB. Cela nous permettra de gérer des données dans une base, et l’application deviendra entièrement dynamique et prête pour des projets plus ambitieux. Je montrerai également la simplicité de l’intégration de MongoDB avec NestJS grâce au module @nestjs/mongoose, ainsi que la création d’opérations CRUD (Create, Read, Update, Delete) pour des applications plus avancées.
Restez à l’écoute pour les prochains articles !
Une alternative à Next.js (SSR) ? Essayez NestJS + Nunjucks + Tailwind CSS
