Pourquoi utiliser Next.js pour son application web ?

Next.js est un framework React très répandu car il peut apporter de nombreux intérêts pour la création d'une nouvelle application web. Avec plus de 122 000 étoiles sur GitHub et plus de 3 300 contributeurs, les mises à jour et nouvelles fonctionnalités sur le framework sont régulières.

Principaux avantages du framework

Next.js est un framework maintenu par Vercel, une plateforme de déploiement cloud. Alors que vous pouvez déployer votre toute nouvelle application sur votre propre serveur, il vous est également possible d'utiliser cette plateforme. Elle vous assure un déploiement rapide, hautement évolutif et disponible sur l'ensemble de leurs CDN.

Fonctionnel sans configuration

Créer une application Next.js et la déployer est devenu très facile grâce à Vercel. Votre application, une fois disponible sur GitHub et connectée à la plateforme cloud est déployée à chaque fois qu'un git push est envoyé. Tout ceci, sans configuration préalable. Le déploiement est exécuté à chaque nouvel envoi d'un commit sur la branche principale de votre repository.

Optimisation du rendu

Vous trouverez dans Next.js la possibilité de moduler le rendu de vos différentes pages et sections de pages selon vos besoins.

Pour chaque composants dans l'application, le rendu peut être défini comme serveur (SSR) ou client (CSR).

Un composant serveur permet d'être pré-rendu côté serveur, ce qui vous permet de faire appel à des API, des bases de données ou tout appel que vous pourriez faire avec une API Node par exemple. En plus, vous pourrez profiter de la puissante gestion du cache proposée. Vous pourrez définir à quel interval de temps votre cache devrait expirer au niveau d'une seule requête (effectuée grâce à fetch par exemple, dont la définition est étendue), d'un ensemble de requêtes ou encore d'un ensemble de pages.

// exemple de composant serveur Next.js
const Page = async () => {
  const response = await fetch("/api/user/1", { next: { revalidate: 3600 }});
  const user = await response.json();
  return (
    <p>Bonjour, {user.name}!</p>
  );
};

Un composant client est généralement utilisé quant à lui plutôt lorsqu'il nécessite de gérer une interaction utilisateur, un état. Il peut s'agir d'un bouton, d'un compteur, d'un formulaire par exemple.

"use client";

// exemple de composant client Next.js
const Button = ({ handleButtonClicked }) => {
  return (
    <button onClick={handleButtonClicked}>Click</button>
  );
};

L'optimisation du rendu et du cache peut aussi être défini au niveau de la page, pour tous les composants contenus.

Optimisation des images

Quand on veut créer une application web performante, la gestion des images peut s'avérer être une vraie plaie. Entre le format des images, les différentes tailles selon les écrans, le poids...

Next.js vous propose d'utiliser un composant Image qui vous simplifie la tâche sur ces détails. Toutes les images fournies sont automatiquement mises en cache et ajustées aux tailles d'écrans nécessaires pour améliorer le poids de celles-ci.

Optimisation du référencement

Là encore pour le référencement, tout est prévu pour vous simplifier la tâche.

Un module Metadata est présent pour vous permettre de définir toutes les métadonnées nécessaires à vos pages, y compris pour les balises openGraph ou twitterCards. Il est possible de générer des images à la volée pour chacune de vos pages, avec la fonctionnalité ImageResponse. A partir d'un code JSX, un fichier SVG est généré et peut être proposé dans les balises openGraph image comme pour cet article par exemple.

Qui dit référencement, dit aussi performance ! Le framework utilise SWC, un compilateur créé sous Rust, qui permet de compiler l'ensemble de votre code moderne en un code servi au navigateur. Plusieurs étapes de minification du code et séparation sous forme de chunks permettent de réduire considérablement la taille du bundle Javascript qui va être fourni au client.

Système de routage complet

Le système de routage de Next.js, sur la version App router (dernière en date), se construit grâce au nommage de dossiers et fichiers présents dans votre projet.

Un ficher page.js dans votre projet permettra de rendre une page publiquement accessible une fois un composant créé à l'intérieur.

Un fichier layout.js permet de définir un layout pour toutes les pages du même niveau et inférieur. On y retrouve régulièrement les sections communes comme la navigation, footer...

Un fichier error.js permet de créer une interface de remplacement pour gérer les erreurs de composants votre application.

La génération d'un sitemap statique ou dynamique est facilitée.

Chaque dossier créé dans le dossier de routage (dossier app) constitue lui, un segment de chemin d'URL. Ce segment là peut être statique (par exemple articles) mais également dynamique (par exemple [id]). Lorsqu'il est dynamique, ici id devient un nom de paramètre de l'URL qui est distribué à vos pages dans le segment. Libre à vous de récupérer ce paramètre et d'appeler votre API, ou même directement votre base de données et récupérer la ressource associée.

app 
  articles
    [id]
      page.jsx
  blog
    page.jsx

Dans cet exemple, les pages /blog et /articles/{id} dans mon application seront traitées par les composants dans les fichiers page.jsx correspondants.

Commencer à installer Next.js avec le CLI et découvrir ses fonctionnalités est un bon point de départ pour apprécier le framework et développer des applications dynamiques et performantes.