Comment configurer un nouveau projet Next.js

Configuration système requise

Avant de commencer, assurez-vous que votre système répond aux exigences suivantes :

Node.js 18.18 ou version ultérieure.
macOS, Windows (y compris WSL), ou Linux.

Installation automatique

Le moyen le plus rapide de créer une nouvelle application Next.js est d'utiliser create-next-app, qui configure tout automatiquement 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 placer votre code dans un répertoire `src/` ? Non / Oui
Souhaitez-vous utiliser le routeur App ? (recommandé) Non / Oui
Souhaitez-vous utiliser Turbopack pour `next dev` ? Non / Oui
Souhaitez-vous personnaliser l'alias d'importation (`@/*` par défaut) ? Non / Oui
Quel alias d'importation 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 nécessaires.

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

Ensuite, ajoutez les scripts suivants à votre fichier package.json :

package.json

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

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

next dev : Démarre le serveur de développement.
next build : Construit l'application pour la production.
next start : Démarre le serveur de production.
next lint : Exécute ESLint.

Créer le répertoire `app`

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

Créez un dossier app. Ensuite, à l'intérieur de app, créez un fichier layout.tsx. Ce fichier est le layout racine. Il est obligatoire et doit contenir les balises <html> et <body>.

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

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

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

Les fichiers layout.tsx et page.tsx seront rendus lorsque l'utilisateur visitera la racine de votre application (/).

Bon à savoir :

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

Vous pouvez optionnellement utiliser un dossier src à la racine de votre projet pour séparer le code de votre application des fichiers de configuration.

Créer le dossier `public` (optionnel)

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

Vous pouvez ensuite référencer ces ressources en utilisant le chemin racine (/). Par exemple, public/profile.png peut être référencé comme /profile.png :

import Image from 'next/image'

export default function Page() {
  return <Image src="/profile.png" alt="Profil" width={100} height={100} />
}

Exécuter le serveur de développement

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

Configurer TypeScript

Version minimale de TypeScript : v4.5.2

Next.js inclut un support intégré de TypeScript. Pour ajouter TypeScript à votre projet, renommez un fichier en .ts / .tsx et exécutez next dev. Next.js installera automatiquement les dépendances nécessaires et ajoutera un fichier tsconfig.json avec les options de configuration recommandées.

Plugin IDE

Next.js inclut un plugin TypeScript personnalisé et un vérificateur de types, que VSCode et d'autres éditeurs de code peuvent utiliser pour une vérification de types avancée et une auto-complétion.

Vous pouvez activer le plugin dans VS Code en :

Ouvrant la palette de commandes (Ctrl/⌘ + Shift + P)
Recherchant "TypeScript : Sélectionner la version de TypeScript"
Sélectionnant "Utiliser la version de l'espace de travail"

Consultez la page Référence TypeScript pour plus d'informations.

Configurer ESLint

Next.js inclut ESLint intégré. Il installe automatiquement les paquets nécessaires et configure les paramètres appropriés lorsque vous créez un nouveau projet avec create-next-app.

Pour ajouter manuellement ESLint à un projet existant, ajoutez next lint comme script à package.json :

package.json

{
  "scripts": {
    "lint": "next lint"
  }
}

Ensuite, exécutez npm run lint et vous serez guidé à travers le processus d'installation et de configuration.

Terminal

npm run lint

Vous verrez une invite comme celle-ci :

? Comment souhaitez-vous configurer ESLint ?

❯ Strict (recommandé)
Base
Annuler

Strict : Inclut la configuration de base ESLint de Next.js ainsi qu'un ensemble de règles plus strictes pour les Core Web Vitals. C'est la configuration recommandée pour les développeurs configurant ESLint pour la première fois.
Base : Inclut la configuration de base ESLint de Next.js.
Annuler : Ignorer la configuration. Choisissez cette option si vous prévoyez de configurer votre propre configuration ESLint personnalisée.

Si Strict ou Base sont sélectionnés, Next.js installera automatiquement eslint et eslint-config-next comme dépendances dans votre application et créera un fichier .eslintrc.json à la racine de votre projet qui inclut votre configuration sélectionnée.

Vous pouvez maintenant exécuter next lint chaque fois que vous souhaitez exécuter ESLint pour détecter les erreurs. Une fois ESLint configuré, il s'exécutera également automatiquement lors de chaque construction (next build). Les erreurs feront échouer la construction, tandis que les avertissements ne le feront pas.

Consultez la page Plugin ESLint pour plus d'informations.

Configurer les imports absolus et les alias de module

Next.js prend en charge nativement les options "paths" et "baseUrl" des fichiers tsconfig.json et jsconfig.json.

Ces options vous permettent d'aliasser les répertoires du projet vers des chemins absolus, rendant l'importation de modules plus facile et plus propre. Par exemple :

// Avant
import { Button } from '../../../components/button'

// Après
import { Button } from '@/components/button'

Pour configurer les imports absolus, ajoutez l'option baseUrl à votre fichier tsconfig.json ou jsconfig.json. Par exemple :

tsconfig.json ou jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

En plus de configurer le chemin baseUrl, vous pouvez utiliser l'option "paths" pour "aliasser" les chemins de module.

Par exemple, la configuration suivante mappe @/components/* vers components/* :

tsconfig.json ou jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

Chacun des "paths" est relatif à l'emplacement baseUrl.

Comment configurer un nouveau projet Next.js

On this page