Explorons les nouvelles fonctionnalités livrées avec Next.js 9.4, y compris l'actualisation rapide, la création de rapports Web vitals intégrés, la prise en charge de nouvelles variables d'environnement et plus encore.

Next.js est bien connu comme cadre React pour les pages statiques, les applications Web progressives, les applications Web mobiles, les pages optimisées pour le référencement et, plus particulièrement, le rendu côté serveur. Il facilite l'exportation statique avec juste une ligne de commande et est livré avec une bibliothèque CSS-in-JS de style JSX. Il inclut également des fonctionnalités telles que le fractionnement de code, le rendu universel et le rechargement à chaud.

Examinons en détail certaines des nouvelles fonctionnalités les plus remarquables fournies avec la dernière version du framework: Next.js 9.4 – des choses comme la rapidité rafraîchissement, régénération statique incrémentielle, prise en charge de nouvelles variables d'environnement, améliorations de la prise en charge de la récupération intégrée, rapports de vitales Web et améliorations de la sortie du journal. rafraîchissement activé par défaut pour tous les projets. Cela nous donne une nouvelle expérience de rechargement à chaud avec un retour instantané sur les modifications que vous apportez à vos composants React.

Même si le rechargement à chaud en tant que concept n'est pas entièrement nouveau, jusqu'à présent, en raison de la fragilité de l'activation du rechargement à chaud par défaut dans leurs projets, Next.js a en fait utilisé pour implémenter une forme grossière de rechargement à chaud qui réinitialisait toujours l'état de votre application. Le problème avec le formulaire grossier était la résilience aux erreurs d'exécution et aux erreurs de compilation. Même si vous avez fait une erreur typographique lors de la modification d'une feuille de style CSS par exemple, votre application a été rechargée et l'état se réinitialise.

À l'aide de React Refresh, l'actualisation rapide de Next.js s'intègre dans React pour gérer les mises à jour prévisibles de votre arborescence de composants React. Cela garantit que Next.js met uniquement à jour le code dans le fichier que vous modifiez et restitue uniquement ce composant sans perdre l'état du composant. Cela inclut les règles CSS (en ligne, CSS-in-JS ou SASS), HTML et effets.

Récemment, Google a introduit cette extension de navigateur Core Web Vitals qui est essentiellement un atelier de mécanique automobile pour votre application Web (si votre application était une voiture). Il vous montre des moyens de qualité pour garantir une expérience utilisateur exceptionnelle sur le Web et s'intègre parfaitement à Lighthouse. Les mesures telles que le temps de chargement, l'interactivité et la stabilité de votre application sont surveillées comme suit:

Comme Next.js est connu pour ses applications Web à performance rapide, tirant parti de ces nouveaux outils Web vitaux pour vous assurer de connaître l'état de santé de vos applications Next, l'équipe a décidé d'introduire en collaboration avec Google une nouvelle méthode. Il s'appelle reportWebVitals et il est exporté dans vos composants à partir de pages / _app.js:

     // Sera appelé une fois pour chaque métrique à signaler.
    fonction d'exportation rapportWebVitals (métrique) {
      // Ces métriques peuvent être envoyées à n'importe quel service d'analyse
      console.log (métrique)
    }
    fonction MyApp ({Component, pageProps}) {
      retour 
    }
    exportation par défaut de MyApp 

Grâce aux commentaires des utilisateurs et des clients, l'équipe Next.js a constaté que certaines entreprises qui utilisaient Next avaient du mal à savoir exactement quand une variable d'environnement est insérée dans un ensemble de navigateurs et quand elle est juste disponible dans l'environnement Node. Pour cette raison, l'équipe Next annonce qu'elle livrera cette nouvelle version de Next avec deux fonctionnalités entièrement rétrocompatibles qui aideront à résoudre ce problème.

