Publié · en amélioration
Framework · Depuis 2016
Next.js est un framework React pour sites web et applications full-stack : routage par fichiers, rendu serveur, Server Components et optimisations intégrées.
Next.js est un framework React open source créé par Vercel et publié pour la première fois en 2016. Il réunit ce que React seul vous laisse assembler : routage, rendu côté serveur, génération statique, récupération de données et outils de build. L'App Router, désormais recommandé, repose sur les React Server Components : l'arborescence du dossier app définit les URL, et le code serveur et le code client cohabitent dans un même projet.
Next.js excelle là où performances et référencement comptent autant l'un que l'autre ; on le retrouve souvent dans les sites vitrines, les blogs et la documentation, les boutiques en ligne et les tableaux de bord SaaS. Chaque route peut être pré-rendue au build ou rendue à chaque requête, et les parties lentes peuvent être envoyées progressivement en streaming. Les Server Actions et les Route Handlers gèrent formulaires et API, si bien qu'une seule base de code couvre l'interface et le backend qui la sert. L'optimisation des images, des polices et des scripts est intégrée.
Pour commencer, installez Node.js, créez un projet avec create-next-app, puis suivez la documentation officielle Getting Started et le cours gratuit Learn Next.js. Connaître les composants, les props et les hooks de React facilite beaucoup les choses : si React est nouveau pour vous, commencez par ses bases. TypeScript fonctionne sans configuration supplémentaire et est recommandé pour les nouveaux projets.
Les dossiers et les fichiers spéciaux comme page, layout, loading et error du dossier app définissent les URL, les layouts imbriqués, les états de chargement et les écrans d'erreur.
Les composants sont rendus côté serveur par défaut et n'envoient aucun JavaScript au navigateur ; seules les parties marquées "use client" s'y exécutent.
Combinez génération statique, rendu à la requête et streaming route par route, et gardez le contenu à jour grâce au cache et à la revalidation.
Composants d'image, de police et de script, découpage automatique du code, préchargement des liens et Turbopack pour des builds et des rechargements rapides.
Installez une version LTS de Node.js depuis nodejs.org et vérifiez la version dans un terminal. npm est inclus ; pnpm, Yarn ou Bun conviennent aussi.
node --versionGénérez un nouveau projet avec create-next-app. Les réglages recommandés configurent TypeScript, ESLint, Tailwind CSS et l'App Router.
npx create-next-app@latest my-appPlacez-vous dans le dossier du projet, lancez le serveur de développement et ouvrez http://localhost:3000. La page se met à jour dès que vous enregistrez un fichier.
cd my-app && npm run devDans l'App Router, app/page.tsx est la page d'accueil, à l'adresse /. Le composant React exporté par défaut devient la page ; ici, c'est un Server Component qui renvoie un titre. À chaque enregistrement, le navigateur se rafraîchit aussitôt, et ajouter app/about/page.tsx crée une nouvelle page /about.
app/page.tsx
export default function Page() {
return <h1>Hello, Next.js!</h1>;
}
npx create-next-app@latest my-app && cd my-app && npm run devSix chapitres pour aller de l'installation aux notions essentielles de Next.js.
Posez vos questions, partagez votre expérience et échangez vos avis sur Next.js.
Aucune discussion pour l'instant. Lancez la première.
0 commentaire
Se connecter · Connectez-vous pour laisser un commentaire.
Soyez le premier à commenter.