Installation
Systemanforderungen:
- Node.js 18.17 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, das alles automatisch für Sie einrichtet. Führen Sie folgenden Befehl aus, um ein Projekt zu erstellen:
npx create-next-app@latestWährend der Installation werden Sie folgende Eingabeaufforderungen sehen:
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 / 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.
Wenn Sie neu bei Next.js sind, lesen Sie die Dokumentation zur Projektstruktur für einen Überblick über alle möglichen Dateien und Ordner in Ihrer Anwendung.
Gut zu wissen:
- Next.js wird jetzt standardmäßig mit TypeScript, ESLint und Tailwind CSS Konfiguration ausgeliefert.
- Optional können Sie ein
src-Verzeichnis im Stammverzeichnis Ihres Projekts verwenden, um Ihren Anwendungscode von Konfigurationsdateien zu trennen.
Manuelle Installation
Um manuell eine neue Next.js-App zu erstellen, installieren Sie die erforderlichen Pakete:
npm install next@latest react@latest react-dom@latestÖffnen Sie Ihre package.json-Datei und fügen Sie folgende scripts hinzu:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}Diese Skripte beziehen sich auf verschiedene Phasen der Anwendungsentwicklung:
dev: führtnext devaus, um Next.js im Entwicklungsmodus zu starten.build: führtnext buildaus, um die Anwendung für den Produktionseinsatz zu erstellen.start: führtnext startaus, um einen Next.js-Produktionsserver zu starten.lint: führtnext lintaus, um die integrierte ESLint-Konfiguration von Next.js einzurichten.
Verzeichnisse erstellen
Next.js verwendet Dateisystem-Routing, was bedeutet, dass die Routen in Ihrer Anwendung durch die Dateistruktur bestimmt werden.
Das app-Verzeichnis
Für neue Anwendungen empfehlen wir die Verwendung des App Routers. Dieser Router ermöglicht die Nutzung der neuesten React-Funktionen und ist eine Weiterentwicklung des Pages Routers basierend auf Community-Feedback.
Erstellen Sie einen app/-Ordner und fügen Sie eine layout.tsx- und page.tsx-Datei hinzu. Diese werden gerendert, wenn der Benutzer die Stammroute Ihrer Anwendung (/) aufruft.
Erstellen Sie ein Root Layout in app/layout.tsx mit den erforderlichen <html>- und <body>-Tags:
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Erstellen Sie abschließend eine Startseite app/page.tsx mit einigen Inhalten:
export default function Page() {
return <h1>Hallo, Next.js!</h1>
}export default function Page() {
return <h1>Hallo, Next.js!</h1>
}Gut zu wissen: Wenn Sie vergessen,
layout.tsxzu erstellen, wird Next.js diese Datei automatisch beim Starten des Entwicklungsservers mitnext devanlegen.
Erfahren Sie mehr über die Verwendung des App Routers.
Das pages-Verzeichnis (optional)
Wenn Sie lieber den Pages Router anstelle des App Routers verwenden möchten, 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:
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 Custom App-Datei.
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}Fügen Sie abschließend eine _document.tsx-Datei in pages/ hinzu, um die initiale Serverantwort zu steuern. Erfahren Sie mehr über die Custom Document-Datei.
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.
Gut zu wissen: Obwohl Sie beide Router im selben Projekt verwenden können, haben Routen in
appVorrang vorpages. Wir empfehlen, in neuen Projekten nur einen Router zu verwenden, um Verwirrung zu vermeiden.
Der public-Ordner (optional)
Erstellen Sie einen public-Ordner, um statische Assets 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
- Führen Sie
npm run devaus, um den Entwicklungsserver zu starten. - Rufen Sie
http://localhost:3000auf, um Ihre Anwendung zu sehen. - Bearbeiten Sie die Datei
app/page.tsx(oderpages/index.tsx) und speichern Sie sie, um das aktualisierte Ergebnis in Ihrem Browser zu sehen.