Vite ou Next.js - lequel choisir pour ton prochain projet ?

23/01/2025 • Melvynx

Faut-il utiliser ViteJS ou Next.js pour créer un nouveau projet React ? Ces deux options sont les plus populaires pour créer une application. Si vous vous demandez comment apprendre React, il est important de comprendre ces deux outils. Ces deux options ont des différences fondamentales qu'il faut comprendre pour choisir la bonne option.

ViteJS

ViteJS est ce qu'on appelle un "Build Tool" d'après leur landing page. Son travail est de prendre les fichiers de ton application et de les transformer en fichiers HTML / CSS / JS.

Donc il prend ton application React avec des fichiers .jsx ou .tsx (si tu utilises TypeScript) et les transforme en fichiers HTML / CSS / JS que le navigateur peut interpréter.

C'est tout ce que fait ViteJS au début. Ensuite ViteJS est devenu plus intéressant avec sa communauté et sa flexibilité. Il y a des plugins pour React, Vue, Svelte, etc. Il est utilisé par l'équipe de Remix pour faire fonctionner leur framework.

ViteJS est en réalité un concurrent à Webpack ou TurboPack plutôt qu'à NextJS.

Cependant il est possible de configurer et d'utiliser ViteJS pour gérer :

le SSR
le caching
le routing
etc...

Ce qui peut faire en sorte de transformer ViteJS en un framework.

NextJS

De l'autre côté, NextJS est un framework qui a des opinions très fortes. Il a des manières de faire, des "guidelines" et des règles qu'il faut tout simplement suivre.

On pourrait notamment parler du routing :

/users/[userId]/page.tsx -> une route qui va sur /users/123
/(dashboard)/admin/users/page.tsx -> une route qui va sur /admin/users car (dashboard) est juste pour grouper des routes

Bref il y a plein de règles très arbitraires qui permettent de définir le fonctionnement des routes. NextJS gère beaucoup d'autres choses :

Server Component
Server Action
Redirection
Caching
API Routes
etc...

Tout ça en fait typiquement ce qu'on appelle un "framework", c'est-à-dire un outil qui a une opinion forte sur les choses.

Lequel utiliser ?

Historiquement c'est NextJS qui a été le plus populaire :

Comparaison des téléchargements NPM entre ViteJS et Next.js

Mais ils répondent tous les deux à des problématiques différentes.

Utilise NextJS si tu veux :

un framework complet pour créer une application web
un système qui gère déjà le routing, le SSR, etc...
un framework populaire et bien documenté
une application optimisée par page (bundle size réduit)
une application qui gère le SEO

Utilise ViteJS si tu veux :

créer une Single Page Application (c'est-à-dire une application qui n'a pas de backend et pas de SSR)
créer une application admin qui n'a pas besoin d'être optimisée par page
ne pas avoir plein de règles à suivre
tu préfères tout pouvoir customiser et que tu as beaucoup de temps
tu veux pouvoir utiliser des outils qui ne sont pas supportés par NextJS

Une SPA ou Single Page Application est une application web qui va avoir simplement un fichier HTML / CSS / JS. Quand le navigateur ouvre l'application, il télécharge ces 3 fichiers et toutes les informations pour que l'application fonctionne sont déjà présentes, il n'y a rien besoin de plus.

Ce que React recommande !?

React dans la documentation recommande d'utiliser NextJS même pour une SPA car NextJS va optimiser la taille de ton bundle JavaScript par page.

Imagine que dans la page /users tu utilises une grosse librairie de rendu MDX, eh bien cette librairie ne sera pas téléchargée quand tu vas sur /test !

Conclusion

Personnellement je suis un fan de NextJS et je te conseille de l'apprendre en suivant mes formations gratuites sur NextJS. Mes formations ont été suivies par des centaines de développeurs et je suis sûr qu'elles vont te plaire.