Qu'est-ce que Next.js? Un guide en langage simple pour les créateurs d'applications

Next.js est un cadre de travail pour créer des sites web et des applications web avec React. React vous fournit les blocs de construction d'une interface — boutons, formulaires, listes. Next.js ajoute le reste du site web autour d'eux : les pages et les URL, le rendu des pages côté serveur pour qu'elles arrivent prêtes à être lues, le chargement des données et l'exécution du code de backend dans le même projet. C'est un logiciel libre, créé par l'entreprise Vercel, et l'une des façons les plus utilisées pour créer des sites React.

Pourquoi Next.js est important quand on crée avec l'IA

Lorsque vous décrivez une application à un générateur d'IA, celui-ci doit choisir une base technique. Ce choix influence des éléments qui vous importeront plus tard :

• La visibilité dans les recherches. Un site public qui doit se classer dans Google profite de l'envoi de véritable HTML, ce que Next.js fait bien.
• Où se trouve le backend. Next.js permet de regrouper dans un seul projet les pages de l'interface et le code serveur (comme « enregistrer ce formulaire » ou « appeler l'API de paiement »).
• L'hébergement. Une application Next.js dotée de fonctionnalités serveur a besoin d'un serveur pour fonctionner, alors qu'une application Vite simple peut être servie sous forme de fichiers statiques.

Mythex démarre par défaut les nouveaux projets avec Vite + React + TypeScript + Tailwind, et utilise Next.js lorsque vous le demandez — il suffit d'écrire « Utilise Next.js » dans votre première demande (comment la technologie est choisie). Il est donc utile de savoir quand cela vaut la peine de le demander.

Une analogie du quotidien

Si React est une boîte de briques Lego de haute qualité, Next.js est un ensemble Lego qui comprend déjà les instructions, la plaque de base et les pièces pour les portes et la plomberie.

Vous pourriez bâtir la même maison avec des briques en vrac — il vous faudrait seulement décider vous-même comment les pièces se relient, où se trouve la porte d'entrée et comment l'eau arrive. Next.js prend ces décisions à votre place, de façon standard : chaque projet Next.js est donc organisé de manière semblable, et un nouveau développeur (ou une IA) s'y retrouve rapidement.

Ce que Next.js ajoute à React

Next.js propose deux façons d'organiser les pages. Le App Router (le dossier app/) est le plus récent et prend en charge les composants serveur. Le Pages Router (le dossier pages/) est le modèle d'origine et demeure pris en charge. Les nouveaux projets utilisent généralement l'App Router. Si le code de votre générateur d'IA ou un tutoriel vous semble peu familier, c'est souvent la raison.

Exemple concret : un répertoire public de cafés locaux

Imaginez un site qui recense les cafés de votre ville, avec une page par café, que vous voulez voir apparaître dans les résultats de recherche.

Une page Next.js pour un café pourrait ressembler à ceci :

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Ce qui se passe lorsqu'une personne (ou Google) visite /cafes/blue-door :

1. Next.js associe l'URL à ce fichier. Le dossier [slug] signifie « n'importe quel café ».
2. Le composant s'exécute sur le serveur, lit le café dans la base de données et construit le HTML.
3. Le navigateur reçoit une page complète, avec le nom et l'adresse du café déjà inscrits — sans attendre que JavaScript aille chercher les données.

Avec une application React purement côté client, le navigateur recevrait d'abord une page presque vide, puis télécharge JavaScript, puis va chercher le café, puis l'affiche. Les moteurs de recherche y arrivent souvent, mais une page entièrement formée est plus fiable. Voir le référencement des sites web créés avec l'IA.

Comparez avec un tableau de bord réservé au personnel, derrière une connexion : les moteurs de recherche ne peuvent pas le voir de toute façon. Le rendu serveur y apporte donc moins d'avantages, et une application Vite plus simple convient souvent mieux.

Termes clés

Erreurs courantes et idées reçues

• « Next.js remplace React. » Ce n'est pas le cas. Il utilise React. Vos composants demeurent des composants React.
• « Next.js est toujours le meilleur choix. » Il est plus puissant, mais aussi plus complexe à comprendre. Le rendu serveur, la mise en cache et la différence entre le code serveur et le code client sont des sources fréquentes de bogues déroutants. Pour une application surtout derrière une connexion, une application React simple est souvent plus facile.
• « Next.js ne fonctionne que sur Vercel. » C'est un logiciel libre qui peut fonctionner sur tout serveur Node.js ou dans un conteneur Docker. Une exportation entièrement statique est possible si vous n'utilisez pas de fonctionnalités serveur.
• « Utiliser Next.js garantit un bon référencement. » Cela rend les pages plus faciles à lire. Le classement dépend toujours des titres, du contenu, de la vitesse et des liens.
• « Le code serveur de Next.js est automatiquement privé. » Le code marqué pour le client finit dans le navigateur. Les secrets doivent demeurer dans du code réservé au serveur et dans des variables d'environnement.

Quoi demander à votre générateur d'IA

• « Utilise Next.js avec l'App Router » — dans votre première demande, si vous le voulez.
• « Quelles pages sont rendues sur le serveur, lesquelles sont statiques et lesquelles s'exécutent dans le navigateur — et pourquoi? »
• « Fais en sorte que les pages publiques de présentation et de répertoire soient rendues par le serveur ou statiques, avec de bons titres et de bonnes descriptions. »
• « Garde les clés d'API dans du code réservé au serveur et dans des variables d'environnement. Montre-moi où chacune est lue. »
• « Cette application a-t-elle besoin de Next.js, ou une application Vite + React serait-elle plus simple pour ce que nous construisons? »

Next.js dans Mythex

Mythex utilise par défaut Vite + React + TypeScript + Tailwind, et passe à Next.js lorsque vous le demandez dans votre requête; le nommer dès le début vous fait économiser des crédits par rapport à un changement ultérieur. Vous voyez l'application dans l'aperçu en direct, et Publier la déploie à une URL en ligne sans que vous ayez à configurer l'hébergement vous-même. La documentation de Mythex précise que les applications à page unique rendues côté client ont un référencement plus faible que le HTML rendu par le serveur ou statique; pour un site de marketing où les recherches comptent, il vaut donc la peine de le dire dès le départ (le référencement de votre application).

Questions