Les nouveautés de la version 10 de Next.js

Next.js a révolutionné la façon de créer des applications avec React tout en apportant une simplicité et une expérience de développement agréable.

C’est quoi Next.js?

Next.js est un framework basé sur React crée en 2016 qui permet de développer des applications robustes et scalables rendu coté serveur.

Dans Next.js, une page est un composant React exporté à partir d’un fichier .js, .jsx, .ts ou .tsx dans le répertoire pages. Chaque page est associée à une route en fonction de son nom de fichier.

Par Exemple Si vous créez un fichier blog.js dans le répertoire pages qui exporte un composant React , il sera accessible à http://localhost:3000/blog dans le navigateur et vous n’avez plus besoin d’utiliser react-router pour définir les routes.

Les nouveautés

Commençons par créer une application Next.js, dans le terminal tapez

npx create-next-app myapp

Puis ouvrez votre application myapp avec votre éditeur de texte (vs code dans mon cas) et vous aurez cette structure

• C’est dans le répertoire pages que va se trouver toutes les pages de l’application
• Dans le répertoire public, vous pouvez mettre tous vos fichiers statiques (images, fonts)
• Dans le répertoire styles se trouve tous vos fichiers style css. c’est un répertoire optionnel, vous pouvez mettre vos styles dans n’import quel répertoire sauf le répertoire pages qui contient les routes.

Le composant Image

la première nouveauté c’est le composant image introduit lors de la conférence de Next.js le 27 octobre dernier. ce composant permet d’’optimiser l’affichage des images pour diminuer le temps de chargement initial.

Pour l’utiliser, commencer par ajouter une image dans le répertoire public. Dans le répertoire pages, ouvrez le fichier index.js qui est la route d’entrée(Page Home) de l’application ensuite supprimer tout le contenu d’index.js et importer le composant image

import Image from next/image
export default function Home(){
return(
    <div>
     <Image src="/photo.jpg" width={400} height={400}/>
    </div>
   )
}

Ensuit lancez le serveur de développement avec

yarn dev

L’image sera directement optimisée. ce composant exige les attributs width et height qui sont exprimés en px. Vous pouvez aussi les remplacer par l’attribut unsized

<Image src="/photo.jpg" unsized/>

Si vos images proviennent des sources externes telles que (cloudinary, aws ou d’autres CDN) dans ce cas il faudra configurer ces domaines

Ajouter un nouveau fichier next.config.js avec le terminal

touch next.config.js

Nous allons configurer le domaine pour cloudinary. ajouter le code ci-dessous dans le fichier next.config.js

module.exports = {
  images: {
    deviceSizes: [320, 420, 768, 1024, 1200],
    domains: ["res.cloudinary.com"],
  },
};

deviceSizes permet de spécifier une liste de breakpoints responsive de la largeur de l’écran et domains permet de spécifier le noms de domaine de chaque CDN.

Exemple avec cloudinary

<Image src="https://res.cloudinary.com/demo/image/upload/lady.jpg"  unsized/>

Le routage internationalisé

Le routage internationalisé vous permet de servir votre application dans plusieurs langues. pour ce faire, ajouter cette configuration dans le fichier next.config.js

module.exports = {
  images: {
   deviceSizes: [320, 420, 768, 1024, 1200],
   domains: ["res.cloudinary.com"],
 },
i18n: {
  locales: ['en', 'fr', 'nl'],
  defaultLocale: 'en',
 },
};

locales permet de spécifier la liste des langues et defaultLocale la langue par défaut.

Ensuite redémarrer votre serveur en faisant

yarn dev

et votre url sera maintenant

http://localhost:3000/fr

Next.js a détecté automatiquement votre langue. vous pouvez utiliser cette fonctionnalité avec d’autres librairies d’internalisation telle que next-i18n

L’attribut as n’est plus nécessaire sur Link

Avant, pour naviguer vers une route dynamique avec Link, il fallait définir l’attribut href et l’attribut as pour spécifier le paramètre de la route.

<Link href="/blog/[slug]" as={`/blog/react`}>
  <a>react</a>
</Link>

Avec la version 10, vous n’avez plus besoin de spécifier as, vous pouvez directement spécifier le paramètre de la route dans l’attribut href. ainsi cela devient

<Link href={`/blog/react`}>
  <a>react</a>
</Link>

React 17

La version 10 de Next.js supporte la version 17 de react, ce qui signifie que vous n’avez plus besoin d’importer React pour utiliser des composants React

Avant la version 17

import React, {useState} from "react";
export const Counter = () => {
const [count, setCount] = useState(1);
return(
    <div>
   <button onClick={()=> setCount(count + 1)}>Incrementer</button>
   <p>{count}</p>
 </div>
)}

Avec la version 17

import {useState} from "react";
export const Counter = () => {
const [count, setCount] = useState(1);
return(
    <div>
   <button onClick={()=> setCount(count + 1)}>Incrementer</button>
   <p>{count}</p>
 </div>
)}

J’ai décris les nouveautés majeures de la version 10 de Next.js, Il y a encore plusieurs autres nouveautés que je n’ai pas cité dans cet article, vous pouvez les retrouver ici.

Si vous voulez tester ces nouvelles fonctionnalités, j’ai crée cette application qui vous permet de créer des articles avec un éditeur et de les publier.