Qu'est-ce que Next.js et pourquoi les entreprises le préfèrent à WordPress

Next.js est aujourd'hui présent dans presque toutes les conversations concernant un nouveau site d'entreprise. Une agence le propose comme alternative à WordPress, un développeur parle de « rendu côté serveur », et dans les offres d'hébergement, il faut soudain chercher la « prise en charge de Node.js ». Dans ce guide, nous expliquons simplement ce qu'est Next.js, comment il fonctionne, à quoi il sert et à quoi non, ainsi que ce dont il a besoin côté serveur. Sans jargon inutile quand c'est possible.

Si tu hésites entre deux technologies, nous avons une comparaison dédiée : WordPress ou Next.js pour un site d'entreprise. Ici, nous nous concentrons uniquement sur Next.js.

Table des matières

1. Qu'est-ce que Next.js en une phrase ?
2. En quoi Next.js diffère-t-il de React seul ?
3. Comment Next.js affiche-t-il les pages ? Quatre modes de rendu
4. Que contient encore Next.js dans son package ?
5. Pourquoi les entreprises choisissent-elles Next.js plutôt que WordPress ?
6. Quand Next.js est-il une mauvaise idée ?
7. De quel hébergement Next.js a-t-il besoin ?
8. Vercel ou serveur personnel ?
9. Comment lancer Next.js sur Saplo étape par étape ?
10. FAQ

Qu'est-ce que Next.js en une phrase ?

Next.js est un framework gratuit pour créer des sites et applications web, basé sur la bibliothèque React, qui peut générer le HTML final sur le serveur avant que la page n'arrive dans le navigateur.

Il est développé par la société Vercel, le code est open source (licence MIT), et sa première version est sortie en 2016. Aujourd'hui, c'est l'une des méthodes les plus populaires pour coder des sites en JavaScript. Sur Saplo, nous l'installons en version 16.

Un framework est un ensemble de solutions et de règles toutes prêtes dans lesquelles le développeur insère son propre code. Il n'est pas nécessaire de réinventer à chaque fois le routage, le chargement des données, l'optimisation des images ou la construction des fichiers pour la production. Next.js offre tout cela dans un seul package.

Important pour les non-techniciens : Next.js n'est pas un système de gestion de contenu comme WordPress. Il n'y a pas de panneau dans lequel tu cliques sur « Ajouter un article ». C'est un outil pour développeurs. Les contenus sont fournis depuis des fichiers, une base de données ou un système CMS externe (on en parle plus bas).

En quoi Next.js diffère-t-il de React seul ?

React est une bibliothèque pour créer des interfaces : boutons, formulaires, listes, vues complètes. Mais en soi, il ne répond pas aux questions qui se posent quand on développe un vrai site :

• comment organiser les sous-pages et les URL,
• d'où et quand récupérer les données,
• comment faire en sorte que Google voie le contenu et non un écran blanc,
• comment construire une version de production et la déployer.

Une application React classique (SPA) envoie au navigateur un fichier HTML presque vide et un paquet JavaScript. C’est ensuite le navigateur qui assemble la page. Pour l’utilisateur, cela signifie un écran blanc pendant une fraction de seconde, ou plus sur un téléphone peu performant. Pour les moteurs de recherche, c’est un travail supplémentaire, car le contenu n’apparaît qu’après l’exécution des scripts.

Next.js prend React et y ajoute une couche serveur. La page arrive au navigateur déjà remplie de contenu, et les éléments interactifs « prennent vie » un peu plus tard. C’est pourquoi il est très prisé dans les projets où le référencement SEO et la rapidité du premier affichage comptent.

Comment Next.js affiche-t-il les pages ? Quatre modes de rendu

C'est l'élément le plus important à comprendre, car il détermine aussi le choix de l'hébergement. Next.js permet à chaque sous-page de choisir un mode de génération différent.

Mode	Quand le HTML est généré	Idéal pour
Page statique (SSG)	une fois, lors de la construction du projet	page d’accueil, « À propos », offres, articles de blog
Rendu côté serveur (SSR)	à chaque visite de l’utilisateur	panier, espace client, résultats de recherche
Mise à jour incrémentale (ISR)	une fois, puis périodiquement en arrière-plan	catalogue produits, tarifs, actualités
Rendu côté client (CSR)	uniquement chez l’utilisateur	graphiques, éditeurs, sections connectées

Dans la pratique, un site vitrine combine ces modes. La présentation de l’entreprise est statique et se charge immédiatement. La liste des produits se rafraîchit toutes les quelques minutes. L’espace client se génère à la demande, car chacun y voit des informations différentes.

