Framework · Seit 2016

Next.js

Next.js ist ein React-Framework für Websites und Full-Stack-Apps mit dateibasiertem Routing, Server-Rendering, Server Components und eingebauten Optimierungen.

Anleitung starten Diskussionen

Next.js ist ein Open-Source-React-Framework von Vercel, das 2016 erstmals veröffentlicht wurde. Es bündelt, was man mit React allein selbst zusammenstellen müsste: Routing, Server-Rendering, statische Generierung, Datenabruf und Build-Werkzeuge. Der empfohlene App Router baut auf React Server Components auf: Die Ordnerstruktur im app-Verzeichnis bestimmt die URLs, und Server- und Client-Code stehen im selben Projekt nebeneinander.

Next.js spielt seine Stärken aus, wo Performance und Auffindbarkeit in Suchmaschinen gleichermaßen zählen, und wird häufig für Unternehmenswebsites, Blogs und Dokumentation, Onlineshops und SaaS-Dashboards eingesetzt. Jede Route kann beim Build vorgerendert oder pro Anfrage gerendert werden, langsame Teile lassen sich schrittweise streamen. Server Actions und Route Handler übernehmen Formulare und APIs, sodass eine Codebasis die Oberfläche und das zugehörige Backend abdeckt. Bild-, Schrift- und Skriptoptimierung sind bereits eingebaut.

Für den Einstieg installieren Sie Node.js, legen mit create-next-app ein Projekt an und arbeiten dann die offizielle Getting-Started-Dokumentation sowie den kostenlosen Kurs Learn Next.js durch. Kenntnisse über React-Komponenten, Props und Hooks erleichtern vieles; wer React noch nicht kennt, sollte zuerst dessen Grundlagen lernen. TypeScript funktioniert ohne zusätzliche Konfiguration und wird für neue Projekte empfohlen.

Besonderheiten

Dateisystembasiertes Routing

Ordner und spezielle Dateien wie page, layout, loading und error im app-Verzeichnis legen URLs, verschachtelte Layouts, Ladezustände und Fehleranzeigen fest.

Server und Client Components

Komponenten werden standardmäßig auf dem Server gerendert und senden kein JavaScript an den Browser; nur mit "use client" markierte Teile laufen im Browser.

Flexibles Rendering

Statische Generierung, Rendering zur Anfragezeit und Streaming lassen sich pro Route kombinieren; Caching und Revalidierung halten Inhalte aktuell.

Eingebaute Optimierungen

Bild-, Schrift- und Skriptkomponenten, automatisches Code-Splitting, Link-Prefetching und Turbopack sorgen für schnelle Builds und Aktualisierungen.

Einsatzgebiete

Unternehmenswebsites, Blogs und Dokumentation
Onlineshops
SaaS-Dashboards und Webanwendungen
Full-Stack-Apps mit APIs und Server Actions

Installation

1
Node.js installieren
Installieren Sie eine LTS-Version von Node.js von nodejs.org und prüfen Sie die Version im Terminal. npm ist enthalten; pnpm, Yarn oder Bun funktionieren ebenfalls.
```
node --version
```
2
Projekt anlegen
Erstellen Sie mit create-next-app ein neues Projekt. Die empfohlenen Standardwerte richten TypeScript, ESLint, Tailwind CSS und den App Router ein.
```
npx create-next-app@latest my-app
```
3
Entwicklungsserver starten
Wechseln Sie in den Projektordner, starten Sie den Entwicklungsserver und öffnen Sie http://localhost:3000. Die Seite aktualisiert sich beim Speichern sofort.
```
cd my-app && npm run dev
```

Dein erstes Programm

Die erste Seite

Im App Router ist app/page.tsx die Startseite unter /. Die standardmäßig exportierte React-Komponente wird zur Seite, hier eine Server Component, die eine Überschrift zurückgibt. Beim Speichern aktualisiert sich der Browser sofort, und mit app/about/page.tsx entsteht eine neue Seite /about.

app/page.tsx

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

npx create-next-app@latest my-app && cd my-app && npm run dev

Wichtige Werkzeuge

create-next-app: Das offizielle CLI-Werkzeug, das ein neues Projekt mit TypeScript, Linting, Tailwind CSS und App Router anlegt.
Turbopack: Ein in Rust geschriebener inkrementeller Bundler und in neueren Versionen der Standard; er sorgt für schnellen Start und schnelle Aktualisierungen des Entwicklungsservers.
ESLint: Der JavaScript-Linter. Die von Next.js bereitgestellte ESLint-Konfiguration erkennt typische Fehler bei Next.js und React.
React Developer Tools: Eine Browsererweiterung, mit der sich der Komponentenbaum sowie Props und Zustand von Client Components untersuchen lassen.

Schritt-für-Schritt-Anleitung

Sechs Kapitel führen dich von der Installation bis zu den Kernkonzepten von Next.js.

Offizielle Dokumentation und Ressourcen

Sprachen

Diskussionen

Diskussion starten

Stelle Fragen, teile Erfahrungen und tausche Meinungen zu Next.js aus.

Noch keine Diskussionen. Starte die erste.