Next.js se charge de nombreuses optimisations dans votre application React pour que vous n'ayez pas à
Next.js est un framework React avisé qui intègre un certain nombre d'optimisations des performances. L'objectif principal du framework est de s'assurer que les applications démarrent et restent aussi performantes que possible en incluant ces fonctionnalités par défaut.
Cette introduction couvre brièvement de nombreuses fonctionnalités fournies par le framework de manière générale. Les autres guides de cette collection exploreront les fonctionnalités plus en détail.
Qu'allez-vous apprendre ?
Bien que Next.js propose un certain nombre d'optimisations des performances par défaut, ces guides visent à les expliquer plus en détail et à vous montrer comment les utiliser pour créer une expérience rapide et performante.
De nombreuses optimisations peuvent être ajoutées aux sites React en général et fonctionner également pour les applications créées avec Next.js. Nous n'en parlerons pas, car nous nous concentrons sur ce que Next.js fournit spécifiquement. Pour en savoir plus sur les optimisations générales de React, consultez notre collection React.
En quoi Next.js est-il différent de React ?
React est une bibliothèque qui facilite la création d'interfaces utilisateur à l'aide d'une approche basée sur les composants. Bien que puissant, React est spécifiquement une bibliothèque d'UI. De nombreux développeurs incluent des outils supplémentaires, tels qu'un bundler de modules (webpack, par exemple) et un transpiler (Babel, par exemple) pour obtenir une chaîne d'outils de compilation complète.
Dans la collection React, nous avons adopté l'approche consistant à utiliser Create React App (CRA) pour lancer rapidement des applications React. CRA simplifie la configuration d'une application React en fournissant une chaîne d'outils de compilation complète via une seule commande.
Bien qu'il existe quelques optimisations par défaut intégrées à CRA, l'outil vise à fournir une configuration simple et directe. C'est aux développeurs de décider s'ils doivent exclure et modifier eux-mêmes les configurations.
Next.js, qui peut également être utilisé pour créer une application React, adopte une approche différente. Il fournit immédiatement un certain nombre d'optimisations courantes que de nombreux développeurs aimeraient utiliser, mais qui sont difficiles à configurer, telles que:
- Rendu côté serveur
- Fractionnement automatique du code
- Préchargement des routes
- Routage du système de fichiers
- Style CSS-in-JS (
styled-jsx)
Configurer
Pour créer une application Next.js, exécutez la commande suivante:
npx create-next-app new-app
Accédez ensuite au répertoire et démarrez le serveur de développement:
cd new-app
npm run dev
L'élément intégré suivant montre la structure de répertoires d'une nouvelle application Next.js.
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
- Pour prévisualiser le site, appuyez sur View App (Afficher l'application), puis sur Fullscreen (Plein écran)
.
Notez qu'un répertoire pages/ est créé avec un seul fichier: index.jsx. Next.js suit une approche de routage à partir d'un système de fichiers, où chaque page de ce répertoire est diffusée sous la forme d'une route distincte. La création d'un fichier dans ce répertoire, par exemple about.js, crée automatiquement une route (/about).
Les composants peuvent également être créés et utilisés comme n'importe quelle autre application React. Un répertoire components/ a déjà été créé avec un seul composant, nav.js, qui est déjà importé dans index.js. Par défaut, chaque importation utilisée dans Next.js n'est récupérée que lors du chargement de la page, ce qui offre les avantages de la répartition automatique du code.
De plus, chaque chargement initial de page dans Next.js est affiché côté serveur. Si vous ouvrez le panneau "Network" (Réseau) dans les outils de développement, vous pouvez voir que la requête initiale pour le document renvoie une page entièrement affichée par le serveur.
Ce ne sont là que quelques-unes des nombreuses fonctionnalités fournies automatiquement par Next.js. Nombre d'entre elles sont personnalisables et peuvent être modifiées pour différents cas d'utilisation.
Étape suivante
Coup de pouce prévu ↁ
Tous les autres guides de cette collection exploreront en détail une fonctionnalité Next.js spécifique:
- Préchargement des routes pour accélérer la navigation sur les pages
- Diffuser des pages hybrides et uniquement AMP pour accélérer le chargement depuis les moteurs de recherche
- Composants de fractionnement de code avec des importations dynamiques pour réduire l'empreinte JavaScript