create-next-app
La façon la plus simple de commencer avec Next.js est d'utiliser create-next-app. Cet outil en ligne de commande vous permet de démarrer rapidement la construction d'une nouvelle application Next.js, avec tout configuré pour vous.
Vous pouvez créer une nouvelle application en utilisant le modèle par défaut de Next.js, ou en utilisant l'un des exemples officiels de Next.js.
Mode interactif
Vous pouvez créer un nouveau projet de manière interactive en exécutant :
npx create-next-app@latestyarn create next-apppnpm create next-appbunx create-next-appIl vous sera alors demandé les informations suivantes :
Quel est le nom de votre projet ? mon-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 / OuiUne fois que vous avez répondu aux questions, un nouveau projet sera créé avec la configuration appropriée en fonction de vos réponses.
Mode non interactif
Vous pouvez également passer des arguments en ligne de commande pour configurer un nouveau projet de manière non interactive.
De plus, vous pouvez désactiver les options par défaut en les préfixant avec --no- (par exemple --no-eslint).
Voir create-next-app --help :
Utilisation : create-next-app <répertoire-du-projet> [options]
Options :
-V, --version affiche le numéro de version
--ts, --typescript
Initialise le projet en TypeScript. (par défaut)
--js, --javascript
Initialise le projet en JavaScript.
--tailwind
Initialise avec la configuration Tailwind CSS. (par défaut)
--eslint
Initialise avec la configuration ESLint.
--app
Initialise avec le routeur App.
--src-dir
Initialise dans un répertoire `src/`.
--import-alias <alias-à-configurer>
Spécifie l'alias d'import à utiliser (par défaut "@/*").
--use-npm
Demande explicitement au CLI d'initialiser l'application avec npm
--use-pnpm
Demande explicitement au CLI d'initialiser l'application avec pnpm
--use-yarn
Demande explicitement au CLI d'initialiser l'application avec Yarn
--use-bun
Demande explicitement au CLI d'initialiser l'application avec Bun
-e, --example [nom]|[url-github]
Un exemple pour initialiser l'application. Vous pouvez utiliser un nom d'exemple
du dépôt officiel Next.js ou une URL GitHub publique. L'URL peut utiliser
n'importe quelle branche et/ou sous-répertoire
--example-path <chemin-vers-exemple>
Dans de rares cas, votre URL GitHub peut contenir un nom de branche avec
une barre oblique (par exemple bug/correction-1) et le chemin vers l'exemple (par exemple foo/bar).
Dans ce cas, vous devez spécifier le chemin vers l'exemple séparément :
--example-path foo/bar
--reset-preferences
Demande explicitement au CLI de réinitialiser toutes les préférences stockées
-h, --help affiche les informations d'utilisationPourquoi utiliser Create Next App ?
create-next-app vous permet de créer une nouvelle application Next.js en quelques secondes. Il est officiellement maintenu par les créateurs de Next.js et offre plusieurs avantages :
- Expérience interactive : L'exécution de
npx create-next-app@latest(sans arguments) lance une expérience interactive qui vous guide dans la configuration d'un projet. - Zéro dépendance : L'initialisation d'un projet est aussi rapide qu'une seconde. Create Next App n'a aucune dépendance.
- Support hors ligne : Create Next App détectera automatiquement si vous êtes hors ligne et initialisera votre projet en utilisant le cache local des paquets.
- Support des exemples : Create Next App peut initialiser votre application en utilisant un exemple de la collection d'exemples Next.js (par exemple
npx create-next-app --example api-routes) ou n'importe quel dépôt GitHub public. - Testé : Le paquet fait partie du monorepo Next.js et est testé avec la même suite de tests d'intégration que Next.js lui-même, garantissant son bon fonctionnement à chaque version.