L’App Router utilise le système de fichiers pour créer pages, layouts et routes serveur. Les composants sont serveur par défaut ; ajoutez du JavaScript client uniquement lorsqu’une interaction l’exige.
Créer le projet
Next.js demande actuellement Node.js 20.9 au minimum.
~~~bash npx create-next-app@latest mon-app --yes cd mon-app npm run dev ~~~
Les valeurs par défaut activent TypeScript, ESLint, Tailwind, App Router et l’alias @/*. Ouvrez http://localhost:3000.
Créer une page
~~~tsx // app/about/page.tsx export const metadata = { title: 'À propos', description: 'Présentation du projet', };
export default function AboutPage() { return ( <main> <h1>À propos</h1> <p>Cette page est rendue par un composant serveur.</p> </main> ); } ~~~
Le chemin du dossier devient /about. Un layout enveloppe plusieurs pages et conserve son état lors de la navigation.
Charger des données côté serveur
~~~tsx type Article = { id: string; title: string };
export default async function ArticlesPage() { const response = await fetch('https://example.test/api/articles', { next: { revalidate: 300 }, }); if (!response.ok) throw new Error('Chargement impossible'); const articles: Article[] = await response.json(); return <ul>{articles.map(a => <li key={a.id}>{a.title}</li>)}</ul>; } ~~~
Les secrets utilisés ici restent côté serveur. N’ajoutez use client que pour état, événements ou API du navigateur ; placez cette frontière le plus bas possible.
Ajouter états de chargement et d’erreur
Utilisez loading.tsx et error.tsx dans le segment concerné. Le fichier error.tsx est un composant client et doit proposer une action de nouvelle tentative compréhensible.
Valider
~~~bash npm run lint npm run build npm run start ~~~
Testez navigation clavier, métadonnées, images, routes dynamiques et comportement sans JavaScript lorsque pertinent.
FAQ
Faut-il mettre use client dans toutes les pages ?
Non. Gardez les pages serveur et extrayez seulement les composants interactifs.
Où placer une route JSON ?
Dans un fichier app/api/nom/route.ts exportant les méthodes HTTP.