Next.js - Next.js (Framework React Fullstack pour la production)

1. Définition détaillée & Contexte d'émergence

Next.js est devenu le standard de l'industrie pour créer des applications React modernes en production. Introduisant l'App Router basé sur l'architecture des React Server Components (RSC), Next.js permet d'exécuter des composants exclusivement sur le serveur pour réduire drastiquement la taille du bundle JavaScript envoyé au navigateur, tout en offrant un système de routage par fichiers (file-system routing), des optimisations automatiques d'images et de polices, ainsi que le compilateur Turbopack.

2. Architectures Clés de Next.js (App Router)

L'App Router repose sur une séparation stricte entre composants serveurs et clients pour maximiser le rendu et la sécurité.

3. Caractéristiques fondamentales

• App Router basé sur la structure des dossiers et conventions (`page.tsx`, `layout.tsx`, `loading.tsx`, `not-found.tsx`).
• Optimisation automatique des assets : composants `<Image>`, polices Google intégrées avec `next/font`, et scripts tiers.
• Turbopack : moteur de build ultra-rapide écrit en Rust remplaçant Webpack.
• Support natif de TypeScript, ESLint et Tailwind CSS dès l’initialisation.
• API Routes & Route Handlers pour exposer des endpoints REST ou Webhooks standardisés.

// Ce composant s'exécute exclusivement sur le serveur
import { db } from "@/lib/db";
import Link from "next/link";

export default async function ArticlesPage() {
  // Requête directe en base de données sans passer par fetch() ni exposer d'API publique
  const articles = await db.article.findMany({
    where: { published: true },
    orderBy: { createdAt: "desc" },
  });

  return (
    <main className="max-w-4xl mx-auto py-12 px-4">
      <h1 className="text-3xl font-bold mb-6">Derniers Articles Tech</h1>
      <ul className="space-y-4">
        {articles.map((item) => (
          <li key={item.id} className="p-4 border rounded-xl">
            <Link href={`/article/${item.slug}`} className="hover:underline">
              <h2 className="text-xl font-semibold">{item.title}</h2>
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

5. Avantages et limites techniques

6. Recommandations : Quand l'utiliser ?

8. Sources officielles vérifiées

Données techniques vérifiées auprès des documentations officielles, des RFCs et des spécifications standards.