Depuis la version 13, Next.js dispose aussi du App Router et des Server Components : des composants qui s’exécutent uniquement sur le serveur sans envoyer leur code au navigateur. Moins de JavaScript côté utilisateur signifie un site plus rapide, surtout sur mobile.

Que contient encore Next.js ?

En plus du rendu, ce framework résout plusieurs problèmes courants que tu devrais gérer toi-même avec React pur :

• Le routage basé sur les fichiers. Le dossier app/oferta/page.js correspond automatiquement à l'adresse /oferta. Sans aucune configuration.
• L'optimisation des images. Le composant next/image réduit les images, sert des formats modernes et les charge uniquement lorsqu'elles apparaissent à l'écran.
• Une API intégrée. Tu peux écrire des endpoints dans le même projet, par exemple pour un formulaire de contact ou un webhook de paiement. Pas besoin de backend séparé.
• Les métadonnées SEO. Titres, descriptions, balises Open Graph et plan du site se configurent directement dans le code, page par page.
• Polices et scripts. Les mécanismes intégrés chargent les polices sans saut de texte et retardent les scripts externes.
• Une construction rapide. Depuis la version 16, l'outil par défaut est Turbopack, nettement plus rapide que l'ancien Webpack.

Pourquoi les entreprises choisissent-elles Next.js plutôt que WordPress ?

Quatre arguments reviennent le plus souvent.

1. Rapidité sans ajouter de plugins. WordPress lance PHP et interroge la base de données à chaque visite, sauf si quelqu'un configure un cache. Une page statique en Next.js est un fichier prêt à l'emploi. Obtenir de bons résultats sur PageSpeed et Core Web Vitals est plus facile. Nous expliquons les raisons de la lenteur de WordPress dans l'article WordPress lent ? 9 raisons.

2. Surface d'attaque réduite. Il n'y a pas de panneau /wp-admin que les bots attaquent quotidiennement, ni plusieurs dizaines de plugins d’auteurs différents. Une page statique offre très peu de possibilités de piratage.

3. Liberté de conception. Le site n’est pas limité par un thème ou un page builder. Pour les marques qui souhaitent un design atypique, des animations ou une intégration avec leur propre système, c’est un vrai plus.

4. Site et application en un. Si tu as besoin d’un configurateur, d’un calculateur, d’un espace client ou d’une boutique avec une logique personnalisée, Next.js gère tout ça dans un même projet.

Le modèle headless devient aussi de plus en plus populaire : on saisit les contenus dans un panneau pratique (comme Directus, Strapi, ou même WordPress utilisé uniquement comme backend), et Next.js s’occupe de l’affichage. La rédaction dispose de son panneau, et les visiteurs profitent d’un site rapide. Sur Saplo, Directus et Next.js peuvent être installés ensemble dans un seul Box.

Quand Next.js n'est-il pas une bonne idée ?

Pour être honnête : ce n'est pas toujours la meilleure option. Next.js montre ses limites quand :

• le contenu doit être modifié par une personne non technique, et le budget ne prévoit pas de CMS. Sans panneau, chaque modification de texte nécessite un développeur,
• tu as besoin d'une fonctionnalité classique "immédiate". Réservations, formulaires, boutique avec paiements et livraisons en Pologne existent dans WordPress sous forme de plugins prêts à l'emploi. Avec Next.js, c'est généralement du travail de développeur,
• tu n'as personne à qui demander de faire des modifications. Beaucoup savent utiliser WordPress, beaucoup moins savent coder en React,
• le site est une simple carte de visite sans ambitions. Dans ce cas, la différence de rapidité ne compense pas le coût plus élevé de réalisation.

Une boutique en ligne simple reste plus vite lancée sur un moteur préexistant. Nous t'avons expliqué cela dans l'article Qu'est-ce que WooCommerce.

De quel type d'hébergement Next.js a-t-il besoin ?

Beaucoup de personnes sont surprises ici. Next.js est une application Node.js, pas un ensemble de fichiers PHP. Cela conduit à deux scénarios :

Version entièrement statique (configuration output: 'export'). Next.js génère des fichiers HTML, CSS et JS prêts à l'emploi. Un simple serveur de fichiers suffit, même un hébergement basique. Cependant, tu perds le SSR, l'ISR, une API personnalisée et l'optimisation des images côté serveur.

Version complète. Il faut un processus Node.js fonctionnant en arrière-plan pour répondre aux requêtes. Ajoute un serveur web devant (par exemple nginx), un certificat SSL et un mécanisme pour relancer le processus en cas de panne ou de redémarrage de la machine. L'hébergement mutualisé classique pour PHP ne permet généralement pas cela.

Les exigences minimales sont modestes. Dans notre recette pour Next.js, nous avons retenu 512 Mo de RAM et 2 Go de disque par application. Plus de mémoire est utile uniquement lors de la construction (npm run build) de projets plus volumineux, car c'est à ce moment que la consommation est la plus élevée.

