Bien démarrer avec Next.js 15

Next.js 15 apporte de nouvelles fonctionnalités qui simplifient la création d’applications web. Ce guide présente les notions essentielles.

Pourquoi Next.js ?

Next.js offre une expérience de développement complète :

• Composants serveur — rendu côté serveur pour de meilleures performances
• App Router — système de routage fondé sur les composants serveur React
• Optimisations intégrées — traitement automatique des images, polices et scripts

Créer le projet

Créez d’abord un nouveau projet Next.js :

npx create-next-app@latest my-app
cd my-app
npm run dev

Créer votre première page

Avec Next.js 15, les pages sont placées dans le dossier app :

// app/page.tsx
export default function HomePage() {
  return (
    <main>
      <h1>Bienvenue dans mon application !</h1>
    </main>
  );
}

Composants serveur et composants client

Par défaut, tous les composants du dossier app sont rendus côté serveur. Pour utiliser des fonctionnalités côté client, ajoutez la directive "use client" :

"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Total : {count}</button>;
}

Pour aller plus loin

Une fois ces bases acquises, explorez le chargement des données, l’authentification et le déploiement.