Next.js, le framework React par Vercel

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.

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...

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...

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...

1. Installation de SWR

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

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> ...

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, ...