IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack basé sur Rust


Sujet :

JavaScript

  1. #1
    Chroniqueur Actualités
    Avatar de Bruno
    Homme Profil pro
    Rédacteur technique
    Inscrit en
    mai 2019
    Messages
    1 138
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Rédacteur technique
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : mai 2019
    Messages : 1 138
    Points : 22 941
    Points
    22 941
    Par défaut Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack basé sur Rust
    Next.js 13 est disponible, elle apporte Turbopack, le nouveau successeur de Webpack basé sur Rust
    sur une application comportant 3 000 modules, le démarrage de Turbopack prend 1,8 seconde

    La version 11 de Next.js, la chaîne d'outils qui fournit une structure commune et permet de construire facilement une application frontale React a été publiée le 25 octobre avec de nouvelles fonctionnalités et quelques améliorations. Elle gère de manière transparente le rendu côté serveur pour les utilisateurs.

    Rappelons que React est une bibliothèque JavaScript développée par Facebook depuis 2013 et traditionnellement utilisée pour créer des applications Web dont le rendu est assuré par JavaScript dans le navigateur du client. Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page HTML à chaque changement d'état. Next.js est l'un des composants les plus populaires de React.

    Voyons ci-dessous quelques nouveautés de cette version.

    Répertoire app/

    Le répertoire app/ peut coexister avec le répertoire pages existant pour une adoption progressive. Bien que l’utilisateur n’ait pas besoin d'utiliser le répertoire app/ lors de la mise à niveau vers Next.js 13, les bases sont posées pour construire des interfaces complexes tout en envoyant moins de JavaScript.

    Nom : Appb.jpg
Affichages : 20785
Taille : 12,0 Ko

    Mises en page

    Le répertoire app/ facilite la mise en page d'interfaces complexes qui maintiennent l'état entre les navigations, évitent les réexpositions fastidieuses et permettent des modèles de routage avancés. En outre, il est possible d'associer du code d'application aux routes, comme des composants, des tests et des styles. La création de routes dans le répertoire app/ nécessite un seul fichier, page.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // app/page.js
    // This file maps to the index route (/)
    export default function Page() {
      return <h1>Hello, Next.js!</h1>;
    }

    Il est désormais possible de définir des mises en page via le système de fichiers. Les mises en page partagent l'interface utilisateur entre plusieurs pages. Lors de la navigation, les mises en page préservent l'état, restent interactives et ne font pas l'objet d'un nouveau rendu.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    // app/blog/layout.js
    export default function BlogLayout({ children }) {
      return <section>{children}</section>;
    }

    Composants de serveur

    Le répertoire app/ introduit le support de la nouvelle architecture Server Components de React. Les composants de serveur utilisent le serveur et le client pour ce qu'ils font de mieux, ce qui permet de créer des applications rapides et hautement interactives avec un modèle de programmation unique qui offre une excellente expérience aux développeurs.

    En utilisant les composants de serveur, il est possible de réduire la quantité de JavaScript envoyée au client, ce qui permet un chargement initial plus rapide des pages. Lorsqu'une route est chargée, le moteur d'exécution Next.js et React, dont la taille est prévisible et peut être mise en cache, est chargé. La taille de ce moteur d'exécution n'augmente pas à mesure que votre application se développe. En outre, le moteur d'exécution est chargé de manière asynchrone, ce qui permet d'améliorer progressivement le HTML du serveur sur le client.

    Streaming

    Le répertoire app/ introduit la possibilité d'effectuer un rendu progressif et un flux incrémentiel des unités de l'interface utilisateur vers le client. Grâce aux composants de serveur et aux dispositions imbriquées de Next.js, il est possible de rendre instantanément les parties de la page qui ne requièrent pas spécifiquement de données, et d'afficher un état de chargement pour les parties de la page qui récupèrent des données. Avec cette approche, l'utilisateur n'a pas besoin d'attendre le chargement de la page entière avant de pouvoir commencer à interagir avec elle.

    Nom : Appb1.jpg
