Eine neue Next.js-Anwendung erstellen

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 `pages`-Verzeichnisses

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

Erstellen Sie ein pages-Verzeichnis im Stammverzeichnis Ihres Projekts. Fügen Sie dann eine index.tsx-Datei in Ihren pages-Ordner hinzu. Dies wird Ihre Startseite (/) sein:

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

Fügen Sie als Nächstes eine _app.tsx-Datei in pages/ hinzu, um das globale Layout zu definieren. Erfahren Sie mehr über die benutzerdefinierte App-Datei.

import type { AppProps } from 'next/app'

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

Fügen Sie schließlich eine _document.tsx-Datei in pages/ hinzu, um die initiale Antwort vom Server zu steuern. Erfahren Sie mehr über die benutzerdefinierte Document-Datei.

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

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

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 pages/index.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.

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.

Eine neue Next.js-Anwendung erstellen

Systemanforderungen

Automatische Installation

Manuelle Installation

Erstellen des `pages`-Verzeichnisses

Erstellen des `public`-Ordners (optional)

Starten des Entwicklungsservers

Einrichten von TypeScript

Einrichten von ESLint

Einrichten von absoluten Imports und Modulpfad-Aliassen

On this page