Démarrer une application Next.js avec TypeScript et l’App Router

Le moyen le plus direct de commencer consiste à générer le projet avec create-next-app, puis à modifier la page d’accueil. Vous obtenez ainsi une base TypeScript, un serveur de développement et l’App Router sans assembler manuellement chaque outil.

Prérequis

Installez une version de Node.js compatible avec la version courante de Next.js. La documentation officielle indique Node.js 20.9 au minimum au moment de cette vérification. Vérifiez votre installation :

node --version
npm --version

Vous devez également connaître les bases de HTML, CSS, JavaScript et React. Ce tutoriel utilise npm, mais la documentation propose aussi pnpm, Yarn et Bun.

Créer le projet

Dans un terminal, lancez :

npx create-next-app@latest mon-premier-next
cd mon-premier-next
npm run dev

Choisissez les options recommandées si vous souhaitez une base TypeScript avec App Router et un contrôle de code. Le générateur peut faire évoluer ses choix par défaut : lisez le résumé affiché avant de confirmer.

Ouvrez ensuite http://localhost:3000. La page générée doit apparaître. Le serveur reste actif et recharge l’interface lorsque vous enregistrez un fichier.

Comprendre les fichiers essentiels

Avec l’App Router, les dossiers placés dans app décrivent les segments d’URL. Un fichier page.tsx rend une route publique. Le fichier app/page.tsx correspond donc à la page d’accueil /.

Le fichier app/layout.tsx est le layout racine. Il entoure les pages, reçoit une propriété children et doit contenir les éléments html et body. C’est un emplacement adapté aux métadonnées globales, à la langue du document et aux styles partagés.

Remplacer la page d’accueil

Remplacez le contenu de app/page.tsx par :

export default function HomePage() {
  return (
    <main>
      <h1>Mon premier projet Next.js</h1>
      <p>La page est rendue avec l’App Router.</p>
    </main>
  )
}

Conservez un seul titre principal descriptif. L’élément main donne aussi un repère utile aux technologies d’assistance.

Ajouter une deuxième route

Créez le fichier app/a-propos/page.tsx :

export default function AboutPage() {
  return (
    <main>
      <h1>À propos</h1>
      <p>Cette route est définie par le dossier app/a-propos.</p>
    </main>
  )
}

La page devient accessible à l’adresse http://localhost:3000/a-propos. Dans l’App Router, un dossier seul ne rend pas une route publique : il faut notamment un fichier page.tsx ou un gestionnaire route.ts.

Vérifier avant de continuer

Arrêtez le serveur avec Ctrl+C, puis exécutez les contrôles disponibles dans le projet :

npm run lint
npm run build

Une construction de production réussie détecte des erreurs que le serveur de développement peut ne pas rendre immédiatement visibles. Consultez aussi la sortie du terminal et testez les deux routes au clavier.

Questions fréquentes

Faut-il déjà maîtriser Next.js pour utiliser create-next-app ?

Non. Le générateur prépare l’environnement, mais il reste utile de comprendre React, TypeScript et la structure des routes afin de modifier le projet sans dépendre des valeurs par défaut.

App Router et Pages Router peuvent-ils coexister ?

Next.js prend toujours en charge les deux routeurs. Pour un nouveau parcours d’apprentissage, commencez par l’App Router et n’ajoutez le Pages Router que si une contrainte précise l’exige.

Pourquoi page.tsx ne contient-il pas use client ?

Les pages et layouts sont des Server Components par défaut. Ajoutez une frontière cliente uniquement lorsqu’un composant a besoin d’état, d’événements ou d’API disponibles dans le navigateur.