La première fonctionnalité est que vous pouvez désormais préfixer la variable d'environnement avec NEXT_PUBLIC_ pour l'exposer au navigateur. Lorsqu'il est utilisé, il sera intégré dans le bundle JavaScript du navigateur. Cela signifie que vous n'avez pas besoin d'ajouter un next.config.js et la clé env pour exposer les variables.

     // pages / index.js
    // La variable d'environnement sera exposée au navigateur
    console.log ('Ma version d'application', process.env.NEXT_PUBLIC_VERSION)
    exporter la fonction par défaut HomePage () {
      retour 
 Hello World 
    } 

Deuxièmement, Next.js prend désormais en charge le chargement .env par défaut, afin que vous puissiez facilement définir des variables d'environnement de développement et de production. Si vous voulez en savoir plus sur le chargement de l'environnement, lisez les documents ici .

Essentiellement avec ces nouvelles améliorations, l'utilisation des variables d'environnement deviendra plus facile et plus claire qu'elle ne l'était. En effet, les variables d'environnement ne seront disponibles que dans l'environnement Node.js par défaut, et les variables précédées de NEXT_PUBLIC_ seront exposées au navigateur.

Donc dans la version 9.1 de Next.js, le polyfilling de l'API fetch dans le navigateur a été annoncé, et maintenant dans cette dernière version, 9.4, il a été étendu à l'environnement Node. Cela signifie que vous n'avez pas besoin d'utiliser n'importe quel type de polyfill côté serveur pour récupérer, comme node-fetch – Next.js fournira désormais automatiquement fetch () dans tous les environnements.

Un bon exemple est lors de l'utilisation de getStaticProps qui est exécuté à l'aide de Next.js au moment de la génération:

     exportation de la fonction asynchrone getStaticProps () {
      // la récupération n'a plus besoin d'être importée depuis isomorphic-unfetch
      const res = attendre la récupération ('https: //.../posts')
      const posts = attendre res.json ()
      revenir {
        accessoires: {
          des postes
        }
      }
    }
    fonction Blog ({posts}) {
      // Rendu des articles ...
    }
    Blog par défaut d'exportation 

Selon les répertoires, si votre projet est volumineux, il est possible que certaines de vos instructions d'importation souffrent du dilemme des points et des contre-obliques:

     Bouton d'importation à partir de ' ../../../../components/button'[19659018[Dansdescascommecelui-civouspouvezutiliserdesimportationsabsoluesaulieud'utiliserdesimportationsrelativesDoncsilerépertoiredescomposantssetrouvedansledossierracinel'importationduboutonpeutsimplementprendrecetteligne:
     import Button from 'components / button' 

Avec la nouvelle version Next.js, il est encore plus facile de faire des importations absolues pour les projets JavaScript et TypeScript - ajoutez simplement la configuration baseUrl à la configuration [jsconfig.json] du projet JavaScript (https://code.visualstudio.com/docs/languages/jsconfig#_jsconfig-options) ou dans le fichier tsconfig.json pour les projets TypeScript.

     // jsconfig.json ou tsconfig.json
    {
      "options de compilation": {
        "baseUrl": "."
      }
    } 

Cela permet des importations absolues depuis le dossier racine - il s'intègre bien avec Visual Studio Code et d'autres éditeurs qui prennent en charge la navigation de code. Si vous avez déjà modifié votre configuration d'alias de module webpack pour avoir des importations absolues, elle sera supprimée lors de la mise à niveau.

De plus, vous pouvez utiliser l'option path, car Next.js prend également en charge son utilisation pour créer des alias de module personnalisés. Un bon exemple est le bloc de code ci-dessous pour utiliser @ / design-system au lieu de composants / design-system :

     // tsconfig.json ou jsconfig.json
    {
      "options de compilation": {
        "baseUrl": ".",
        "chemins": {
          "@ / design-system / *": ["components/design-system/*"]
        }
      }
    } 

Les alias peuvent être utilisés comme ceci:

     // Importe 'components / design-system / button'
    import Button depuis '@ / design-system / button' 

N'oubliez pas que si vous utilisez l'option chemins, vous devez d'abord spécifier baseUrl. Pour en savoir plus sur les chemins d'accès, vous pouvez consulter les documents TypeScript .

La prise en charge SASS intégrée a été livrée dans la dernière version Next, 9.3 et pendant cette période. l'équipe de Next a reçu des commentaires des utilisateurs que certains utilisateurs aimeraient configurer le compilateur SASS pour modifier des choses comme les includePaths. Dans cette nouvelle version de Next.js, il est désormais possible de le faire en utilisant la clé sassOptions dans next.config.js :

     const path = require ('path ')
    module.exports = {
      sassOptions: {
        includePaths: [path.join(__dirname, 'styles')]
      }
    } 

La CLI Next.js a également été repensée avec cette nouvelle version. Il est désormais plus cohérent et génère moins de données en double comme le lien de déploiement, attend le démarrage du serveur de développement et d'autres choses qui sont généralement répétées. L'espacement des textes est désormais également cohérent, il n'y a donc plus de saut d'une ligne à l'autre.

La communauté Next a montré une utilisation croissante au fil du temps, comme en témoignent ses plus de 1 000 contributeurs, 48 000+ étoiles GitHub un grand nombre d'exemples de répertoires . Ces chiffres augmentent de mois en mois, témoignant de la capacité croissante de cette communauté, et l'équipe Next.js est pleinement déterminée à améliorer l'expérience des développeurs et à optimiser le produit Next.