Next.js 6 et Nextjs.org | Next.js Français

Cette année, le keynote de ZEIT Day a commencé en mettant en avant nos projets Open Source, y compris les métriques de Next.js. Avec plus de 25000 étoiles sur GitHub et plus de 10000 sites web déjà alimentés par Next.js, nous sommes extrêmement impressionnés par sa croissance et ravis de voir le nombre croissant de projets qui en dépendent.

Nous sommes fiers aujourd'hui de présenter Next.js 6 prêt pour la production, avec :

Des exports statiques sans configuration. Plus besoin de next.config.js par défaut
_app.js, un point d'extension permettant des transitions de page, des limites d'erreur et plus encore
Babel 7 et la syntaxe de Fragment <> supportée
Des suites de tests d'intégration étendues avec un accent particulier sur la sécurité
Des annotations Flow dans le codebase principal

En plus de la version 6.0, nous mettons en avant Next.js sur son propre site web, nextjs.org, avec :

Toute la documentation de Next.js en un seul endroit. Plus besoin de consulter le fichier README sur GitHub
La fusion de https://learnnextjs.com dans https://nextjs.org/learn
Une vitrine des sites web les plus impressionnants construits avec Next.js

Applications React statiques

Next.js se concentre sur l'idée de pré-rendu comme moyen d'atteindre des performances élevées. Le pré-rendu se présente sous deux formes :

Rendu côté serveur (SSR) : où chaque requête déclenche un rendu. Ainsi, l'utilisateur final n'a pas besoin d'attendre le téléchargement de JS pour commencer à consommer des données
Rendu statique : où nous produisons des fichiers statiques qui peuvent être servis directement sans exécution de code sur le serveur

Jusqu'à présent, l'export statique dans Next.js était très puissant mais pas suffisamment facile à utiliser. Il nécessitait la configuration d'une carte de routes manuelle même lorsqu'aucune route personnalisée n'était utilisée.

Avec Next.js 6, nous générons automatiquement la carte de routes pour vous en fonction du contenu de votre répertoire pages/. Si vous n'utilisez pas de routage personnalisé avancé, vous n'aurez pas à modifier next.config.js. Il suffit d'exécuter :

next build
next export

Pour un exemple, consultez ce site web déployé statiquement sur Vercel. Le code source du site est également disponible.

Composant App

Next.js offre un point d'extensibilité appelé _document.js. S'il est défini, il vous permet de remplacer le document de plus haut niveau de votre application, qui rend l'élément <html>.

_document.js permet une extensibilité puissante, mais il a des limitations importantes. Par exemple, React ne peut pas rendre <html> ou <body> directement côté client, donc _document.js est principalement limité à la phase de pré-rendu initial.

Pour permettre d'autres cas d'utilisation puissants, nous introduisons _app.js, qui est le composant de plus haut niveau qui englobe chaque page.

Quelques différences entre _document.js et _app.js

Examinons quelques cas d'utilisation que la définition de _app.js permet.

Transitions de page

Exemple de transitions de page : page-transitions-app-next.vercel.app par Xavier Cazalot (Source)

Dans cet exemple, chaque page peut être accédée indépendamment, pré-rendue et chargée de manière différée. Cependant, lors d'une transition côté client, des animations fluides sont possibles.

Meilleure intégration d'Apollo et Redux

Nous avions déjà de nombreux exemples d'intégration de frameworks de gestion de données et d'état comme Apollo et Redux.

Avec _app.js, il est maintenant encore plus simple de les inclure. Voici quelques exemples :

Apollo (code source)
Redux (code source)

Meilleure gestion des erreurs

React offre une méthode de composant appelée componentDidCatch qui vous permet de capturer et gérer les exceptions qui remontent des composants imbriqués côté client.

Dans de nombreux cas, en raison de la nature imprévisible de ces exceptions, vous voudrez peut-être les gérer de manière égale au niveau le plus élevé.

_app.js est donc un bon endroit pour définir cette logique componentDidCatch. Voici un exemple de limites de gestion des erreurs en action (code source)

Babel 7

Nous avons mis à niveau Babel vers sa dernière version : 7. Avec elle viennent de nouvelles fonctionnalités et améliorations.

Fragments JSX

React 16.2 a introduit l'API Fragment, qui vous permet d'exprimer une liste d'éléments sans avoir à les envelopper dans un élément HTML arbitraire comme <div> :

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

Écrire cela peut être fastidieux. Avec Next.js 6, vous pouvez utiliser la nouvelle syntaxe de fragment JSX pour faciliter la création de fragments :

render() {
  return <>
    <A />,
    <B />
  </>
}

.babelrc imbriqué

Si vous avez un répertoire imbriqué dans vos applications Next.js qui nécessite une configuration Babel différente, il est maintenant possible d'inclure un fichier .babelrc spécifique à ce répertoire

src/
  .babelrc      # .babelrc général
  components/
    i18n/
      .babelrc  # Ce .babelrc ne s'applique qu'à ce répertoire

Support de première classe pour TypeScript

Lorsque nous avons annoncé Universal webpack, nous avons souligné qu'il était possible d'utiliser TypeScript via ts-loader, car nous exécutons maintenant webpack à la fois sur le serveur et le client.

Babel 7 propose un support intégré pour TypeScript (auparavant, seul Flow était supporté par Babel).

Pour l'utiliser, installez simplement la dernière version de @zeit/next-typescript ou consultez cet exemple.

Nextjs.org

Nous sommes très heureux de présenter le nouveau nextjs.org, construit par le contributeur principal de Next.js Jimmy Moon.

Pour commencer, nous mettons en avant une vidéo accélérée qui vous montre comment créer une PWA avec rendu côté serveur à partir de zéro en 5 minutes :

La vidéo d'ouverture de nextjs.org

Un seul endroit pour notre documentation

Lorsque vous avez besoin de consulter rapidement quelque chose, rendez-vous simplement sur nextjs.org/docs :

La documentation reflétera toujours la dernière version stable

Apprendre, étape par étape

Auparavant, nous recommandions aux débutants de se rendre sur https://learnnextjs.com pour un guide étape par étape (avec des quiz !) sur la prise en main de Next.js

Maintenant, nous l'avons intégré directement dans nextjs.org/learn pour faciliter encore plus l'apprentissage :

La manière la plus simple de commencer à apprendre Next.js

Inspirez-vous

Nous présentons maintenant une vitrine de quelques sites web et applications élégants construits avec Next.js. Rendez-vous sur nextjs.org/showcase pour vous inspirer, ou soumettez le vôtre !

Vitrine de projets construits avec Next.js