Introduction
Bienvenue dans la documentation Next.js !
Qu'est-ce que Next.js ?
Next.js est un framework React pour construire des applications web full-stack. Vous utilisez des composants React pour créer des interfaces utilisateur, et Next.js pour des fonctionnalités et optimisations supplémentaires.
Sous le capot, Next.js abstrait et configure automatiquement les outils nécessaires pour React, comme le bundling, la compilation, et plus encore. Cela vous permet de vous concentrer sur la construction de votre application au lieu de passer du temps sur la configuration.
Que vous soyez un développeur individuel ou membre d'une équipe plus large, Next.js peut vous aider à construire des applications React interactives, dynamiques et rapides.
Fonctionnalités principales
Voici quelques-unes des principales fonctionnalités de Next.js :
| Fonctionnalité | Description |
|---|---|
| Routage | Un routeur basé sur le système de fichiers construit au-dessus des composants serveur, prenant en charge les layouts, le routage imbriqué, les états de chargement, la gestion d'erreurs et plus. |
| Rendu | Rendu côté client et côté serveur avec composants Client et Serveur. Optimisé avec le rendu statique et dynamique côté serveur avec Next.js. Streaming sur les runtimes Edge et Node.js. |
| Récupération de données | Récupération de données simplifiée avec async/await dans les composants serveur, et une API fetch étendue pour la mémorisation de requêtes, le cache de données et la revalidation. |
| Stylisation | Prise en charge de vos méthodes de stylisation préférées, incluant les CSS Modules, Tailwind CSS et CSS-in-JS |
| Optimisations | Optimisations d'images, polices et scripts pour améliorer les Core Web Vitals et l'expérience utilisateur de votre application. |
| TypeScript | Meilleure prise en charge de TypeScript, avec un meilleur type checking et une compilation plus efficace, ainsi qu'un plugin TypeScript personnalisé et un vérificateur de types. |
Comment utiliser cette documentation
Sur le côté gauche de l'écran, vous trouverez la barre de navigation de la documentation. Les pages sont organisées séquentiellement, des bases aux concepts avancés, vous permettant de les suivre étape par étape lors de la construction de votre application. Cependant, vous pouvez les lire dans n'importe quel ordre ou sauter aux pages correspondant à votre cas d'usage.
Sur le côté droit de l'écran, vous verrez une table des matières facilitant la navigation entre les sections d'une page. Si vous avez besoin de trouver rapidement une page, vous pouvez utiliser la barre de recherche en haut, ou le raccourci de recherche (Ctrl+K ou Cmd+K).
Pour commencer, consultez le guide Installation.
Routeur App vs Routeur Pages
Next.js dispose de deux routeurs différents : le routeur App et le routeur Pages. Le routeur App est un nouveau routeur permettant d'utiliser les dernières fonctionnalités de React, comme les composants serveur et le streaming. Le routeur Pages est le routeur original de Next.js, qui permettait de construire des applications React rendues côté serveur et continue d'être pris en charge pour les anciennes applications Next.js.
En haut de la barre latérale, vous remarquerez un menu déroulant permettant de basculer entre les fonctionnalités du routeur App et du routeur Pages. Comme certaines fonctionnalités sont spécifiques à chaque répertoire, il est important de vérifier quel onglet est sélectionné.
Le fil d'Ariane en haut de la page indiquera également si vous consultez la documentation du routeur App ou du routeur Pages.
Prérequis
Bien que notre documentation soit conçue pour être accessible aux débutants, nous devons établir une base commune pour que la documentation puisse rester centrée sur les fonctionnalités de Next.js. Nous nous assurerons de fournir des liens vers la documentation pertinente lorsque nous introduirons un nouveau concept.
Pour tirer le meilleur parti de notre documentation, il est recommandé d'avoir une compréhension basique de HTML, CSS et React. Si vous avez besoin de rafraîchir vos connaissances en React, consultez notre Cours sur les Fondations React, qui vous présentera les fondamentaux. Ensuite, apprenez-en plus sur Next.js en construisant une application dashboard.
Accessibilité
Pour une accessibilité optimale lors de l'utilisation d'un lecteur d'écran pour lire la documentation, nous recommandons d'utiliser Firefox avec NVDA, ou Safari avec VoiceOver.
Rejoignez notre communauté
Si vous avez des questions sur Next.js, vous êtes toujours les bienvenus pour les poser à notre communauté sur GitHub Discussions, Discord, Twitter, et Reddit.