Les icônes ajoutées par Next.js à votre application

Découvrez ce que signifient les icônes générées par Next.js en mode développement

Lorsque vous travaillez sur une application Next.js, voyez-vous cette petite icône en bas à droite de la page, qui ressemble à un éclair?

Si vous passez la souris dessus, il indiquera "Page pré-proposée":

Cette icône, qui estvisible uniquement en mode développementbien sûr, vous indique que la page se qualifie pour l'optimisation statique automatique, ce qui signifie essentiellement qu'elle ne dépend pas des données qui doivent être récupérées au moment de l'invocation, et qu'elle peut être pré-rendue et construite en tant que fichier HTML statique au moment de la construction (lorsque nous Coursnpm run build).

Next peut le déterminer par l'absence degetInitialProps()méthode attachée au composant de page.

Dans ce cas, notre page peut être encore plus rapide car elle sera servie de manière statique sous forme de fichier HTML plutôt que de passer par le serveur Node.js qui génère la sortie HTML.

Une autre icône utile qui peut apparaître à côté de celle-ci, ou à la place de celle-ci sur des pages non pré-ajoutées, est un petit triangle animé:

Ceci est un indicateur de compilation et apparaît lorsque vous enregistrez une page et que Next.js compile l'application avant que le rechargement du code à chaud ne démarre pour recharger automatiquement le code dans l'application.

C'est un très bon moyen de déterminer immédiatement si l'application a déjà été compilée et vous pouvez en tester une partie sur laquelle vous travaillez.

Téléchargez mon gratuitManuel Next.js


Plus de prochains tutoriels: