Blog ENI : Toute la veille numérique !
-25€ dès 75€ sur les livres en ligne, vidéos... avec le code FUSEE25. J'en profite !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. React
  3. Next.js, le framework React par Vercel
Extrait - React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition)
Extraits du livre
React Développez le Front End de vos applications web et mobiles avec JavaScript (nouvelle édition) Revenir à la page d'achat du livre

Next.js, le framework React par Vercel

Introduction

Next.js est un framework de développement web pour React, créé par l’entreprise Vercel. Il a gagné en popularité et est devenu un choix privilégié pour la création d’applications web modernes et optimisées. Il est même mentionné dans la documentation officielle de React.

1. Pourquoi Next.js ?

Ce framework a été conçu pour résoudre certains des défis courants liés au développement d’applications web avec React. Nous allons aborder ici quelques raisons pour lesquelles Next.js est devenu si populaire.

a. Rendu côté serveur (SSR) et génération de site statique (SSG)

Next.js prend en charge le rendu côté serveur (Server-Side Rendering ou SSR) ainsi que la génération de site statique (Static Site Generation ou SSG). Cela signifie que vos pages peuvent être générées côté serveur avant d’être envoyées au navigateur. Les pages s’affichent plus rapidement et sont également mieux optimisées pour les moteurs de recherche.

Pour bien comprendre le SSR, il est essentiel de le considérer en parallèle du Client-Side Rendering (CSR) classique, utilisé avec React dans tous nos exemples précédents.

Dans le CSR, lorsque vous demandez une page web, le serveur envoie...

Création d’un site avec Next.js

La création d’un site avec Next.js est simple et rapide grâce à sa structure de projet bien organisée et à ses fonctionnalités intégrées.

1. Création d’un projet Next.js

Pour créer un projet Next.js, ouvrez votre terminal et exécutez la commande suivante :

npx create-next-app@latest 

L’outil de création propose ensuite une série de questions :

