Einführung
Willkommen zur Next.js-Dokumentation!
Was ist Next.js?
Next.js ist ein React-Framework für die Entwicklung von Full-Stack-Webanwendungen. Sie verwenden React-Komponenten, um Benutzeroberflächen zu erstellen, und Next.js für zusätzliche Funktionen und Optimierungen.
Unter der Haube abstrahiert Next.js auch die für React benötigte Tooling-Konfiguration und richtet sie automatisch ein, z.B. Bundling, Kompilierung und mehr. So können Sie sich auf den Aufbau Ihrer Anwendung konzentrieren, anstatt Zeit mit Konfiguration zu verbringen.
Egal, ob Sie Einzelentwickler oder Teil eines größeren Teams sind - Next.js hilft Ihnen dabei, interaktive, dynamische und schnelle React-Anwendungen zu erstellen.
Hauptfunktionen
Zu den Hauptfunktionen von Next.js gehören:
| Funktion | Beschreibung |
|---|---|
| Routing | Ein dateisystembasierter Router auf Basis von Server Components, der Layouts, verschachteltes Routing, Ladezustände, Fehlerbehandlung und mehr unterstützt. |
| Rendering | Client-seitiges und Server-seitiges Rendering mit Client- und Server-Komponenten. Weiter optimiert durch statisches und dynamisches Rendering auf dem Server mit Next.js. Streaming auf Edge- und Node.js-Runtimes. |
| Data Fetching | Vereinfachtes Datenabrufen mit async/await in Server Components und eine erweiterte fetch-API für Request-Memoization, Daten-Caching und Revalidierung. |
| Styling | Unterstützung für bevorzugte Styling-Methoden, inklusive CSS Modules, Tailwind CSS und CSS-in-JS |
| Optimizations | Optimierungen für Bilder, Schriftarten und Skripte zur Verbesserung der Core Web Vitals und User Experience Ihrer Anwendung. |
| TypeScript | Verbesserte TypeScript-Unterstützung mit besserer Typüberprüfung, effizienterer Kompilierung sowie benutzerdefiniertem TypeScript-Plugin und Type-Checker. |
Nutzung dieser Dokumentation
Auf der linken Bildschirmseite finden Sie die Navigationsleiste der Dokumentation. Die Seiten sind sequenziell von grundlegend bis fortgeschritten organisiert, sodass Sie ihnen beim Aufbau Ihrer Anwendung Schritt für Schritt folgen können. Sie können sie jedoch in beliebiger Reihenfolge lesen oder zu den Seiten springen, die für Ihren Anwendungsfall relevant sind.
Auf der rechten Bildschirmseite sehen Sie ein Inhaltsverzeichnis, das die Navigation zwischen den Abschnitten einer Seite erleichtert. Wenn Sie schnell eine Seite finden müssen, können Sie die Suchleiste oben oder die Tastenkombination (Strg+K oder Cmd+K) verwenden.
Für den Einstieg empfehlen wir die Installationsanleitung.
App Router vs. Pages Router
Next.js verfügt über zwei verschiedene Router: den App Router und den Pages Router. Der App Router ist ein neuerer Router, der die Verwendung der neuesten React-Funktionen wie Server Components und Streaming ermöglicht. Der Pages Router ist der ursprüngliche Next.js-Router, der den Aufbau server-seitig gerenderter React-Anwendungen ermöglicht und weiterhin für ältere Next.js-Anwendungen unterstützt wird.
Oberhalb der Seitenleiste befindet sich ein Dropdown-Menü, mit dem Sie zwischen den Funktionen des App Routers und des Pages Routers wechseln können. Da es Funktionen gibt, die für jedes Verzeichnis spezifisch sind, ist es wichtig, den ausgewählten Tab im Auge zu behalten.
Die Brotkrümelnavigation oben auf der Seite zeigt ebenfalls an, ob Sie die Dokumentation für den App Router oder den Pages Router anzeigen.
Voraussetzungen
Obwohl unsere Dokumentation für Anfänger konzipiert ist, müssen wir eine Grundlage schaffen, damit sich die Dokumentation auf die Next.js-Funktionalität konzentrieren kann. Wir werden bei der Einführung neuer Konzepte stets Links zu relevanter Dokumentation bereitstellen.
Um das Beste aus unserer Dokumentation herauszuholen, wird ein grundlegendes Verständnis von HTML, CSS und React empfohlen. Wenn Sie Ihre React-Kenntnisse auffrischen möchten, besuchen Sie unseren React Foundations-Kurs, der Sie in die Grundlagen einführt. Anschließend können Sie mehr über Next.js erfahren, indem Sie eine Dashboard-Anwendung erstellen.
Barrierefreiheit
Für optimale Barrierefreiheit bei der Nutzung eines Screenreaders empfehlen wir Firefox mit NVDA oder Safari mit VoiceOver.
Werden Sie Teil unserer Community
Wenn Sie Fragen zu Next.js haben, sind Sie in unserer Community auf GitHub Discussions, Discord, Twitter und Reddit stets willkommen.