Performances par défaut avec Next.js

Next.js se charge de nombreuses optimisations dans votre application React, ce qui vous évite d'avoir à le faire.

Houssein Djirdeh

Next.js est un framework React d'opinion qui intègre un certain nombre d'optimisations des performances. L'idée principale de ce 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 présente brièvement de nombreuses fonctionnalités fournies par le framework à un niveau élevé. Les autres guides de cette collection explorent les fonctionnalités plus en détail.

Qu'allez-vous apprendre ?

Bien que Next.js propose par défaut un certain nombre d'optimisations des performances, 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 fonctionneraient également pour les applications créées avec Next.js. Nous ne les aborderons 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 transpileur (Babel, par exemple), pour disposer d'une chaîne d'outils de compilation complète.

Dans la collection React, nous avons choisi d'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 à l'aide d'une seule commande.

Bien que quelques optimisations par défaut soient intégrées à CRA, l'outil vise à fournir une configuration simple et directe. Les développeurs peuvent décider d'éjecter et de 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 souhaitent avoir, mais qu'ils ont du mal à configurer, telles que :

  • Affichage côté serveur
  • Division automatique du code
  • Préchargement des routes
  • Routage basé sur un système de fichiers
  • styled-jsx (style CSS-in-JS)

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 View App (Afficher l'application), puis sur Fullscreen (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 basée sur le système de fichiers, où chaque page de ce répertoire est diffusée en tant que 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 lorsque la page est chargée, ce qui permet de bénéficier de la division automatique du code.

De plus, chaque chargement de page initial dans Next.js est rendu côté serveur. Si vous ouvrez le panneau "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 côté serveur.

L'onglet "Aperçu" du panneau "Réseau" montre que Next.js renvoie du code HTML visuellement complet lorsqu'une page est demandée.
L'onglet "Aperçu" du panneau "Réseau" montre 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. Beaucoup d'entre eux sont personnalisables et peuvent être modifiés pour différents cas d'utilisation.

Étape suivante

(jeu de mots volontaire 😛)

Chaque autre guide de cette collection explore en détail une fonctionnalité Next.js spécifique :