Next.js 8.0.4

Nous sommes heureux de vous présenter Next.js 8.0.4 prêt pour la production :

• Améliorations des performances de build
• Builds déterministes
• Runtime client plus léger
• Fonctions serverless plus petites
• Balise viewport par défaut
• Améliorations du guide d'apprentissage

Comme toujours, nous avons veillé à ce que tous ces avantages soient entièrement rétrocompatibles. Pour la plupart des applications Next.js, il vous suffit d'exécuter :

npm i next@latest react@latest react-dom@latest

Performances de build

Les builds Next.js sont maintenant plus déterministes, ce qui signifie que si le code n'est pas modifié, le résultat du build sera identique à chaque fois.

Cela permet de mieux exploiter le cache pendant le processus de build, ce qui se traduit par des rebuilds plus rapides du code de production après le premier build.

Nos mesures ont révélé qu'une partie significative du temps de build est consacrée à la minification du JavaScript. Comme le résultat du build est maintenant plus déterministe, les chances que le fichier minifié soit déjà dans le cache sont plus élevées.

Les utilisateurs déployant sur Vercel bénéficieront automatiquement de ces améliorations de cache.

Nous avons simplifié notre manifeste côté serveur next/dynamic pour n'inclure que les modules chargés de manière asynchrone. Ce manifeste simplifié est plus rapide à calculer et produit moins de JavaScript.

Les utilisateurs de CircleCI devraient constater des temps de build plus rapides. Auparavant, les workers étaient surchargés car l'environnement CircleCI ne reflétait pas précisément le nombre de CPUs disponibles. Next.js détecte maintenant CircleCI et définit un nombre approprié de CPUs en fonction des ressources disponibles.

Runtime plus léger

Next.js génère maintenant 5,58 Ko de moins de JavaScript côté client et a une charge utile HTTP plus petite que la version précédente.

withRouter ne dépend plus de hoist-non-react-statics, réduisant la taille du bundle de 3 Ko. withRouter continuera à hoister getInitialProps, mais pas les autres propriétés statiques.

Le preset next/babel a été optimisé pour produire du JavaScript plus léger et plus rapide.

L'en-tête X-Powered-By a été supprimé, réduisant la taille de la charge utile HTTP. Après avoir sondé la communauté, nous avons constaté que cet en-tête était souvent désactivé en production, nous avons donc décidé de le supprimer. Cela signifie également que l'option poweredByHeader peut être retirée de votre next.config.js si elle était activée dans votre projet.

Nous avons effectué de nombreuses optimisations dans l'arbre de dépendances de Next.js et dans l'ensemble du codebase, ce qui nous a permis de réduire chaque fonction Serverless de 44 Ko (5,44 Ko gzip).

La taille des fonctions Serverless affecte directement les performances de démarrage, des fonctions plus petites signifient un démarrage plus rapide.

Après la sortie de Next.js 8, nous avons reçu des rapports d'un petit nombre d'utilisateurs ayant des difficultés à importer des composants React en dehors de Next.js, par exemple dans leur suite de tests. Cela était dû au fait que les imports vers next étaient réécrits vers le fichier correct dans le codebase de Next.js, cependant, cette optimisation était appliquée à tous les utilisateurs du preset next/babel. L'optimisation a été déplacée dans le processus de build de Next.js lui-même, donc elle n'entrera plus en conflit avec les configurations babel des utilisateurs.

Balise meta viewport par défaut

Un des objectifs de Next.js est de fournir les meilleures valeurs par défaut pour développer des applications web. Dans un effort pour réduire la configuration nécessaire lors de l'implémentation de requêtes média CSS dans Next.js.

Par défaut, les navigateurs ne gèrent pas les requêtes CSS @media et le zoom comme on pourrait s'y attendre, ce qui peut entraîner des incohérences lors de l'écriture de requêtes CSS @media.

Dans presque tous les cas, les utilisateurs de Next.js ajoutaient une balise meta viewport à leur application pour résoudre ces incohérences.

À partir de la version 8.0.4, cette balise viewport n'est plus nécessaire dans la plupart des cas. Si le viewport n'est pas défini par l'application, une valeur par défaut sera appliquée :

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

La balise viewport peut toujours être écrasée en utilisant next/head :

import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

Merci à Jason Miller pour sa collaboration et l'implémentation de ce changement.

Nouveau plugin @next/mdx

MDX vous permet d'écrire du JSX dans vos documents Markdown. Vous pouvez utiliser la syntaxe Markdown standard pour écrire du contenu et importer des composants React pour enrichir le document avec du contenu interactif et dynamique.

Le plugin qui fournit le support MDX pour Next.js, @zeit/next-mdx, a été déplacé vers le dépôt GitHub de Next.js et est maintenant disponible sous le nom @next/mdx.

Installation :

npm i @next/mdx @mdx-js/loader

Pour le rendre disponible à votre application Next.js, créez un fichier next.config.js et incluez :

const withMDX = require('@next/mdx')();
module.exports = withMDX();

Avec le temps, plus de plugins Next.js seront déplacés dans le dépôt Next.js afin qu'ils soient publiés avec le cœur de Next.js et testés par la suite de tests de Next.js. De cette façon, nous pouvons nous assurer que le hot module replacement, la construction en production et d'autres fonctionnalités fonctionnent bien avec les plugins.

Améliorations du guide d'apprentissage

Next.js Learn est un guide étape par étape pour apprendre Next.js, avec des quiz et des exemples.

Le site a récemment été reconstruit en utilisant MDX, ce qui rend les contributions plus faciles que jamais. Nous invitons quiconque à contribuer au site d'apprentissage !

Le site a également été mis à niveau pour utiliser la cible serverless de Next.js, introduite dans Next.js 8, garantissant que le site est évolutif et rapide pour les utilisateurs du monde entier.

Nous avons reçu beaucoup de retours de la communauté concernant des améliorations de contenu, et nous avons agi en conséquence ces dernières semaines. Next.js Learn a maintenant des exemples mis à jour et plus de détails dans chaque section pour rendre les instructions plus faciles à comprendre !

Le site Next.js Learn

Contributions

Nous sommes très enthousiastes de voir l'adoption continue de Next.js.

• Nous avons eu plus de 660 contributeurs.
• Sur GitHub, le projet a été star plus de 36 150 fois.
• Plus de 2 950 pull requests ont été soumises depuis la première version.

Nous tenons à remercier tous ceux qui ont contribué à cette version de Next.js. Qu'il s'agisse de contributions au cœur du projet ou d'expansion et d'amélioration de notre répertoire d'exemples toujours croissant, nous apprécions toutes les contributions.

Si vous souhaitez commencer à contribuer à Next.js, les issues avec les labels good first issue ou help wanted sont un bon point de départ.

Communauté

La communauté Next.js a grandi à plus de 6 000 membres.

Les discussions GitHub sont un endroit où vous pouvez discuter de Next.js, obtenir des conseils pour résoudre des problèmes et aider d'autres membres de la communauté avec vos connaissances de Next.js.

Rejoignez la communauté sur GitHub !