Next JS Conf & Next 14 : Les 3 points clés à retenir

Vercel vient d'annoncer la sortie de Next JS 14. Passons en revue les 3 points clés de la conférence Next JS et ce que cela signifie pour vous. (Et 2 points bonus que j'ai trouvés très intéressants)

La sortie de NextJS 14 et les nouvelles non fonctionnelles

Tout d'abord, la sortie de Next JS 14. Vercel dit que Next 14 est "notre version la plus ciblée". Qu'est-ce que cela signifie ? Sur quoi l'accent a-t-il été mis ? Passons en revue ce qui a été annoncé.

Pas de nouvelles API

Comme Guillermo Rauch, le créateur de Next JS (et également PDG de Vercel), était fier d'annoncer lors de la keynote, Next JS 14 ne contient pas de nouvelles API. En bref, l'équipe Next s'est concentrée sur l'amélioration de ce qu'elle a déjà créé plutôt que sur l'implémentation de quelque chose de nouveau. Qu'ont-ils amélioré ?

Turbo packager se rapproche : 90% des tests réussis

Tout d'abord, l'équipe s'est concentrée sur les performances. Ils ont travaillé sur Turbo, leur compilateur basé sur Rust. Lorsqu'il est exécuté sur le site vercel.com, il démarre le serveur local 53% plus rapidement, et rafraîchi le site jusqu'à 94% plus rapidement en cas de changement de code.

Cependant, Turbo n'est pas encore stable. Un site web appelé "Are we Turbo Yet" vous permet de suivre le taux de réussite des tests unitaires. Pour l'instant, le taux de réussite est de 91 %.

Comme j'avais l'habitude de le dire lorsque je développais des jeux vidéo, la partie la plus difficile ce n'est pas les premiers 90 % du travail, mais les seconds 90 % du travail qui permettent de terminer les 10 % qui restent.

Pré-rendu partiel

Le deuxième domaine est la simplicité. L'équipe a travaillé sur une nouvelle fonctionnalité appelée "Pré-rendu partiel". Quelle est la différence avec tous les autres modes de rendu dont nous avons parlé au fil des ans entre SSG et SSR et ISG et RSCs ?

Il y a quelques points à souligner ici.

Premièrement, il s'agit actuellement d'une fonctionnalité expérimentale. Vous pouvez l'activer via le fichier de configuration, mais elle n'est pas encore stable.

Deuxièmement, l'objectif est de simplifier Next JS, et la façon dont le rendu est configuré par le développeur.

En utilisant la délimitation via les composants Suspense, l'application détermine quelles parties de l'application sont dynamiques et lesquelles sont statiques. Elle pré-rend les parties statiques de la page en HTML, et streame les mises à jour des parties dynamiques.

L'idée est d'offrir le meilleur des deux mondes entre le rendu dynamique et le rendu statique. Cela rappelle les îlots d'interactivité d'Astro.

En parlant d'interactivité, si cela vous est utile, n'hésitez pas à me le faire savoir en interagissant avec le bouton "J'aime" ou l'interface de commentaires :)

Actions du serveur

Troisièmement, dans le cadre de l'accent mis sur la simplicité, l'équipe a également travaillé sur les Actions serveur qui sont maintenant stables. Quel en est l'impact ?

On m’a demandé quel serveur backend adosser à Next JS. Next JS est un serveur backend, mais le déclenchement de la logique backend a toujours été un peu compliqué. Avec Server Actions, c'est beaucoup plus simple.

L'idée est que vous définissez une fonction sur le serveur et vous la déclenchez simplement en l’appelant sur le client, par exemple, via le callback d'un bouton ou une action de formulaire, comme vous pouvez le voir dans ce code :

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

D'un point de vue fonctionnel, il s'agit d'un “remote procedure call”, un appel de procédure à distance ou RPC. En bref, cela fournit le même typage et la même fonctionnalité que tRPC, mais avec une meilleure expérience pour le développeur. Parce qu'il s'agit d'une fonctionnalité native de Next JS.

Annonces complémentaires

Tout ça est prometteur, mais il y a deux points dans la conférence qui ont attiré mon attention et qui ne sont pas directement dans Next JS.

Svelte AI SDK & v0.dev

Tout d'abord, Jared Palmer, responsable de l'IA chez Vercel, a expliqué comment les fonctionnalités de streaming de Next JS sont particulièrement adaptées à l'IA générative. Il a annoncé le nouveau SDK IA de Vercel qui fournit une interface unifiée avec différents LLM. Ce SDK est utilisé dans v0.dev, le site web où vous décrivez l'interface que vous souhaitez et où elle est générée.

v0.dev est construit sur Next 14 et présente le SDK et l'interface utilisateur en continu. Dès que j'y aurai jeté un coup d'oeil de plus près, je vous en parlerai ici même.

Apprenez Next JS

Guillermo a également annoncé la création d'un site web de tutoriel pour vous apprendre toutes les fonctionnalités de Next JS, y compris l'authentification et le stockage. Je vous expliquerai ici en quoi il peut vous être utile dès que je l'aurai parcouru.