Affichages : 2502
Taille : 21,1 Ko

    Lorsqu'elles sont déployées sur Vercel, les applications Next.js 13 qui utilisent le répertoire app/ diffuseront les réponses par défaut dans les moteurs d'exécution Node.js et Edge pour améliorer les performances.

    Récupération de données

    Le répertoire app/ introduit une nouvelle façon puissante d'extraire des données, construite au-dessus de React Suspense for Data Fetching. Le nouveau hook d'utilisation remplace les API Next.js précédentes comme getStaticProps et getServerSideProps et s'aligne sur l'avenir de React.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // app/page.js
    import { use } from 'react';
     
    async function getData() {
      const res = await fetch('...');
      const name: string = await res.json();
      return name;
    }
     
    export default function Page() {
      // This value is fully typed
      // The return value is *not* serialized
      // so you can return Date, Map, Set, etc.
      const name = use(getData());
     
      return '...';
    }

    Il existe désormais un moyen flexible d'extraire, de mettre en cache et de revalider les données au niveau des composants. Cela signifie que tous les avantages de la génération de sites statiques (SSG), du rendu côté serveur (SSR) et de la régénération statique incrémentielle (ISR) sont désormais disponibles via le hook d'utilisation de React et en étendant l'API de récupération Web :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // This request should be cached until manually invalidated.
    // Similar to `getStaticProps`.
    // `force-cache` is the default and can be omitted.
    fetch(URL, { cache: 'force-cache' });
     
    // This request should be refetched on every request.
    // Similar to `getServerSideProps`.
    fetch(URL, { cache: 'no-store' });
     
    // This request should be cached with a lifetime of 10 seconds.
    // Similar to `getStaticProps` with the `revalidate` option.
    fetch(URL, { next: { revalidate: 10 } });

    Dans le répertoire d'applications, il est possible de récupérer des données à l'intérieur des pages et de composants - y compris la prise en charge des réponses en continu depuis le serveur. Il est possible de maintenir des expériences riches et interactives côté client tout en envoyant beaucoup moins de JavaScript par défaut. À mesure que le nombre de composants du serveur augmente dans votre application, la quantité de JavaScript nécessaire côté client reste constante.

    Le répertoire app/ permet de gérer de manière ergonomique les états de chargement et d'erreur et de diffuser l'interface utilisateur au fur et à mesure de son rendu. La possibilité de colocaliser la récupération des données dans les composants et d'envoyer moins de JavaScript au client sont deux éléments importants de la communauté que nous sommes heureux d'inclure dans le répertoire app/.

    Présentation de Turbopack

    Next.js 13 inclut Turbopack, le nouveau successeur de Webpack basé sur Rust. Webpack a été téléchargé plus de 3 milliards de fois. Dans Next.js 12, nous avons commencé notre transition vers un outillage natif alimenté par Rust.

    En utilisant l'alpha de Turbopack avec Next.js 13, on obtient :

    • des mises à jour 700x plus rapides que Webpack ;
    • des mises à jour 10x plus rapides que Vite ;
    • des démarrages à froid 4x plus rapides que Webpack.

    Nom : Appb3.jpg
