logoNext.js Français
DocumentationBlogApprendre
Introduction/Premiers pas/Installation

Installation

Exigences système :

  • Node.js 18.17 ou version ultérieure.
  • macOS, Windows (y compris WSL) et Linux sont pris en charge.

Installation automatique

Nous recommandons de démarrer une nouvelle application Next.js en utilisant create-next-app, qui configure automatiquement tout pour vous. Pour créer un projet, exécutez :

Terminal
npx create-next-app@latest

Lors de l'installation, vous verrez les invites suivantes :

Terminal
Quel est le nom de votre projet ? my-app
Souhaitez-vous utiliser TypeScript ? Non / Oui
Souhaitez-vous utiliser ESLint ? Non / Oui
Souhaitez-vous utiliser Tailwind CSS ? Non / Oui
Souhaitez-vous utiliser le répertoire `src/` ? Non / Oui
Souhaitez-vous utiliser le routeur App ? (recommandé) Non / Oui
Souhaitez-vous personnaliser l'alias d'import par défaut (@/*) ? Non / Oui
Quel alias d'import souhaitez-vous configurer ? @/*

Après les invites, create-next-app créera un dossier avec le nom de votre projet et installera les dépendances requises.

Si vous débutez avec Next.js, consultez la documentation sur la structure de projet pour un aperçu de tous les fichiers et dossiers possibles dans votre application.

Bon à savoir :

  • Next.js inclut désormais par défaut la configuration pour TypeScript, ESLint et Tailwind CSS.
  • Vous pouvez optionnellement utiliser un répertoire src à la racine de votre projet pour séparer le code de votre application des fichiers de configuration.

Installation manuelle

Pour créer manuellement une nouvelle application Next.js, installez les paquets requis :

Terminal
npm install next@latest react@latest react-dom@latest

Ouvrez votre fichier package.json et ajoutez les scripts suivants :

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Ces scripts correspondent aux différentes étapes de développement d'une application :

  • dev : exécute next dev pour démarrer Next.js en mode développement.
  • build : exécute next build pour construire l'application pour une utilisation en production.
  • start : exécute next start pour démarrer un serveur de production Next.js.
  • lint : exécute next lint pour configurer ESLint intégré à Next.js.

Création des répertoires

Next.js utilise le routage basé sur le système de fichiers, ce qui signifie que les routes de votre application sont déterminées par la structure de vos fichiers.

Le répertoire app

Pour les nouvelles applications, nous recommandons d'utiliser le routeur App. Ce routeur vous permet d'utiliser les dernières fonctionnalités de React et est une évolution du routeur Pages basée sur les retours de la communauté.

Créez un dossier app/, puis ajoutez un fichier layout.tsx et page.tsx. Ces fichiers seront rendus lorsque l'utilisateur visitera la racine de votre application (/).

Structure du dossier App

Créez une disposition racine dans app/layout.tsx avec les balises <html> et <body> requises :

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Enfin, créez une page d'accueil app/page.tsx avec un contenu initial :

export default function Page() {
  return <h1>Bonjour, Next.js !</h1>
}
export default function Page() {
  return <h1>Bonjour, Next.js !</h1>
}

Bon à savoir : Si vous oubliez de créer layout.tsx, Next.js créera automatiquement ce fichier lors de l'exécution du serveur de développement avec next dev.

Apprenez-en plus sur l'utilisation du routeur App.

Le répertoire pages (optionnel)

Si vous préférez utiliser le routeur Pages plutôt que le routeur App, vous pouvez créer un répertoire pages/ à la racine de votre projet.

Ensuite, ajoutez un fichier index.tsx dans votre dossier pages. Ce sera votre page d'accueil (/) :

export default function Page() {
  return <h1>Bonjour, Next.js !</h1>
}

Ajoutez ensuite un fichier _app.tsx dans pages/ pour définir la disposition globale. Apprenez-en plus sur le fichier App personnalisé.

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Enfin, ajoutez un fichier _document.tsx dans pages/ pour contrôler la réponse initiale du serveur. Apprenez-en plus sur le fichier Document personnalisé.

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Apprenez-en plus sur l'utilisation du routeur Pages.

Bon à savoir : Bien que vous puissiez utiliser les deux routeurs dans le même projet, les routes dans app auront la priorité sur pages. Nous recommandons d'utiliser un seul routeur dans votre nouveau projet pour éviter toute confusion.

Le dossier public (optionnel)

Créez un dossier public pour stocker les ressources statiques telles que les images, polices, etc. Les fichiers dans le répertoire public peuvent ensuite être référencés par votre code à partir de l'URL de base (/).

Lancer le serveur de développement

  1. Exécutez npm run dev pour démarrer le serveur de développement.
  2. Visitez http://localhost:3000 pour voir votre application.
  3. Modifiez le fichier app/page.tsx (ou pages/index.tsx) et enregistrez-le pour voir le résultat mis à jour dans votre navigateur.

Premiers pas

Apprenez à créer des applications web full-stack avec Next.js.

Structure de projet

Liste des conventions de dossiers et fichiers dans un projet Next.js