Einrichtung eines neuen Next.js-Projekts

Systemanforderungen

Bevor Sie beginnen, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt:

Node.js 18.18 oder höher.
macOS, Windows (einschließlich WSL) oder Linux.

Der schnellste Weg, eine neue Next.js-App zu erstellen, ist die Verwendung von create-next-app, das alles automatisch für Sie einrichtet. Führen Sie folgenden Befehl aus, um ein Projekt zu erstellen:

Terminal

npx create-next-app@latest

Während der Installation werden Sie folgende Eingabeaufforderungen sehen:

Terminal

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 Ihren Code in einem `src/`-Verzeichnis haben? Nein / Ja
Möchten Sie den App-Router verwenden? (empfohlen) Nein / Ja
Möchten Sie Turbopack für `next dev` verwenden? Nein / Ja
Möchten Sie den Import-Alias anpassen? (Standard: `@/*`) Nein / Ja
Welchen Import-Alias möchten Sie konfigurieren? @/*

Nach den Eingabeaufforderungen erstellt create-next-app einen Ordner mit Ihrem Projektnamen und installiert die erforderlichen Abhängigkeiten.

Manuelle Installation

Um manuell eine neue Next.js-App zu erstellen, installieren Sie die erforderlichen Pakete:

Terminal

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

Fügen Sie dann die folgenden Skripte zu Ihrer package.json-Datei hinzu:

package.json

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

Diese Skripte beziehen sich auf die verschiedenen Phasen der Anwendungsentwicklung:

next dev: Startet den Entwicklungsserver.
next build: Erstellt die Anwendung für die Produktion.
next start: Startet den Produktionsserver.
next lint: Führt ESLint aus.

Erstellen des `app`-Verzeichnisses

Next.js verwendet Dateisystem-Routing, was bedeutet, dass die Routen in Ihrer Anwendung durch die Struktur Ihrer Dateien bestimmt werden.

Erstellen Sie einen app-Ordner. Erstellen Sie dann innerhalb von app eine layout.tsx-Datei. Diese Datei ist das Root-Layout. Es ist erforderlich und muss die <html>- und <body>-Tags enthalten.

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

Erstellen Sie eine Startseite app/page.tsx mit einigen initialen Inhalten:

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

Sowohl layout.tsx als auch page.tsx werden gerendert, wenn der Benutzer die Wurzel Ihrer Anwendung (/) besucht.

Gut zu wissen:

Wenn Sie das Root-Layout vergessen zu erstellen, wird Next.js diese Datei automatisch erstellen, wenn Sie den Entwicklungsserver mit next dev starten.

Sie können optional ein src-Verzeichnis im Stammverzeichnis Ihres Projekts verwenden, um Ihren Anwendungscode von Konfigurationsdateien zu trennen.

Erstellen des `public`-Ordners (optional)

Erstellen Sie einen public-Ordner im Stammverzeichnis Ihres Projekts, um statische Assets wie Bilder, Schriftarten usw. zu speichern. Dateien innerhalb von public können dann von Ihrem Code ausgehend von der Basis-URL (/) referenziert werden.

Sie können dann auf diese Assets über den Root-Pfad (/) zugreifen. Zum Beispiel kann public/profile.png als /profile.png referenziert werden:

import Image from 'next/image'

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

Starten des Entwicklungsservers

Führen Sie npm run dev aus, um den Entwicklungsserver zu starten.
Besuchen Sie http://localhost:3000, um Ihre Anwendung zu sehen.
Bearbeiten Sie die app/page.tsx-Datei und speichern Sie sie, um das aktualisierte Ergebnis in Ihrem Browser zu sehen.

Einrichten von TypeScript

Mindestversion von TypeScript: v4.5.2

Next.js bietet integrierte Unterstützung für TypeScript. Um TypeScript zu Ihrem Projekt hinzuzufügen, benennen Sie eine Datei in .ts / .tsx um und führen Sie next dev aus. Next.js installiert automatisch die erforderlichen Abhängigkeiten und fügt eine tsconfig.json-Datei mit den empfohlenen Konfigurationsoptionen hinzu.

IDE-Plugin

Next.js enthält ein benutzerdefiniertes TypeScript-Plugin und einen Type-Checker, die von VSCode und anderen Code-Editoren für erweiterte Type-Checks und Auto-Vervollständigung verwendet werden können.

Sie können das Plugin in VS Code aktivieren, indem Sie:

Die Befehlspalette öffnen (Strg/⌘ + Umschalt + P)
Nach "TypeScript: Select TypeScript Version" suchen
"Use Workspace Version" auswählen

Weitere Informationen finden Sie auf der TypeScript-Referenzseite.

Einrichten von ESLint

Next.js bietet integrierte Unterstützung für ESLint. Es installiert automatisch die erforderlichen Pakete und konfiguriert die richtigen Einstellungen, wenn Sie ein neues Projekt mit create-next-app erstellen.

Um ESLint manuell zu einem bestehenden Projekt hinzuzufügen, fügen Sie next lint als Skript zu package.json hinzu:

package.json

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

Führen Sie dann npm run lint aus, und Sie werden durch den Installations- und Konfigurationsprozess geführt.

Terminal

npm run lint

Sie sehen eine Eingabeaufforderung wie diese:

? Wie möchten Sie ESLint konfigurieren?

❯ Streng (empfohlen)
Basis
Abbrechen

Streng: Enthält die Basis-ESLint-Konfiguration von Next.js zusammen mit einem strengeren Core Web Vitals-Regelsatz. Dies ist die empfohlene Konfiguration für Entwickler, die ESLint zum ersten Mal einrichten.
Basis: Enthält die Basis-ESLint-Konfiguration von Next.js.
Abbrechen: Konfiguration überspringen. Wählen Sie diese Option, wenn Sie planen, Ihre eigene benutzerdefinierte ESLint-Konfiguration einzurichten.

Wenn Streng oder Basis ausgewählt werden, installiert Next.js automatisch eslint und eslint-config-next als Abhängigkeiten in Ihrer Anwendung und erstellt eine .eslintrc.json-Datei im Stammverzeichnis Ihres Projekts, die Ihre ausgewählte Konfiguration enthält.

Sie können jetzt next lint jedes Mal ausführen, wenn Sie ESLint ausführen möchten, um Fehler zu finden. Sobald ESLint eingerichtet ist, wird es auch automatisch während jedes Builds (next build) ausgeführt. Fehler führen zum Abbruch des Builds, während Warnungen dies nicht tun.

Weitere Informationen finden Sie auf der ESLint-Plugin-Seite.

Einrichten von absoluten Imports und Modulpfad-Aliassen

Next.js bietet integrierte Unterstützung für die "paths"- und "baseUrl"-Optionen von tsconfig.json- und jsconfig.json-Dateien.

Diese Optionen ermöglichen es Ihnen, Projektverzeichnisse auf absolute Pfade zu aliasen, was das Importieren von Modulen einfacher und sauberer macht. Zum Beispiel:

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

// Nachher
import { Button } from '@/components/button'

Um absolute Imports zu konfigurieren, fügen Sie die baseUrl-Konfigurationsoption zu Ihrer tsconfig.json- oder jsconfig.json-Datei hinzu. Zum Beispiel:

tsconfig.json oder jsconfig.json

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

Zusätzlich zur Konfiguration des baseUrl-Pfads können Sie die "paths"-Option verwenden, um Modulpfade zu "aliasen".

Beispielsweise bildet die folgende Konfiguration @/components/* auf components/* ab:

tsconfig.json oder jsconfig.json

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

Jeder der "paths" ist relativ zum baseUrl-Speicherort.

Einrichtung eines neuen Next.js-Projekts

Systemanforderungen

Automatische Installation

Manuelle Installation

Erstellen des `app`-Verzeichnisses

Erstellen des `public`-Ordners (optional)

Starten des Entwicklungsservers

Einrichten von TypeScript

IDE-Plugin

Einrichten von ESLint

Einrichten von absoluten Imports und Modulpfad-Aliassen

On this page