create-next-app
Der einfachste Weg, mit Next.js zu beginnen, ist die Verwendung von create-next-app. Dieses CLI-Tool ermöglicht es Ihnen, schnell mit dem Aufbau einer neuen Next.js-Anwendung zu beginnen, wobei alles für Sie vorkonfiguriert ist.
Sie können eine neue App mit der Standard-Next.js-Vorlage erstellen oder eines der offiziellen Next.js-Beispiele verwenden.
Interaktiv
Sie können ein neues Projekt interaktiv erstellen, indem Sie folgende Befehle ausführen:
npx create-next-app@latestyarn create next-apppnpm create next-appbunx create-next-appAnschließend werden Ihnen folgende Eingabeaufforderungen angezeigt:
Wie soll Ihr Projekt heißen? my-app
Möchten Sie TypeScript verwenden? Nein / Ja
Möchten Sie ESLint verwenden? Nein / Ja
Möchten Sie Tailwind CSS verwenden? Nein / Ja
Möchten Sie ein `src/`-Verzeichnis verwenden? Nein / Ja
Möchten Sie den App Router verwenden? (empfohlen) Nein / Ja
Möchten Sie den Standard-Import-Alias (@/*) anpassen? Nein / JaNachdem Sie die Fragen beantwortet haben, wird ein neues Projekt mit der entsprechenden Konfiguration erstellt, basierend auf Ihren Antworten.
Nicht-interaktiv
Sie können auch Befehlszeilenargumente übergeben, um ein neues Projekt nicht-interaktiv einzurichten.
Zudem können Sie Standardoptionen deaktivieren, indem Sie ihnen --no- voranstellen (z.B. --no-eslint).
Siehe create-next-app --help:
Verwendung: create-next-app <Projekt-Verzeichnis> [Optionen]
Optionen:
-V, --version Zeigt die Versionsnummer an
--ts, --typescript
Initialisiert das Projekt als TypeScript-Projekt. (Standard)
--js, --javascript
Initialisiert das Projekt als JavaScript-Projekt.
--tailwind
Initialisiert mit Tailwind CSS-Konfiguration. (Standard)
--eslint
Initialisiert mit ESLint-Konfiguration.
--app
Initialisiert als App-Router-Projekt.
--src-dir
Initialisiert innerhalb eines `src/`-Verzeichnisses.
--import-alias <zu-konfigurierender-Alias>
Gibt den zu verwendenden Import-Alias an (Standard: "@/*").
--use-npm
Weist die CLI explizit an, die App mit npm zu initialisieren
--use-pnpm
Weist die CLI explizit an, die App mit pnpm zu initialisieren
--use-yarn
Weist die CLI explizit an, die App mit Yarn zu initialisieren
--use-bun
Weist die CLI explizit an, die App mit Bun zu initialisieren
-e, --example [Name]|[GitHub-URL]
Ein Beispiel, mit dem die App initialisiert werden soll. Sie können einen Beispielnamen
aus dem offiziellen Next.js-Repository oder eine öffentliche GitHub-URL verwenden. Die URL kann
beliebige Branches und/oder Unterverzeichnisse enthalten
--example-path <Pfad-zum-Beispiel>
In seltenen Fällen könnte Ihre GitHub-URL einen Branch-Namen mit
einem Schrägstrich enthalten (z.B. bug/fix-1) und den Pfad zum Beispiel (z.B. foo/bar).
In diesem Fall müssen Sie den Pfad zum Beispiel separat angeben:
--example-path foo/bar
--reset-preferences
Weist die CLI explizit an, alle gespeicherten Präferenzen zurückzusetzen
-h, --help Zeigt diese Hilfeseite anWarum create-next-app verwenden?
create-next-app ermöglicht es Ihnen, eine neue Next.js-App innerhalb von Sekunden zu erstellen. Es wird offiziell von den Entwicklern von Next.js gewartet und bietet eine Reihe von Vorteilen:
- Interaktive Erfahrung: Die Ausführung von
npx create-next-app@latest(ohne Argumente) startet eine interaktive Oberfläche, die Sie durch die Projekteinrichtung führt. - Keine Abhängigkeiten: Die Initialisierung eines Projekts dauert nur eine Sekunde. Create Next App hat keine Abhängigkeiten.
- Offline-Unterstützung: Create Next App erkennt automatisch, wenn Sie offline sind, und initialisiert Ihr Projekt mit dem lokalen Paket-Cache.
- Unterstützung für Beispiele: Create Next App kann Ihre Anwendung mit einem Beispiel aus der Next.js-Beispielsammlung initialisieren (z.B.
npx create-next-app --example api-routes) oder mit einem beliebigen öffentlichen GitHub-Repository. - Getestet: Das Paket ist Teil des Next.js-Monorepos und wird mit demselben Integrationstest-Suite wie Next.js selbst getestet, wodurch sichergestellt wird, dass es mit jeder Version wie erwartet funktioniert.