React Next.js 2026 : Formation Complète Débutant

App Router et React Server Components (RSC)

Depuis l'adoption de l'App Router, la pratique recommandée pour les nouveaux projets Next.js consiste à utiliser le répertoire /app et les React Server Components (RSC) par défaut. Les Server Components exécutent le rendu côté serveur, réduisent le JavaScript envoyé au client et simplifient la logique de données sans les APIs dédiées comme getServerSideProps, qui restent disponibles pour le pages router legacy.

Principes clés :

• Par défaut, les fichiers dans /app sont des Server Components (rendu côté serveur).
• Les composants interactifs doivent explicitement indiquer 'use client' pour s'exécuter côté client.
• Pour les données en lecture seule, utilisez fetch avec le caching souhaité (ex : {'cache: "force-cache"'} ou {'next: { revalidate: 60 }'} selon le besoin).

Exemple : Server Component (app/page.tsx)

import React from 'react'

export default async function Page() {
  // Exemple de requête côté serveur (React Server Component)
  const res = await fetch('https://api.example.com/items', { cache: 'force-cache' })
  const data = await res.json()

  return (
    <main>
      
      <ul>
        {data.items.map((item: { id: string; name: string }) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </main>
  )
}

Exemple : Client Component (components/Counter.tsx)

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(c => c + 1)}>
      Cliquez {count} fois
    </button>
  )
}

Astuce : pour charger dynamiquement un composant client sans l'inclure dans le bundle initial, utilisez next/dynamic (import dynamique). Cela réduit la taille du JS transmis au navigateur.

Metadata & SEO dynamique

Avec l'App Router, Next.js expose un objet Metadata (TypeScript) et différentes options d'export pour définir le titre, les meta tags Open Graph, les canonical, etc. Gérer le SEO via l'API metadata dans app permet de déclarer du SEO statique ou dynamique (par page).

Exemple simple (app/page.tsx) :

import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Accueil - Mon site Next.js',
  description: 'Tutoriel Next.js : App Router, RSC et SEO dynamique.',
  openGraph: {
    title: 'Accueil - Mon site Next.js',
    description: 'Tutoriel Next.js',
    url: 'https://example.com',
  },
}

export default function Page() {
  return (<main>Contenu de la page</main>)
}

Pour des meta dynamiques dépendant des données (par ex. pages produit), utilisez generateMetadata (export async) pour construire dynamiquement l'objet Metadata côté serveur :

import type { Metadata } from 'next'

export async function generateMetadata({ params }): Promise<Metadata> {
  const res = await fetch(`https://api.example.com/products/${params.id}`)
  const product = await res.json()

  return {
    title: product.title,
    description: product.shortDescription,
    openGraph: {
      title: product.title,
      description: product.shortDescription,
      url: `https://example.com/products/${params.id}` ,
    },
  }
}

export default async function ProductPage({ params }) {
  // Server Component: charger les données, afficher la page
}

Bonnes pratiques SEO liées au Metadata :

• Définir des title et description uniques par page.
• Générer des balises Open Graph et Twitter Card pour les partages sociaux.
• Utiliser canonical si plusieurs routes montrent le même contenu.
• Ne jamais exposer de secrets ou d'identifiants dans les meta (tout se fait côté serveur).

Installation et configuration de l'environnement

Pré-requis

Installez Node.js (recommandé : Node.js >= 18). Installer TypeScript (5.x) est conseillé pour les projets modernes. Tailwind CSS 3.x est souvent utilisé pour le style rapide.

Créer un projet Next.js moderne avec TypeScript et Tailwind (exemple) :

npx create-next-app my-next-app --typescript --tailwind

Installer manuellement si nécessaire :

npm install next react react-dom

Conseils de configuration :

• Configurer tsconfig.json pour les projets TypeScript.
• Activer des règles ESLint et Prettier pour une base de code cohérente.
• Gérer les variables sensibles via les variables d'environnement (ex : process.env.MY_SECRET) et ne jamais les embarquer côté client.

Optimisation des polices avec next/font

L'optimisation des polices impacte fortement les Core Web Vitals (Largest Contentful Paint, CLS). Next.js fournit next/font pour charger et optimiser les polices (Google Fonts ou locales) sans blocage de rendu et avec fallback automatique. Utiliser next/font réduit le layout shift et peut améliorer le LCP.

Exemple d'utilisation (app/layout.tsx) avec next/font/google :

import './globals.css'
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '700'],
  display: 'swap',
  variable: '--font-roboto',
})

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang='fr' className={roboto.variable}>
      <body>{children}</body>
    </html>
  )
}

Bonnes pratiques :

• Préférer display: 'swap' pour éviter le FOIT (flash of invisible text).
• Héberger localement les polices critiques si la conformité GDPR / confidentialité l'exige.
• Déclarer une variable CSS (ex : --font-roboto) pour utiliser la police dans tout le site sans recalculs coûteux.

Comprendre les Concepts Fondamentaux de React

Composants et props

React reste la bibliothèque UI pour construire des composants réutilisables. En 2026, retenez :

• Composants fonctionnels avec hooks (ex : useState, useEffect).
• Server Components vs Client Components (décidez où exécuter la logique).
• Props pour transmettre des données, contextes pour l'état global, et patterns comme SWR/React Query pour le cache côté client.

Next.js : Avantages et fonctionnalités clés

Next.js facilite la création d'applications performantes grâce à :

• L'App Router et les Server Components pour réduire le JS côté client.
• Pré-rendu statique (SSG) et options de revalidation pour pages à fréquence de mise à jour variable.
• Intégrations courantes : Vercel pour le déploiement, adapter vers d'autres plateformes via les adaptateurs serverless.

Remarque : le router classique (/pages et getServerSideProps) est encore supporté mais considéré legacy pour les nouveaux projets. Préférez l'App Router pour ses avantages en architecture et performances.

Création d'une application Next.js

Étapes pour démarrer

Après avoir initialisé le projet, la structure recommandée moderne se base sur /app, /components et /styles. Chaque fichier dans /app constitue une route et peut être un Server Component.

Commandes utiles :

Exemple d'intégration d'une API : faites vos requêtes depuis un Server Component pour bénéficier du rendu côté serveur et du caching approprié. Pour des interactions riches (formulaires, état local), déplacez la partie interactive dans un composant client.

Flux de rendu — comparaison SSR vs Server Components

Le diagramme ci-dessous illustre la différence de flux entre un SSR classique (rendu de la page entière côté serveur à chaque requête) et une architecture basée sur Server Components (rendu côté serveur des morceaux non interactifs, envoi minimal de JS côté client pour l'interaction).

Ressources et étapes suivantes pour les débutants

Ressources recommandées (domains racine) :

Participez aux communautés sur les plateformes (Discord, Reddit, Meetup) et clonez des projets open-source pour apprendre par l'exemple. Exemple de clonage du dépôt Next.js :

git clone https://github.com/vercel/next.js.git