Einführung
Willkommen bei der Next.js-Dokumentation!
Was ist Next.js?
Next.js ist ein React-Framework zum Erstellen von vollständigen Webapplikationen. Sie verwenden React-Komponenten zum Aufbau von Benutzeroberflächen und Next.js für zusätzliche Funktionen und Optimierungen.
Im Hintergrund abstrahiert Next.js auch die für React erforderlichen Werkzeuge und konfiguriert sie automatisch, wie Bundling, Kompilierung und mehr. Dies ermöglicht es Ihnen, sich auf den Aufbau Ihrer Anwendung zu konzentrieren, anstatt Zeit mit der Konfiguration zu verbringen.
Ob Sie ein einzelner Entwickler oder Teil eines größeren Teams sind, Next.js kann Ihnen helfen, interaktive, dynamische und schnelle React-Anwendungen zu erstellen.
Hauptfunktionen
Zu den Hauptfunktionen von Next.js gehören:
| Funktion | Beschreibung |
|---|---|
| Routing | Ein dateibasierter Router, der auf Server-Komponenten aufbaut und Layouts, verschachteltes Routing, Ladestatements, 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-Laufzeiten. |
| Datenabruf | Vereinfachter Datenabruf mit async/await in Server-Komponenten und einer erweiterten fetch-API für Anfrage-Memoisation, Datenzwischenspeicherung und Neuvalidierung. |
| Styling | Unterstützung für Ihre bevorzugten Styling-Methoden, einschließlich CSS-Module, Tailwind CSS und CSS-in-JS |
| Optimierungen | Bild-, Schriftart- und Skript-Optimierungen zur Verbesserung der Core Web Vitals und Benutzererfahrung Ihrer Anwendung. |
| TypeScript | Verbesserte Unterstützung für TypeScript mit besserer Typüberprüfung und effizienterer Kompilierung sowie benutzerdefiniertem TypeScript-Plugin und Typüberprüfer. |
Wie Sie diese Dokumentation nutzen
Auf der linken Seite des Bildschirms finden Sie die Dokumentations-Navigationsleiste. Die Seiten der Dokumentation 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 direkt zu den für Ihren Anwendungsfall relevanten Seiten springen.
Auf der rechten Seite des Bildschirms sehen Sie ein Inhaltsverzeichnis, das die Navigation zwischen Abschnitten einer Seite erleichtert. Wenn Sie eine Seite schnell finden möchten, können Sie die Suchleiste oben verwenden oder die Suchverknüpfung (Strg+K oder Cmd+K).
Beginnen Sie mit der Installationsanleitung.
App Router vs Pages Router
Next.js hat 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-Komponenten und Streaming ermöglicht. Der Pages Router ist der ursprüngliche Next.js-Router, der es ermöglichte, serverseitig gerenderte React-Anwendungen zu erstellen, und wird weiterhin für ältere Next.js-Anwendungen unterstützt.
Am oberen Rand 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 jeden Ordner einzigartig sind, ist es wichtig, den ausgewählten Tab im Blick zu behalten.
Die Breadcrumbs am oberen Rand der Seite zeigen auch an, ob Sie die App Router- oder Pages Router-Dokumentation ansehen.
Voraussetzende Kenntnisse
Obwohl unsere Dokumentation für Anfänger benutzerfreundlich gestaltet ist, müssen wir eine Grundlage schaffen, damit die Dokumentation auf Next.js-Funktionalität fokussiert bleiben kann. Wir werden immer Links zur relevanten Dokumentation bereitstellen, wenn wir ein neues Konzept einführen.
Um das Beste aus unserer Dokumentation herauszuholen, wird empfohlen, dass Sie grundlegende Kenntnisse in HTML, CSS und React haben. Wenn Sie Ihre React-Fähigkeiten auffrischen müssen, schauen Sie sich unseren React Foundations Kurs an, der Ihnen die Grundlagen vermittelt. Lernen Sie dann mehr über Next.js, indem Sie eine Dashboard-Anwendung erstellen.
Zugänglichkeit
Für eine optimale Zugänglichkeit bei Verwendung eines Screenreaders empfehlen wir Firefox mit NVDA oder Safari mit VoiceOver.
Treten Sie unserer Community bei
Wenn Sie Fragen zu Next.js haben, sind Sie jederzeit eingeladen, unsere Community auf GitHub Discussions, Discord, X (Twitter) und Reddit zu kontaktieren.