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

Next.js est un framework pour construire des sites et des applications web avec React. React fournit les briques d'une interface : boutons, formulaires, listes. Next.js ajoute le reste du site autour : les pages et les URL, le rendu des pages sur le serveur pour qu'elles arrivent prêtes à être lues, le chargement des données, et l'exécution du code backend dans le même projet. Il est open source, développé par la société Vercel, et c'est l'une des façons les plus utilisées de construire des sites React.

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

Lorsque vous décrivez une app à un créateur d'apps 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 être bien classé sur Google gagne à envoyer du HTML réel, ce que Next.js fait bien.
• Où vit le backend. Next.js permet de placer les pages du frontend et le code serveur (comme « enregistrer ce formulaire » ou « appeler l'API de paiement ») dans un même projet.
• L'hébergement. Une app Next.js avec des fonctionnalités serveur a besoin d'un serveur pour tourner, alors qu'une app Vite simple peut être servie comme de simples fichiers statiques.

Mythex démarre les nouveaux projets sur Vite + React + TypeScript + Tailwind par défaut, et utilise Next.js lorsque vous le demandez : il suffit de dire « Utilise Next.js » dans votre premier message (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 grande qualité, Next.js est un ensemble Lego avec la notice, la plaque de base et les pièces des portes et de la plomberie déjà inclus.

Vous pourriez construire la même maison avec des briques détachées, mais il vous faudrait décider vous-même comment les pièces communiquent, où se trouve la porte d'entrée et comment l'eau arrive. Next.js prend ces décisions à votre place, de manière standard : chaque projet Next.js est organisé de façon semblable, et un nouveau développeur (ou une IA) s'y repère 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 l'original, toujours pris en charge. Les nouveaux projets utilisent en général l'App Router. Si le code de votre créateur d'apps ou un tutoriel vous paraît étrange, c'est souvent pour cette raison.

Un exemple concret : un annuaire public de cafés de quartier

Imaginons un site qui liste les cafés d'une 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/le-porte-bleue, /cafes/colline ...
export default async function PageCafe({ 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/le-porte-bleue :

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à présents, sans attendre que JavaScript récupère les données.

Avec une app React purement côté client, le navigateur recevrait d'abord une page presque vide, puis téléchargerait le JavaScript, puis récupérerait le café, et enfin l'afficherait. Les moteurs de recherche savent souvent gérer ce cas, mais une page entièrement formée est plus fiable. Voir le référencement des sites créés avec l'IA.

Comparez avec un tableau de bord interne derrière une connexion : les moteurs de recherche ne peuvent de toute façon pas le voir, donc le rendu serveur apporte moins d'avantages, et une app Vite plus simple est souvent le meilleur choix.

Termes clés

Erreurs courantes et idées fausses

• « Next.js remplace React. » Ce n'est pas le cas. Il utilise React. Vos composants restent 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 distinction entre code serveur et code client sont des sources fréquentes de bugs déroutants. Pour une app surtout derrière une connexion, une app React simple est souvent plus facile.
• « Next.js ne tourne que sur Vercel. » Il est open source et peut tourner sur n'importe quel serveur Node.js ou dans un conteneur Docker. Un export statique complet est possible si vous n'utilisez pas de fonctionnalités serveur.
• « Utiliser Next.js garantit un bon référencement. » Cela rend les pages lisibles plus faciles à indexer. 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 destiné au client se retrouve dans le navigateur. Les secrets doivent rester dans du code réservé au serveur et dans les variables d'environnement.

Que demander à votre créateur d'apps IA

• « Utilise Next.js avec l'App Router » : dans votre premier message, si vous le souhaitez.
• « 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 liste soient rendues sur le serveur ou statiques, avec des titres et des descriptions appropriés. »
• « Garde les clés API dans du code réservé au serveur et dans des variables d'environnement. Montre-moi où chacune est lue. »
• « Cette app a-t-elle besoin de Next.js, ou une app Vite + React serait-elle plus simple pour ce que nous construisons ? »

Next.js dans Mythex

Mythex utilise Vite + React + TypeScript + Tailwind par défaut et passe à Next.js lorsque vous le demandez dans votre message ; le nommer dès le début vous fait économiser des crédits par rapport à un changement ultérieur. Vous voyez l'app dans l'aperçu en direct, et Publier la met en ligne sur une URL publique sans que vous ayez à configurer l'hébergement vous-même. La documentation de Mythex précise que les applications monopages rendues côté client ont un référencement plus faible que les pages rendues sur le serveur ou statiques ; donc, pour un site vitrine où le référencement compte, mieux vaut le dire dès le départ (référencement de votre app).

Questions