Next.js

Un framework React complet pour créer des applications web performantes, optimisées pour le SEO et prêtes pour la production.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que Next.js ?

Next.js est un cadre de développement (framework) qui transforme la façon dont les sites et applications web sont créés avec React. Si React est le moteur, Next.js est le véhicule complet avec toutes les fonctionnalités nécessaires pour rouler efficacement.

Imaginons que vous souhaitiez créer un site web moderne pour votre entreprise, avec un blog, un catalogue de produits et un espace client. Next.js vous fournit tous les outils nécessaires pour construire ce site rapidement, avec d'excellentes performances et visibilité sur les moteurs de recherche.

Pourquoi Next.js est-il si important ?

Visibilité sur Google

Next.js permet à votre site d'être parfaitement optimisé pour les moteurs de recherche, contrairement à de nombreuses applications React classiques.

Rapidité exceptionnelle

Les sites Next.js se chargent instantanément grâce à des techniques avancées de pré-rendu et de mise en cache intelligente.

Pour les propriétaires d'entreprises et les gestionnaires de produits, Next.js signifie un site web qui convertit mieux grâce à sa rapidité, attire plus de visiteurs via Google, et coûte moins cher à maintenir sur le long terme.

En résumé, Next.js est devenu la référence pour développer des sites web React professionnels, combinant le meilleur des deux mondes : l'interactivité moderne des applications web et la performance des sites traditionnels.

Pour les développeurs

Architecture technique

Next.js étend React avec des fonctionnalités puissantes comme le rendu côté serveur (SSR), la génération de sites statiques (SSG), et le routage basé sur le système de fichiers, le tout avec une configuration minimale.

Les concepts fondamentaux

Routage basé sur les fichiers

Next.js utilise la structure de dossiers et de fichiers pour définir les routes de l'application. Chaque fichier dans le dossier pages/ (Pages Router) ou app/ (App Router) devient automatiquement une route accessible.

Méthodes de rendu

Next.js offre plusieurs méthodes de rendu qui peuvent être combinées dans une même application:

SSR (Server-Side Rendering): génère le HTML de chaque page à chaque requête
SSG (Static Site Generation): pré-génère les pages HTML au moment du build
ISR (Incremental Static Regeneration): combine SSG avec regénération en arrière-plan
CSR (Client-Side Rendering): rendu traditionnel côté client avec React

Pages Router vs App Router

Next.js propose deux systèmes de routage: le Pages Router (traditionnel) et le nouveau App Router (introduit dans Next.js 13). Le App Router apporte les Server Components et une approche plus avancée de la gestion des layouts imbriqués.

API Routes

Next.js permet de créer facilement des API endpoints dans votre application, ce qui vous permet de créer une API REST complète aux côtés de votre frontend.

Exemples de code

Pages Router: Page de blog dynamique avec ISR

pages/blog/[slug].js

// pages/blog/[slug].js
import { useRouter } from 'next/router'
import { getBlogPost } from '../lib/api'

// Cette fonction s'exécute au moment de la construction (build)
export async function getStaticProps({ params }) {
  const post = await getBlogPost(params.slug)
  return {
    props: { post },
    // Revalidation toutes les 10 minutes (ISR)
    revalidate: 600
  }
}

// Génère les chemins connus au moment du build
export async function getStaticPaths() {
  const posts = await getBlogPosts()
  const paths = posts.map((post) => ({
    params: { slug: post.slug }
  }))
  
  return { 
    paths, 
    // Génère la page à la demande si non trouvée
    fallback: 'blocking' 
  }
}

// Le composant de la page
export default function BlogPost({ post }) {
  const router = useRouter()
  
  // Gérer l'état de chargement
  if (router.isFallback) {
    return <div>Chargement...</div>
  }
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

App Router: Page de blog avec Server Components

app/blog/[slug]/page.tsx

// app/blog/[slug]/page.tsx
import { getBlogPost, getBlogPosts } from '@/lib/api'
import { notFound } from 'next/navigation'

// Cette fonction génère les chemins connus au moment du build
export async function generateStaticParams() {
  const posts = await getBlogPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

// Métadonnées dynamiques pour la page
export async function generateMetadata({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug)
  
  if (!post) {
    return {}
  }
  
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.featuredImage]
    }
  }
}

// Composant de la page avec Server Components
export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getBlogPost(params.slug)
  
  // Gestion des pages non trouvées
  if (!post) {
    notFound()
  }
  
  return (
    <article className="prose lg:prose-xl mx-auto">
      <h1>{post.title}</h1>
      <time dateTime={post.date}>{new Date(post.date).toLocaleDateString()}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  )
}

API Route: Endpoint d'abonnement à une newsletter

pages/api/newsletter.js

// pages/api/newsletter.js
import { addSubscriber } from '../../lib/mailchimp'

export default async function handler(req, res) {
  // Vérifie que la méthode est POST
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Méthode non autorisée' })
  }
  
  try {
    // Récupère l'email du corps de la requête
    const { email } = req.body
    
    if (!email || !email.includes('@')) {
      return res.status(400).json({ error: 'Email invalide' })
    }
    
    // Ajoute l'abonné à la liste
    await addSubscriber(email)
    
    // Retourne une réponse réussie
    return res.status(200).json({ success: true })
  } catch (error) {
    console.error('Erreur d'abonnement:', error)
    return res.status(500).json({ error: 'Erreur serveur' })
  }
}

Avantages techniques

Performance optimisée grâce au code splitting automatique et aux optimisations d'images
SEO amélioré via le rendu côté serveur et les métadonnées flexibles
Déploiement simplifié avec Vercel et d'autres plateformes cloud
Écosystème riche de plugins et d'intégrations avec d'autres outils
Typesafe avec support complet de TypeScript

Applications concrètes

Cas d'usage

Sites de contenu

Blogs, magazines en ligne et sites d'actualités qui bénéficient du rendu côté serveur pour un excellent SEO tout en offrant une expérience utilisateur fluide.

E-commerce

Boutiques en ligne performantes avec pages produits générées statiquement pour un chargement rapide et une bonne indexation, combinées à des fonctionnalités dynamiques comme le panier.

Tableaux de bord

Applications d'administration avec authentification côté serveur, rendus hybrides et API routes pour une architecture complète et sécurisée.

Sites corporate

Sites d'entreprise avec génération statique pour des performances maximales, tout en permettant des sections dynamiques pour les actualités ou événements.