Sortie de Next.js 9

Par:
fredericmazue

mar, 27/08/2019 - 13:14

Le framework JavaScript Next.js, construit au dessus de la bibliothèque React de Facebook est sorti en version 9 récemment.

Les nouveautés principales sont, selon l'équipe de développement,  les suivantes :

  • Prise en charge automatique TypeScript  et à vérification de type intégrée.
  • Routage dynamique basé sur le système de fichiers : celui-ci permet d'exprimer le routage des applications complexes à travers le système de fichiers sans avoir besoin d'un serveur personnalisé.
  • Optimisation statique automatique 
  • Routes d’API  pour créer rapidement des points de terminaison d’application dorsaux, en tirant parti du rechargement à chaud et d’un pipeline de construction unifié.
  • Optimisation accrue de la production 

Cette version présente toutefois des brisures de compatibilité résumées sur la page GitHub du projet. Par exemple, la possibilité de charger plusieurs modules en une seule fois a été dépréciée dans next/dynamic afin d'être plus proche de l'implémentation de React, explique l'équipe de développement.

Ainsi, par exemple, ce code

import dynamic from 'next/dynamic'

const HelloBundle = dynamic({
  modules: () => {
    const components = {
      Hello1: () => import('../components/hello1').then(m => m.default),
      Hello2: () => import('../components/hello2').then(m => m.default)
    }

    return components  
  },
render: (props, { Hello1, Hello2 }) => (
    <div>
      <h1>{props.title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  ),
})
function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}

export default DynamicBundle

doit être modifié ainsi :

import dynamic from 'next/dynamic'

const Hello1 = dynamic(() => import('../components/hello1'))
const Hello2 = dynamic(() => import('../components/hello2'))

function HelloBundle({ title }) {
  return (
    <div>
      <h1>{title}</h1>
      <Hello1 />
      <Hello2 />
    </div>
  )
}

function DynamicBundle() {
  return <HelloBundle title="Dynamic Bundle" />
}

export default DynamicBundle