What is your project named? my-app 
Would you like to use TypeScript? No / Yes 
Would you like to use ESLint? No / Yes 
Would you like to use Tailwind CSS? No / Yes 
Would you like to use `src/` directory? No / Yes 
Would you like to use App Router? (recommended) No / Yes 
Would you like to customize the default import alias? No / Yes 
What import alias would you like configured? @/* 

Nous avons déjà abordé ESLint ainsi que Tailwind, nous pouvons donc répondre favorablement à la proposition de l’outil sur ces deux points. Next.js recommande désormais d’utiliser l’App Router, refusez pour l’instant cette proposition.

Vous pouvez ensuite lancer la commande ci-dessous pour démarrer le projet. Il sera alors accessible via l’adresse http://localhost:3000.

npm run dev 

La page de démarrage de Next.js doit s’afficher si tout se passe bien.

La structure de votre...

Naviguer entre les pages

La navigation entre les pages est une partie essentielle du développement web. Dans Next.js, la navigation est simple et intuitive grâce à la prise en charge intégrée du routage.

1. Utilisation du composant Link

Next.js fournit le composant Link qui permet de créer des liens entre les pages de manière optimisée pour le pré-rendu côté serveur.

Voici comment accéder à la page About avec un lien depuis la page d’accueil :

import Link from 'next/link'; 
 
const Home = () => { 
  return ( 
    <div> 
      <h1>Accueil</h1> 
      <Link href="/about"> 
        <a>À propos de nous</a> 
      </Link> 
    </div> 
  ); 
}; 
 
export default Home; 

Lorsque vous cliquez sur le lien, Next.js chargera la partie de notre page web correspondant au composant about.js sans actualiser la page complète.

2. Route dynamique

Next.js prend en charge le routage dynamique, ce qui signifie que vous pouvez créer des routes avec des paramètres variables.

Par exemple, si vous avez une page pour afficher les détails...

Gestion des assets

1. Dossiers publics

Next.js propose un dossier spécial appelé public où vous pouvez placer des assets statiques tels que les images, les fichiers CSS et les fichiers JavaScript. Ces fichiers peuvent également être mis en cache en passant par un CDN afin d’optimiser l’accessibilité à ces ressources. C’est aussi l’endroit idéal pour déposer vos fichiers de type robots.txt ou encore le favicon de votre site.

Placez vos assets dans le dossier public comme suit :

my-next-site/ 
└── public/ 
    ├── images/ 
    │   ├── logo.png 

Pour référencer ces assets dans vos composants, utilisez le préfixe / suivi du chemin relatif à partir du dossier public.

Par exemple :

// Dans un composant 
import React from 'react'; 
 
const MyComponent = () => { 
  return ( 
    <div> 
      <img src="/images/logo.png" alt="Logo" /> 
    </div> 
  ); 
}; 
 
export default MyComponent; 

2. Chargement des images

Contrairement à la balise <img> standard que vous connaissez peut-être déjà, le composant...

Utiliser SWR, l’équivalent de React Query

SWR (Stale-While-Revalidate) est une bibliothèque qui permet de gérer de manière efficace les données dans les applications React en utilisant la stratégie de cache Stale-While-Revalidate.

1. Installation de SWR

Pour commencer à utiliser SWR dans votre projet Next.js, vous devez installer la bibliothèque associée.

 Utilisez la commande suivante :

npm i swr 

2. Utilisation de SWR

Le fonctionnement de SWR se fonde sur les hooks de React, ce qui rend son utilisation intuitive et familière.

Voici comment vous pouvez utiliser SWR pour gérer les données dans vos composants Next.js :

import useSWR from 'swr'; 
 
const MyComponent = () => { 
  // Utilisation de SWR pour récupérer les données 
  const { data, error, isLoading } = useSWR('/api/data', fetch); 
 
  if (error) return <p>Erreur lors du chargement des données.</p>; 
  if (isLoading) return <p>Chargement en cours...</p>; 
 
  return ( 
    <div> 
      <h1>Données de l'API</h1> 
      <pre>{JSON.stringify(data, null, 2)}</pre>: 
    </div> ...

Rendu côté serveur et génération de site statique

1. Rendu côté serveur (SSR)

Le rendu côté serveur permet de générer le contenu de la page sur le serveur avant de l’envoyer au navigateur. Cela améliore le référencement, l’accessibilité et la performance de l’application.

Pour activer le rendu côté serveur, vous pouvez utiliser la fonction asynchrone getServerSideProps dans vos pages. Cette méthode retourne les données nécessaires pour générer la page sur le serveur.

// pages/article/[id].js 
import { useRouter } from 'next/router'; 
 
const ArticleDetail = ({ article }) => { 
  return ( 
    <div> 
      <h1>{article.title}</h1> 
      <p>{article.content}</p> 
    </div> 
  ); 
}; 
 
export async function getServerSideProps(context) { 
  const { id } = context.query; 
  const res = await fetch(`https://api.example.com/article/${id}`); 
  const article = await res.json(); 
 
  return { 
    props: { 
      article, ...

Présentation des React Server Components (RSC)

Les composants serveur React, ou RSC (React Server Components), représentent une évolution significative dans la manière dont nous créons des applications React, apportant une série d’avantages potentiels ainsi que des défis.

Le but est de réduire la quantité d’informations qui transite par le réseau, en réduisant tout simplement la taille de la réponse du serveur. Ce dernier n’envoie que le strict minimum.

Les RSC ne sont pas encore considérés comme une API React stable et donc utilisable en production. L’avenir nous dira s’ils le deviendront un jour. Cependant, Next.js propose de les utiliser dans sa dernière version stable à ce jour : la 13.5.

Prenons un exemple simple de composant côté serveur pour illustrer le propos :

// app.js 
import { format } from 'date-fns' 
 
export const App = ({user}) => { 
    const birthday = format(user.birthday) 
 
  return ( 
          <div> 
                 <p>{user.name}</p> 
                 <p>{`Date...