Pages Router

Neuer App Router-Kurs: Sie sehen derzeit den Pages Router-Kurs. Den neuen App Router-Kurs hier ansehen.

Um eine komplette Webanwendung mit React von Grund auf zu erstellen, gibt es viele wichtige Details zu beachten:

• Code muss mit einem Bundler wie webpack gebündelt und mit einem Compiler wie Babel transformiert werden.
• Produktionsoptimierungen wie Code-Splitting sind erforderlich.
• Möglicherweise möchten Sie einige Seiten statisch vor-rendern, um Performance und SEO zu verbessern. Sie könnten auch serverseitiges Rendering oder clientseitiges Rendering nutzen.
• Eventuell müssen Sie serverseitigen Code schreiben, um Ihre React-App mit Ihrem Datenspeicher zu verbinden.

Ein Framework kann diese Probleme lösen. Aber ein solches Framework muss das richtige Abstraktionsniveau haben - sonst ist es nicht sehr nützlich. Es muss auch eine großartige "Developer Experience" bieten, damit Sie und Ihr Team eine hervorragende Erfahrung beim Schreiben von Code haben.

Next.js: Das React-Framework

Hier kommt Next.js, das React-Framework. Next.js bietet eine Lösung für all diese Probleme. Noch wichtiger ist, dass es Sie und Ihr Team beim Erstellen von React-Anwendungen in die Pit of Success führt.

Next.js zielt darauf ab, eine erstklassige Developer Experience und viele integrierte Funktionen zu bieten, wie:

• Ein intuitives seitenbasiertes Routing-System (mit Unterstützung für dynamische Routen)
• Pre-Rendering, sowohl statische Generierung (SSG) als auch serverseitiges Rendering (SSR) werden pro Seite unterstützt
• Automatisches Code-Splitting für schnellere Seitenladezeiten
• Clientseitiges Routing mit optimiertem Prefetching
• Integrierte CSS- und Sass-Unterstützung sowie Unterstützung für jede CSS-in-JS-Bibliothek
• Entwicklungsumgebung mit Fast Refresh-Unterstützung
• API-Routen zum Erstellen von API-Endpunkten mit Serverless Functions
• Vollständig erweiterbar

Next.js wird in zehntausenden produktiven Websites und Webanwendungen eingesetzt, darunter viele der weltweit größten Marken.

Über dieses Tutorial

Dieser kostenlose interaktive Kurs führt Sie durch die ersten Schritte mit Next.js.

In diesem Tutorial lernen Sie die Grundlagen von Next.js, indem Sie eine sehr einfache Blog-App erstellen. Hier ein Beispiel des Endergebnisses:

https://next-learn-starter.vercel.app (Quellcode)

Dieses Tutorial setzt Grundkenntnisse in JavaScript und React voraus. Wenn Sie noch nie React-Code geschrieben haben, sollten Sie zuerst das offizielle React-Tutorial durcharbeiten.

Wenn Sie stattdessen nach Dokumentation suchen, besuchen Sie die Next.js-Dokumentation.

Nehmen Sie am Gespräch teil

Wenn Sie Fragen zu Next.js oder diesem Kurs haben, können Sie sich gerne an unsere Community auf Discord wenden.

Lassen Sie uns beginnen!