Affichages : 2488
Taille : 17,0 Ko

    Turbopack ne regroupe que le minimum de ressources nécessaires au développement, le temps de démarrage est donc extrêmement rapide. Sur une application comportant 3 000 modules, le démarrage de Turbopack prend 1,8 seconde. Vite prend 11,4 secondes et Webpack 16,5 secondes. Turbopack prend en charge dès le démarrage les composants de serveur, TypeScript, JSX, CSS, etc. De nombreuses fonctionnalités ne sont pas encore prises en charge.

    Next/image

    Next.js 13 introduit un nouveau composant puissant, Image, qui permet d'afficher facilement des images sans modifier la mise en page et d'optimiser les fichiers à la demande pour des performances accrues. Au cours de l'enquête de la communauté Next.js, 70 % des personnes interrogées ont dit qu'elles utilisaient le composant Next.js Image en production. Next.js 13 améliore encore plus Next/image.

    Le nouveau composant Image :

    Moins de JavaScript côté client ;
    plus facile à concevoir et à configurer ;
    plus accessible grâce aux balises alt par défaut ;
    s'aligne sur la plateforme Web ;
    Plus rapide car le chargement paresseux natif ne nécessite pas d'hydratation

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    import Image from 'next/image';
    import avatar from './lee.png';
     
    function Home() {
      // "alt" is now required for improved accessibility
      // optional: image files can be colocated inside the app/ directory
      return <Image alt="leeerob" src={avatar} placeholder="blur" />;
    }

    Mise à niveau de next/image vers Next.js 13

    L'ancien composant Image a été renommé en next/legacy/image. L'équipe a fourni un codemod qui mettra automatiquement à jour l'utilisation de next/image vers next/legacy/image. Par exemple, cette commande exécutera le codemod sur le répertoire ./pages lorsqu'elle est exécutée depuis la racine :

    npx @next/codemod next-image-to-legacy-image ./pages

    next/link

    next/link ne nécessite plus d'ajouter manuellement <a> comme filiation. Cette option a été ajoutée en tant qu'option expérimentale dans la version 12.2 et est maintenant la valeur par défaut. Dans Next.js 13, <Link> permet de transmettre les props à la balise sous-jacente. Par exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import Link from 'next/link'
     
    // Next.js 12: `<a>` has to be nested otherwise it's excluded
    <Link href="/about">
      <a>About</a>
    </Link>
     
    // Next.js 13: `<Link>` always renders `<a>`
    <Link href="/about">
      About
    </Link>
    Génération d'images OG

    Les cartes sociales, également connues sous le nom d'images open graph, peuvent augmenter massivement le taux d'engagement des clics sur le contenu de l'utilisateur, certaines expériences montrant jusqu'à 40 % de conversions en plus. Les cartes sociales statiques prennent beaucoup de temps, sont sujettes à des erreurs et sont difficiles à entretenir. Pour cette raison, les cartes sociales sont souvent absentes ou même ignorées. Jusqu'à aujourd'hui, les cartes sociales dynamiques qui doivent être personnalisées et calculées à la volée étaient difficiles et coûteuses.

    L'équipe Next.js a créé une nouvelle bibliothèque @vercel/og qui fonctionne de manière transparente avec Next.js pour générer des cartes sociales dynamiques.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // pages/api/og.jsx
     
    import { ImageResponse } from '@vercel/og';
     
    export const config = {
      runtime: 'experimental-edge',
    };
     
    export default function () {
      return new ImageResponse(
        (
          <div
            style={{
              display: 'flex',
              fontSize: 128,
              background: 'white',
              width: '100%',
              height: '100%',
            }}
          >
            Hello, World!
          </div>
        ),
      );
    }

    Cette approche est 5 fois plus rapide que les solutions existantes grâce à l'utilisation des fonctions Vercel Edge, de WebAssembly et d'une toute nouvelle bibliothèque centrale pour convertir le HTML et le CSS en images et tirer parti de l'abstraction des composants React.

    Mises à jour de l'API Middleware

    Dans Next.js 12, l'équipe Nest.js a introduit le Middleware pour permettre une flexibilité totale avec le routeur Next.js. Elle a apporté quelques ajouts pour améliorer l'expérience du développeur et ajouter de nouvelles fonctionnalités. Il est maintenant possible de définir plus facilement les en-têtes sur la requête :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // middleware.ts
    import { NextResponse } from 'next/server';
    import type { NextRequest } from 'next/server';
     
    export function middleware(request: NextRequest) {
      // Clone the request headers and set a new header `x-version`
      const requestHeaders = new Headers(request.headers);
      requestHeaders.set('x-version', '13');
     
      // You can also set request headers in NextResponse.rewrite
      const response = NextResponse.next({
        request: {
          // New request headers
          headers: requestHeaders,
        },
      });
     
      // Set a new response header `x-version`
      response.headers.set('x-version', '13');
      return response;
    }

    Il est maintenant possible de fournir une réponse directement à partir du Middleware, sans avoir à réécrire ou à rediriger.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    // middleware.ts
    import { NextRequest, NextResponse } from 'next/server';
    import { isAuthenticated } from '@lib/auth';
     
    // Limit the middleware to paths starting with `/api/`
    export const config = {
      matcher: '/api/:function*',
    };
     
    export function middleware(request: NextRequest) {
      // Call our authentication function to check the request
      if (!isAuthenticated(request)) {
        // Respond with JSON indicating an error message
        return NextResponse.json(
          {
            success: false,
            message: 'Auth failed',
          },
          {
            status: 401,
          },
        );
      }
    }
    L'envoi de réponses à partir d'un intergiciel nécessite actuellement l'option de configuration experimental.allowMiddlewareResponseBody dans next.config.js.

    Source : Next.js

    Et vous ?

    Utilisez-vous Next.js ? Que pensez-vous des nouveautés de la version 13 ?

    Voir aussi :

    La version 12 de Next.js, l'outil de développement open source construit autour de Node.js, est disponible, avec un compilateur Rust 17x plus rapide que Babel et une priorité aux modules ES

    Next.js 11 est disponible, elle améliore le temps de démarrage de 24 % et réduit de 40 % le temps de traitement des modifications
    Contribuez au club : corrections, suggestions, critiques, ... Contactez le service news et Rédigez des actualités

  2. #2
    Membre habitué
    Homme Profil pro
    Développeur Web
    Inscrit en
    septembre 2011
    Messages
    79
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : septembre 2011
    Messages : 79
    Points : 126
    Points
    126
    Par défaut
    J'adore developpez.net pour ce type de news !

    Ce turbotruc est un bundler et pourtant c'est très prometteur (malgré la disponibilité des ESM aujourd'hui). C'est très bien argumenté ici https://turbo.build/pack/docs/why-tu...-vs-native-esm

    Je garde une préférence pour un projet en ESM natif même s'il est vrai que la résolution des dépendances en cascade est un souci (ceci dit, les importmaps et modulepreload sont là pour ça)

  3. #3
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2017
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2017
    Messages : 1
    Points : 1
    Points
    1
    Par défaut
    J’utilise déjà la version 13 en prod mais pas encore les features comme layout. Je me demande si on a les mêmes performances en déployant ailleurs que sur vercel

Discussions similaires

  1. Réponses: 4
    Dernier message: 02/05/2021, 22h40
  2. Réponses: 0
    Dernier message: 28/03/2021, 11h19
  3. Réponses: 40
    Dernier message: 19/01/2011, 08h14
  4. Réponses: 21
    Dernier message: 24/12/2010, 04h02

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo