Menu

Installation

Systemanforderungen:

  • Node.js 18.18 oder höher.
  • macOS, Windows (einschließlich WSL) und Linux werden unterstützt.

Automatische Installation

Wir empfehlen, eine neue Next.js-App mit create-next-app zu starten, die alles automatisch für Sie einrichtet. Um ein Projekt zu erstellen, führen Sie aus:

Terminal
npx create-next-app@latest

Bei der Installation sehen Sie folgende Eingabeaufforderungen:

Terminal
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Nach den Eingabeaufforderungen wird create-next-app einen Ordner mit Ihrem Projektnamen erstellen und die erforderlichen Abhängigkeiten installieren.

Wenn Sie neu bei Next.js sind, lesen Sie die Dokumentation zur Projektstruktur, um einen Überblick über alle möglichen Dateien und Ordner in Ihrer Anwendung zu erhalten.

Hinweis:

  • Next.js wird jetzt mit TypeScript, ESLint und Tailwind CSS Konfiguration standardmäßig ausgeliefert.
  • Optional können Sie ein src-Verzeichnis im Stammverzeichnis Ihres Projekts verwenden, um den Code Ihrer Anwendung von Konfigurationsdateien zu trennen.

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

Öffnen Sie Ihre package.json-Datei und fügen Sie die folgenden scripts hinzu:

package.json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Diese Skripte beziehen sich auf verschiedene Phasen der Anwendungsentwicklung:

  • dev: führt next dev aus, um Next.js im Entwicklungsmodus zu starten.
  • build: führt next build aus, um die Anwendung für die Produktionsnutzung zu bauen.
  • start: führt next start aus, um einen Next.js-Produktionsserver zu starten.
  • lint: führt next lint aus, um die integrierte Next.js ESLint-Konfiguration einzurichten.

Verzeichnisse erstellen

Next.js verwendet File-System-Routing, was bedeutet, dass die Routen in Ihrer Anwendung durch die Strukturierung Ihrer Dateien bestimmt werden.

Das app-Verzeichnis

Für neue Anwendungen empfehlen wir die Verwendung des App Routers. Dieser Router ermöglicht die Verwendung der neuesten React-Funktionen und ist eine Weiterentwicklung des Pages Routers basierend auf Feedback der Community.

Erstellen Sie einen app/-Ordner und fügen Sie dann eine layout.tsx- und page.tsx-Datei hinzu. Diese werden gerendert, wenn der Benutzer die Wurzel Ihrer Anwendung (/) besucht.

App-Ordnerstruktur

Erstellen Sie ein Root-Layout in app/layout.tsx mit den erforderlichen <html>- und <body>-Tags:

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

Erstellen Sie abschließend eine Startseite app/page.tsx mit etwas Inhalt:

app/page.tsx
TypeScript
export default function Page() {
  return <h1>Hallo, Next.js!</h1>
}

Hinweis: Wenn Sie layout.tsx vergessen, wird Next.js diese Datei automatisch erstellen, wenn Sie den Entwicklungsserver mit next dev starten.

Erfahren Sie mehr über die Verwendung des App Routers.

Das pages-Verzeichnis (optional)

Wenn Sie den Pages Router anstelle des App Routers bevorzugen, können Sie ein pages/-Verzeichnis im Stammverzeichnis Ihres Projekts erstellen.

Fügen Sie dann eine index.tsx-Datei in Ihrem pages-Ordner hinzu. Dies wird Ihre Startseite (/) sein:

pages/index.tsx
TypeScript
export default function Page() {
  return <h1>Hallo, 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.

pages/_app.tsx
TypeScript
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Fügen Sie abschließend eine _document.tsx-Datei in pages/ hinzu, um die erste Antwort vom Server zu steuern. Erfahren Sie mehr über die benutzerdefinierte Dokument-Datei.

pages/_document.tsx
TypeScript
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Erfahren Sie mehr über die Verwendung des Pages Routers.

Hinweis: Obwohl Sie beide Router im gleichen Projekt verwenden können, haben Routen in app Vorrang vor pages. Wir empfehlen, in Ihrem neuen Projekt nur einen Router zu verwenden, um Verwirrung zu vermeiden.

Der public-Ordner (optional)

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

Entwicklungsserver starten

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

Nächste Schritte

Lernen Sie die Dateien und Ordner in Ihrem Next.js-Projekt kennen.

Next.js Projektstruktur

Eine Liste von Ordnern und Dateikonventionen in einem Next.js-Projekt