Performances par défaut avec Next.js

Next.js s'occupe de nombreuses optimisations dans votre application React, ce qui vous évite

Houssein Djirdeh

Next.js est un framework React défini de manière à intégrer un certain nombre d'optimisations des performances. L'idée principale derrière le 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 aborde brièvement de nombreuses fonctionnalités fournies par le framework à un niveau élevé. Les autres guides de cette collection exploreront ces fonctionnalités plus en détail.

Qu'allez-vous apprendre ?

Bien que Next.js fournisse 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 fonctionnent également pour les applications créées avec Next.js. Celles-ci ne seront pas abordées, car Next.js se concentre sur les fonctionnalités spécifiques. 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 des composants. Bien que performante, 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 transpilateur (Babel, par exemple) pour disposer d'une chaîne d'outils de compilation complète.

Dans la collection React, nous avons adopté la méthode Create React App (Créer une application React) pour lancer rapidement les applications React. L'ARA facilite la configuration d'une application React en fournissant une chaîne d'outils de compilation complète à l'aide d'une seule commande.

Bien que quelques optimisations par défaut soient intégrées à l'objet CRA, l'outil vise à fournir une configuration simple et simple. Les développeurs ont le choix de décider s'ils doivent exclure et modifier les configurations elles-mêmes.

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 avoir, mais qu'ils trouvent difficiles à configurer, telles que:

  • Rendu côté serveur
  • Répartition 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'intégration suivante montre la structure de répertoires d'une nouvelle application Next.js.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  • Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.

Notez qu'un répertoire pages/ est créé avec un seul fichier: index.jsx. Next.js suit une approche de routage vers le système de fichiers, dans laquelle chaque page de ce répertoire est diffusée comme une route distincte. La création d'un fichier dans ce répertoire, par exemple about.js, entraîne la création automatique d'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 lorsque la page est chargée, ce qui offre les avantages de la division automatique du code.

De plus, chaque chargement initial de page dans Next.js est rendu côté serveur. Si vous ouvrez le panneau "Network" (Réseau) dans les outils de développement, vous pouvez constater que la requête initiale du document renvoie une page entièrement affichée par le serveur.

L'onglet "Aperçu" du panneau "Réseau" indique que Next.js renvoie du code HTML complet visuellement lorsqu'une page est demandée.
L'onglet "Aperçu" du panneau "Réseau" indique que Next.js renvoie du code HTML visuellement complet lorsqu'une page est demandée.

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

Je n'en reviens pas...

Tous les autres guides de cette collection présentent une fonctionnalité Next.js spécifique en détail: