Installation
Systemanforderungen:
- Node.js 16.14 oder höher.
- macOS, Windows (inklusive 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.
Wissenswert:
- Next.js wird jetzt standardmäßig mit TypeScript, ESLint und Tailwind CSS 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 dann eine layout.tsx- und eine page.tsx-Datei hinzu. Diese werden gerendert, wenn der Benutzer die Wurzel Ihrer Anwendung (/) besucht.
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 initialen Inhalten:
export default function Page() {
return <h1>Hallo, Next.js!</h1>
}export default function Page() {
return <h1>Hallo, Next.js!</h1>
}Wissenswert: Wenn Sie vergessen,
layout.tsxzu erstellen, wird Next.js diese Datei automatisch erstellen, wenn Sie den Entwicklungsserver mitnext devstarten.
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 benutzerdefinierte 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 benutzerdefinierte 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.
Wissenswert: Obwohl Sie beide Router im selben Projekt verwenden können, haben Routen in
appVorrang vorpages. 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 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 anzuzeigen. - Bearbeiten Sie die Datei
app/layout.tsx(oderpages/index.tsx) und speichern Sie sie, um das aktualisierte Ergebnis in Ihrem Browser zu sehen.