Vercel ou serveur dédié ?

Vercel, le créateur de Next.js, propose sa propre plateforme d'hébergement sur laquelle le framework fonctionne de manière "native". Pourtant, il faut garder en tête deux choses :

• le plan Hobby gratuit est réservé à un usage non commercial. Le site d'une entreprise doit être sur un plan payant, facturé par membre de l'équipe,
• avec plus de trafic, des frais supplémentaires s'appliquent pour le transfert, les appels de fonctions et l'optimisation des images, ce qui fait augmenter la facture avec la popularité du site.

Un serveur dédié ou un conteneur offre un coût fixe et prévisible ainsi qu'un contrôle total des données (serveurs en UE). En revanche, il faut gérer Node.js, nginx, SSL et les redémarrages automatiques. Nous laisserons le détail des coûts pour un autre article, mais le principe est simple : plus le trafic et l'équipe sont importants, plus un abonnement fixe devient rentable.

Comment lancer Next.js sur Saplo étape par étape ?

Sur Saplo, Next.js est une application prête à l'emploi dans le catalogue. Tu n'as pas besoin de configurer le serveur : le processus Node.js est supervisé (il redémarre automatiquement après un plantage), nginx dirige le trafic vers lui, et le certificat SSL est généré automatiquement.

Étape 1. Choisis un plan. Un site Next.js tient dans une Box S (1 GB RAM, 15 GB SSD, 27 € par an). Si tu souhaites travailler en SSH ou développer des projets plus conséquents, choisis la Box M (2 GB RAM, 30 GB SSD, 65 € par an), qui permet l'accès SSH. Le prix la première année est identique à celui du renouvellement. Les applications et domaines sont illimités sur chaque plan. Tu peux comparer les plans dans le cennik.

Étape 2. Ajoute l'application. Dans le panneau, sélectionne dans le catalogue Next.js. Si tu n'as pas encore de code, Saplo créera un projet de démarrage (create-next-app), le construira et le lancera, tu verras donc immédiatement ton site en fonctionnement.

Étape 3. Connecte ton adresse. Au départ, tu reçois un sous-domaine *.saploapp.pl avec SSL. Tu peux ajouter ton propre domaine dans le panneau et configurer les enregistrements DNS selon les instructions.

Étape 4. Charge ton propre code via Git. Génère le fichier de configuration avec la commande saplo init, ajoute-le à ton dépôt, puis connecte ton dépôt GitHub dans les détails de l'application (application « Saplo Deploy »). Dorénavant, chaque git push vers la branche production (par défaut main) déclenche un npm install automatique, une construction et un redémarrage. Cela prend généralement entre 1 et 3 minutes, et tu vois le résultat via un point vert ou rouge sur le commit dans GitHub. Plus de détails dans la Documentation Git Deploy.

Étape 5. Variables d'environnement. Mets les clés API, adresses de bases et secrets dans le panneau sous forme de variables, pas dans le code du dépôt.

Tu as déjà un site Next.js sur Vercel ou un autre serveur ? La Migracja vers Saplo est incluse dans chaque plan.

FAQ

Next.js est-il gratuit ?

Oui. Next.js est un logiciel open source sous licence MIT que tu peux utiliser commercialement sans frais. Tu ne paies que pour l'hébergement sur lequel ton site est hébergé.

Next.js est-il bon pour le SEO ?

Oui, c’est l’un de ses principaux atouts. Grâce à la génération de HTML côté serveur ou lors de la compilation, le moteur de recherche reçoit immédiatement le contenu complet, et un chargement rapide améliore les Core Web Vitals. Cependant, le framework ne remplace pas de bons contenus et des métadonnées correctement configurées.

Dois-je connaître React pour utiliser Next.js ?

Pour construire un site, oui, car Next.js est React avec des extensions. Pour utiliser un site déjà prêt, non : si les contenus proviennent d'un panneau CMS, la rédaction ne touche pas au code.

Next.js fonctionnera-t-il sur un hébergement mutualisé classique ?

Uniquement en tant qu’export statique, sans rendu côté serveur, ISR ni API propre. La version complète nécessite un processus Node.js actif, c’est-à-dire un serveur, un conteneur ou une plateforme qui l’exécute. Sur Saplo, chaque Box est un conteneur séparé dans lequel Next.js fonctionne en version complète.

Combien de mémoire RAM Next.js nécessite-t-il ?

Un petit ou moyen site fonctionne avec environ 512 Mo de mémoire. La construction du projet est ce qui consomme le plus de ressources, donc pour les applications volumineuses, il est préférable d'avoir une marge, comme avec Box M qui dispose de 2 Go de RAM.