Einführung
Willkommen in der Next.js-Dokumentation!
Was ist Next.js?
Next.js ist ein React-Framework zum Erstellen 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ötigten Tools wie Bundling, Kompilierung und mehr und konfiguriert sie automatisch. So können Sie sich auf den Aufbau Ihrer Anwendung konzentrieren, anstatt Zeit mit der Konfiguration zu verbringen.
Egal, ob Sie Einzelentwickler oder Teil eines größeren Teams sind – Next.js kann Ihnen helfen, interaktive, dynamische und schnelle React-Anwendungen zu erstellen.
Hauptfunktionen
Zu den wichtigsten Next.js-Funktionen gehören:
| Funktion | Beschreibung |
|---|---|
| Routing | Ein dateisystembasierter Router, der auf Server Components aufbaut und Layouts, verschachteltes Routing, Ladezustände, Fehlerbehandlung und mehr unterstützt. |
| Rendering | Client-seitiges und Server-seitiges Rendering mit Client- und Server-Komponenten. Weiter optimiert mit statischem und dynamischem 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 Ihre bevorzugten Styling-Methoden, einschließlich CSS-Modulen, Tailwind CSS und CSS-in-JS |
| Optimizations | Optimierungen für Bilder, Schriftarten und Skripte zur Verbesserung der Core Web Vitals und Benutzererfahrung Ihrer Anwendung. |
| TypeScript | Verbesserte TypeScript-Unterstützung mit besserer Typüberprüfung und effizienterer Kompilierung sowie benutzerdefiniertem TypeScript-Plugin und Type-Checker. |
Wie Sie diese Dokumentation nutzen
Auf der linken Seite des Bildschirms finden Sie die Navigationsleiste der Dokumentation. Die Seiten sind sequenziell von grundlegend bis fortgeschritten organisiert, sodass Sie ihnen beim Erstellen 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 Seite des Bildschirms 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 Suchtastenkombination (Strg+K oder Cmd+K) verwenden.
Um zu beginnen, sehen Sie sich die Installationsanleitung an.
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 Ihnen die Verwendung der neuesten React-Funktionen wie Server Components und Streaming ermöglicht. Der Pages Router ist der ursprüngliche Next.js-Router, der Ihnen den Aufbau servergerenderter React-Anwendungen ermöglicht und weiterhin für ältere Next.js-Anwendungen unterstützt wird.
Oben in der Seitenleiste finden Sie 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 einzigartig sind, ist es wichtig, den ausgewählten Tab im Auge zu behalten.
Die Breadcrumbs oben auf der Seite zeigen ebenfalls an, ob Sie die Dokumentation für den App Router oder den Pages Router anzeigen.
Voraussetzungen
Obwohl unsere Dokumentation für Anfänger geeignet ist, müssen wir eine Grundlage schaffen, damit sie sich auf die Next.js-Funktionalität konzentrieren kann. Wir werden sicherstellen, dass wir Links zu relevanter Dokumentation bereitstellen, wenn wir ein neues Konzept einführen.
Um das Beste aus unserer Dokumentation herauszuholen, wird empfohlen, dass Sie über grundlegende Kenntnisse in HTML, CSS und React verfügen. Wenn Sie Ihre React-Kenntnisse auffrischen müssen, sehen Sie sich unseren Next.js Foundations Course an, der Sie in die Grundlagen einführt.
Barrierefreiheit
Für eine optimale Barrierefreiheit bei der Verwendung eines Screenreaders beim Lesen der Dokumentation empfehlen wir die Verwendung von Firefox und NVDA oder Safari und 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 immer willkommen.