{"id":14990,"date":"2026-09-10T13:41:46","date_gmt":"2026-09-10T06:41:46","guid":{"rendered":"\/de\/tutorials\/?p=14990"},"modified":"2026-09-08T13:49:59","modified_gmt":"2026-09-08T06:49:59","slug":"was-ist-nextjs","status":"publish","type":"post","link":"\/de\/tutorials\/was-ist-nextjs\/","title":{"rendered":"Was ist Next.js und wie funktioniert das React-Framework f\u00fcr Full-Stack-Anwendungen?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Next.js ist ein Open-Source-React-Framework zur Entwicklung produktionsreifer, serverseitig gerenderter Full-Stack-Webanwendungen. Es wird von Vercel entwickelt und gepflegt und erweitert React um integriertes Routing, verschiedene Rendering-Strategien, Backend-Funktionen und Leistungsoptimierungen. Bei vielen Anwendungen k&ouml;nnen Sie damit sowohl die Frontend- als auch die Backend-Logik in einer einzigen Codebasis verwalten.<\/p><p class=\"wp-block-paragraph\">Die Architektur des Frameworks basiert auf Node.js und unterst&uuml;tzt hybrides Rendering. Je nach den Anforderungen der Inhalte legen Sie f&uuml;r jede Route fest, wie sie gerendert wird. Eine Marketing-Seite l&auml;sst sich beispielsweise f&uuml;r k&uuml;rzere Ladezeiten vorab generieren, w&auml;hrend ein Benutzer-Dashboard bei jeder Anfrage aktuelle Daten rendert.<\/p><p class=\"wp-block-paragraph\">Die M&ouml;glichkeit, das Rendering &uuml;ber den Datenabruf und die Caching-Konfiguration f&uuml;r jede Route individuell zu steuern, unterscheidet das Full-Stack-Framework von einer herk&ouml;mmlichen React-Konfiguration.<\/p><p class=\"wp-block-paragraph\">Neben verschiedenen Rendering-Methoden bietet Next.js Kernfunktionen wie Dateisystem-Routing, Bildoptimierung und API-Route-Handler. Dadurch entfallen Tools, die Sie sonst selbst konfigurieren m&uuml;ssten. Der praktische Ablauf von der Projekteinrichtung bis zur Bereitstellung ist unkompliziert, und das Framework eignet sich f&uuml;r Anwendungsf&auml;lle von statischen Marketing-Websites bis hin zu gro&szlig;en Unternehmensanwendungen.<\/p><h2 class=\"wp-block-heading\" id=\"h-was-ist-next-js\">Was ist Next.js?<\/h2><p class=\"wp-block-paragraph\">Next.js kombiniert die komponentenbasierte Benutzeroberfl&auml;che von React mit Node.js auf der Serverseite und optionalen Edge-Laufzeitumgebungen. Dadurch k&ouml;nnen Sie sowohl die Benutzeroberfl&auml;che f&uuml;r Ihre Besucher als auch die Backend-Logik in einem Projekt entwickeln und bei Bedarf externe Dienste integrieren.<\/p><p class=\"wp-block-paragraph\">Das Framework bietet zwei Routing-Systeme:<\/p><ul class=\"wp-block-list\">\n<li>Der App Router im <strong>app<\/strong>-Verzeichnis ist der moderne, empfohlene Ansatz. Er unterst&uuml;tzt React Server Components, Layouts, verschachtelte Routen und Streaming.<\/li>\n\n\n\n<li>Der Pages Router im <strong>pages<\/strong>-Verzeichnis ist das &auml;ltere System. Er wird weiterhin vollst&auml;ndig unterst&uuml;tzt, neue Projekte sollten jedoch mit dem App Router beginnen.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Im App Router unterteilt das Framework Ihren Code in zwei Kategorien. Server Components werden auf dem Server ausgef&uuml;hrt, und ihr JavaScript wird nicht an den Browser &uuml;bertragen. Dadurch bleiben Ihre Seiten schlank und schnell. Client Components werden im Browser ausgef&uuml;hrt und &uuml;bernehmen interaktive Funktionen wie Formulare, Animationen und Echtzeit-Aktualisierungen. Standardm&auml;&szlig;ig sind Komponenten Server Components. Um eine Client Component zu verwenden, f&uuml;gen Sie <strong>&lsquo;use client&rsquo;<\/strong> am Anfang der jeweiligen Datei ein.<\/p><p class=\"wp-block-paragraph\">Auf einem <a href=\"\/de\/tutorials\/was-ist-ein-server\/\">Webserver<\/a> kompiliert das Build-System Ihren Code, teilt ihn in optimierte Bl&ouml;cke auf und bereitet jede Route entsprechend ihrer Rendering-Strategie vor. Sie m&uuml;ssen keine separaten Tools f&uuml;r Bundling, Routing oder die Serverkonfiguration miteinander kombinieren. Next.js ist ohne zus&auml;tzliche Einrichtung f&uuml;r den Produktionseinsatz bereit.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-funktioniert-die-architektur-von-next-js\">Wie funktioniert die Architektur von Next.js?<\/h2><p class=\"wp-block-paragraph\">Die Architektur von Next.js kombiniert React, Node.js und optionale Edge-Laufzeitumgebungen, um sowohl das Frontend-Rendering als auch die Backend-Logik abzudecken.<\/p><p class=\"wp-block-paragraph\">Next.js verwendet Node.js f&uuml;r serverseitiges Rendering, API-Routen und den Datenabruf. F&uuml;r Antworten mit extrem niedriger Latenz lassen sich au&szlig;erdem Edge-Laufzeitumgebungen einsetzen. Anfragen werden &uuml;ber den App Router oder den Pages Router weitergeleitet, wobei die Ordnerstruktur direkt den URLs zugeordnet wird.<\/p><p class=\"wp-block-paragraph\">Vereinfacht dargestellt durchl&auml;uft eine Anfrage zun&auml;chst das Next.js-Routing und gelangt anschlie&szlig;end je nach Konfiguration in eine Node.js- oder Edge-Laufzeitumgebung. Das Framework entscheidet, ob eine zwischengespeicherte Antwort ausgeliefert, HTML auf dem Server gerendert oder der Inhalt schrittweise gestreamt wird. Server und Client Components werden getrennt verarbeitet: Zuerst wird die serverseitig gerenderte Ausgabe &uuml;bertragen, anschlie&szlig;end kommt die clientseitige Interaktivit&auml;t hinzu.<\/p><p class=\"wp-block-paragraph\">Ein einziges Projekt &uuml;bernimmt dabei alle Aufgaben &ndash; vom Rendering Ihrer Startseite &uuml;ber die Verarbeitung eines Kontaktformulars bis hin zur Abfrage einer Datenbank. Ein separates Backend-Repository ist nicht erforderlich. Die meisten Anwendungen ben&ouml;tigen auch keinen dedizierten API-Server. Sie arbeiten mit einer Codebasis, einer Bereitstellung und einem einheitlichen Entwicklungsmodell.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\">\n<figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6aa2a45e611b0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6aa2a45e611b0\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anfrage-Flussdiagramm.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Was ist Next.js? &ndash; Ablauf einer Anfrage\" class=\"wp-image-15046\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anfrage-Flussdiagramm.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anfrage-Flussdiagramm.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anfrage-Flussdiagramm.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-welche-rendering-methoden-unterstutzt-next-js\">Welche Rendering-Methoden unterst&uuml;tzt Next.js?<\/h2><p class=\"wp-block-paragraph\">Das Rendering ist der Hauptgrund, warum sich Entwickler f&uuml;r Next.js statt f&uuml;r reines React entscheiden. Es bestimmt, wann und wo Ihr HTML generiert wird. Das wirkt sich direkt auf die Ladegeschwindigkeit, die Indexierung durch Suchmaschinen und die Skalierbarkeit Ihrer Anwendung bei hohem Traffic aus.<\/p><p class=\"wp-block-paragraph\">Bei einer Standardkonfiguration von React erfolgt das Rendering vollst&auml;ndig im Browser. Der Besucher l&auml;dt JavaScript herunter, und der Browser erstellt daraus die Seite von Grund auf. Dieser Ansatz eignet sich f&uuml;r Anwendungen hinter einem Anmeldebildschirm. Bei &ouml;ffentlich zug&auml;nglichen Seiten ist er jedoch langsamer, und f&uuml;r Suchmaschinen bleiben die Inhalte unsichtbar, bis JavaScript ausgef&uuml;hrt wird.<\/p><p class=\"wp-block-paragraph\">Next.js unterst&uuml;tzt vier Rendering-Methoden, die Sie innerhalb einer Anwendung miteinander kombinieren k&ouml;nnen. Je nach Anforderungen der Inhalte w&auml;hlen Sie die passende Strategie f&uuml;r jede Route und sogar f&uuml;r einzelne Datenabrufe.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\">\n<figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6aa2a45e62b54\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6aa2a45e62b54\"><img decoding=\"async\" width=\"1375\" height=\"768\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Welche-Rendering-Methoden-unterstutzt-Next.js_.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Rendering-Methoden in Next.js\" class=\"wp-image-15047\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Welche-Rendering-Methoden-unterstutzt-Next.js_.jpg\/w=1375,fit=scale-down 1375w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Welche-Rendering-Methoden-unterstutzt-Next.js_.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Welche-Rendering-Methoden-unterstutzt-Next.js_.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Welche-Rendering-Methoden-unterstutzt-Next.js_.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1375px) 100vw, 1375px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\">Serverseitiges Rendering (SSR)<\/h3><p class=\"wp-block-paragraph\">Beim serverseitigen Rendering (SSR) wird f&uuml;r jede eingehende Anfrage neuer HTML-Code auf dem Server generiert. Ruft jemand Ihre Seite auf, l&auml;dt der Server die neuesten Daten, erstellt den vollst&auml;ndigen HTML-Code und sendet ihn an den Browser, der ihn direkt anzeigen kann.<\/p><p class=\"wp-block-paragraph\"><strong>Verwenden Sie diesen dynamischen Rendering-Ansatz f&uuml;r Seiten mit personalisierten oder h&auml;ufig wechselnden Inhalten.<\/strong> Dazu geh&ouml;ren etwa ein Benutzer-Dashboard mit Kontodaten in Echtzeit, eine Suchergebnisseite oder eine Preisseite, deren Inhalte je nach Region variieren. Besucher sehen sofort eine vollst&auml;ndig gerenderte Seite, und Suchmaschinen k&ouml;nnen die Inhalte indexieren, ohne JavaScript auszuf&uuml;hren.<\/p><p class=\"wp-block-paragraph\">Jede Anfrage beansprucht jedoch Serverressourcen. Die Generierung von SSR-Seiten dauert daher l&auml;nger als bei vorab erstellten statischen Seiten. F&uuml;r Inhalte, die sich zwischen verschiedenen Besuchern nicht &auml;ndern, eignet sich die statische Generierung besser.<\/p><h3 class=\"wp-block-heading\">Statische Seitengenerierung (SSG)<\/h3><p class=\"wp-block-paragraph\">Bei der statischen Seitengenerierung (SSG) werden Ihre Seiten w&auml;hrend des Builds vorab gerendert. Der Build-Prozess generiert die HTML-Dateien einmal, anschlie&szlig;end werden die vorab gerenderten Seiten &uuml;ber ein CDN direkt an alle Besucher ausgeliefert.<\/p><p class=\"wp-block-paragraph\">Das Ergebnis ist die k&uuml;rzestm&ouml;gliche Seitenladezeit, da keine Serververarbeitung pro Anfrage erforderlich ist. Die Dateien Ihrer <a href=\"\/de\/tutorials\/statische-website\/\">statischen Website<\/a> befinden sich auf Edge-Servern auf der ganzen Welt und laden nahezu sofort. <strong>Blogbeitr&auml;ge, Dokumentationen, Marketing-Landingpages und Portfolio-Websites eignen sich ideal f&uuml;r SSG.<\/strong><\/p><p class=\"wp-block-paragraph\">Der Nachteil liegt in der Aktualit&auml;t. Die Seiten werden w&auml;hrend der Bereitstellung erstellt, sodass sich die Inhalte erst nach einem erneuten Build und einer erneuten Bereitstellung aktualisieren. F&uuml;r einen Blog, der w&ouml;chentlich neue Beitr&auml;ge ver&ouml;ffentlicht, ist das ausreichend. Ein Produktkatalog, der sich st&uuml;ndlich &auml;ndert, erfordert dagegen eine flexiblere L&ouml;sung.<\/p><h3 class=\"wp-block-heading\">Inkrementelle statische Regeneration (ISR)<\/h3><p class=\"wp-block-paragraph\">Die inkrementelle statische Regeneration (ISR) verbindet die Geschwindigkeit der statischen Generierung mit der Aktualit&auml;t des serverseitigen Renderings. Dieser hybride Ansatz erweitert SSG und erm&ouml;glicht es, einzelne Seiten nach der Bereitstellung zu aktualisieren, ohne die gesamte Website neu erstellen zu m&uuml;ssen.<\/p><p class=\"wp-block-paragraph\">Sie legen ein Revalidierungsintervall fest, beispielsweise 60 Sekunden. Bis dieses Intervall abgelaufen ist, liefert das Framework die zwischengespeicherte statische Seite aus. Die erste Anfrage nach Ablauf des Intervalls l&ouml;st eine Neugenerierung im Hintergrund aus. W&auml;hrend die neue Seite erstellt wird, bleibt die bisherige Version verf&uuml;gbar. Besucher sehen daher keinen Ladezustand.<\/p><p class=\"wp-block-paragraph\"><strong>ISR eignet sich f&uuml;r Produktseiten, Nachrichtenartikel und andere Inhalte, die sich regelm&auml;&szlig;ig &auml;ndern, aber keine Aktualit&auml;t in Echtzeit erfordern.<\/strong> Ein Produktpreis, der alle paar Minuten aktualisiert wird, ist ein idealer Anwendungsfall f&uuml;r ISR. So erhalten Sie die Leistung einer Website mit <a href=\"\/de\/tutorials\/website-cache\/\">Caching<\/a> und nahezu in Echtzeit aktualisierte Inhalte.<\/p><h3 class=\"wp-block-heading\">Clientseitiges Rendering (CSR)<\/h3><p class=\"wp-block-paragraph\">Clientseitiges Rendering (CSR) entspricht dem Standard-Rendering von React &ndash; dem Rendering vollst&auml;ndig im Browser. Der Server sendet zun&auml;chst eine minimale HTML-Grundstruktur. Anschlie&szlig;end ruft JavaScript im Browser die Daten ab und erstellt nach dem ersten Laden die Seite.<\/p><p class=\"wp-block-paragraph\"><strong>Verwenden Sie CSR f&uuml;r stark interaktive Komponenten, die nicht von Suchmaschinen indexiert werden m&uuml;ssen.<\/strong> Dazu geh&ouml;ren Admin-Bereiche, interne Tools, Echtzeit-Chat-Oberfl&auml;chen oder Bereiche, deren Inhalte vollst&auml;ndig vom angemeldeten Benutzer abh&auml;ngen. Da der Browser die Verarbeitung &uuml;bernimmt, wird der Server entlastet. Benutzer sehen jedoch m&ouml;glicherweise einen Ladezustand, bis JavaScript vollst&auml;ndig ausgef&uuml;hrt wurde.<\/p><p class=\"wp-block-paragraph\">CSR erm&ouml;glicht umfangreiche Interaktivit&auml;t, geht jedoch zulasten der anf&auml;nglichen Ladegeschwindigkeit und der <a href=\"\/de\/tutorials\/was-ist-seo\/\">SEO<\/a>-Sichtbarkeit. Bei &ouml;ffentlich zug&auml;nglichen Seiten, f&uuml;r die Suchmaschinen-Traffic wichtig ist, sollten Sie CSR mit SSR oder SSG kombinieren. Dadurch werden bereits sichtbare Inhalte geladen, bevor die interaktiven Elemente hinzukommen.<\/p><h2 class=\"wp-block-heading\" id=\"h-kernfunktionen-von-next-js\">Kernfunktionen von Next.js<\/h2><p class=\"wp-block-paragraph\">Rendering steht zwar meist im Mittelpunkt, Next.js bietet jedoch auch integrierte Funktionen, die Tools ersetzen, die Sie andernfalls selbst konfigurieren m&uuml;ssten.<\/p><p class=\"wp-block-paragraph\"><strong>Dateisystem-Routing<\/strong> ordnet Ihre Ordnerstruktur direkt den URLs zu. Erstellen Sie eine Datei unter <strong>app\/about\/page.js<\/strong>, erh&auml;lt Ihre Website eine Seite unter <strong>\/about<\/strong>. Eine separate Router-Konfiguration ist nicht erforderlich. Verschachtelte Ordner erzeugen verschachtelte Routen. Mit speziellen Dateien wie <strong>layout.js<\/strong> k&ouml;nnen Sie UI-Elemente wie eine Kopfzeile oder Seitenleiste auf mehreren Seiten verwenden, ohne Code zu wiederholen.<\/p><p class=\"wp-block-paragraph\"><strong>API-Routen und Route Handler<\/strong> erm&ouml;glichen es, Backend-Endpunkte direkt in Ihrem Next.js-Projekt zu erstellen. Ben&ouml;tigen Sie ein Kontaktformular, das eine E-Mail versendet? Erstellen Sie einen Route Handler unter <strong>app\/api\/contact\/route.js<\/strong> und schreiben Sie dort die Serverlogik. Sie k&ouml;nnen Datenbanken anbinden, APIs von Drittanbietern aufrufen und Zahlungen verarbeiten &ndash; ohne einen separaten Backend-Server. Falls Ihr Projekt einen st&auml;rker strukturierten Ansatz f&uuml;r eine <a href=\"\/de\/tutorials\/wordpress-rest-api-leitfaden\/\">REST-API<\/a> ben&ouml;tigt, unterst&uuml;tzen Route Handler auch diesen.<\/p><p class=\"wp-block-paragraph\"><strong>Automatische Codeaufteilung<\/strong> unterteilt Ihre Anwendung in kleinere JavaScript-Dateien. Ruft jemand Ihre Startseite auf, l&auml;dt der Browser nur den Code f&uuml;r diese Seite und nicht den Code f&uuml;r alle anderen Seiten Ihrer Website. Die Aufteilung erfolgt automatisch w&auml;hrend des Builds.<\/p><p class=\"wp-block-paragraph\"><strong>Bild- und Schriftartoptimierung<\/strong> reduziert h&auml;ufige Leistungsengp&auml;sse. Die integrierte <strong>Image<\/strong>-Komponente passt die Gr&ouml;&szlig;e von Bildern automatisch an, komprimiert sie und l&auml;dt sie verz&ouml;gert. Schriftarten werden selbst gehostet und ohne Layoutverschiebung geladen. Die manuelle Einrichtung dieser Funktionen w&uuml;rde Stunden dauern, in Next.js sind sie direkt integriert.<\/p><p class=\"wp-block-paragraph\"><strong>TypeScript-Unterst&uuml;tzung<\/strong> ist bereits bei der Projekterstellung integriert. Das Framework erkennt <strong>.ts<\/strong>&ndash; und <strong>.tsx<\/strong>-Dateien automatisch und f&uuml;hrt w&auml;hrend der Entwicklung eine Typ&uuml;berpr&uuml;fung durch. Eine zus&auml;tzliche Konfiguration ist nicht erforderlich.<\/p><p class=\"wp-block-paragraph\">Die <strong>Proxy-Konfiguration<\/strong> (<strong>proxy.ts<\/strong> in Next.js 16, zuvor <strong>middleware.ts<\/strong>) wird ausgef&uuml;hrt, bevor eine Anfrage abgeschlossen ist. Verwenden Sie sie f&uuml;r Authentifizierungspr&uuml;fungen, Weiterleitungen, A\/B-Tests oder geolokationsbasiertes Routing. Sie fungiert als Netzwerkgrenze innerhalb der Node.js-Laufzeitumgebung und verarbeitet die Anfragelogik, bevor Ihr Seitencode ausgef&uuml;hrt wird.<\/p><h2 class=\"wp-block-heading\" id=\"h-was-ist-der-unterschied-zwischen-react-und-next-js\">Was ist der Unterschied zwischen React und Next.js?<\/h2><p class=\"wp-block-paragraph\"><strong>React ist eine UI-Bibliothek. Next.js ist ein Full-Stack-JavaScript-Framework, das auf React aufbaut.<\/strong><\/p><p class=\"wp-block-paragraph\">React stellt Ihnen die Bausteine f&uuml;r Komponenten und die UI-Logik bereit. Next.js erg&auml;nzt sie um die Struktur, die Tools und die Serverfunktionen f&uuml;r eine vollst&auml;ndige Anwendung.<\/p><p class=\"wp-block-paragraph\">Mit React allein erstellen Sie Komponenten und verwalten den Zustand. F&uuml;r Routing, Datenabruf, serverseitiges Rendering und Build-Optimierung m&uuml;ssen Sie jedoch eigene L&ouml;sungen erg&auml;nzen. Jedes Team stellt diese Komponenten anders zusammen, was den Einrichtungsaufwand erh&ouml;ht und zu uneinheitlichen Konfigurationen f&uuml;hrt.<\/p><p class=\"wp-block-paragraph\">Next.js nimmt Ihnen diese Entscheidungen ab. Dateisystem-Routing, verschiedene Rendering-Strategien, API-Route-Handler, Bildoptimierung und ein produktionsreifes Build-System sind in einem einzigen Framework geb&uuml;ndelt. So verbringen Sie weniger Zeit mit der Konfiguration und mehr Zeit mit der Entwicklung.<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><thead><tr><th>Funktion<\/th><th>React<\/th><th>Next.js<\/th><\/tr><\/thead><tbody><tr><td><strong>Routing<\/strong><\/td><td>Erfordert eine Drittanbieterbibliothek wie React Router<\/td><td>Integriertes Dateisystem-Routing<\/td><\/tr><tr><td><strong>Rendering<\/strong><\/td><td>Standardm&auml;&szlig;ig nur clientseitig<\/td><td>SSR, SSG, ISR und CSR pro Route<\/td><\/tr><tr><td><strong>Backend-Funktionen<\/strong><\/td><td>Keine &ndash; erfordert einen separaten Server<\/td><td>API-Routen und Route Handler integriert<\/td><\/tr><tr><td><strong>SEO-Unterst&uuml;tzung<\/strong><\/td><td>Erfordert zus&auml;tzliche Einrichtung f&uuml;r SSR und SEO<\/td><td>Gut &ndash; serverseitig gerendertes HTML ist indexierbar<\/td><\/tr><tr><td><strong>Konfigurationsaufwand<\/strong><\/td><td>Hoch &ndash; Sie stellen die Tools selbst zusammen<\/td><td>Niedrig &ndash; produktionsreife Standardeinstellungen sind integriert<\/td><\/tr><\/tbody><\/table><\/figure><p class=\"wp-block-paragraph\"><strong>Wann React allein sinnvoll ist:<\/strong> Sie entwickeln eine Single-Page-Anwendung hinter einer Authentifizierung, beispielsweise ein internes Admin-Tool, verf&uuml;gen bereits &uuml;ber eine Backend-API und ben&ouml;tigen keine Sichtbarkeit in Suchmaschinen.<\/p><p class=\"wp-block-paragraph\"><strong>Wann Next.js die bessere Wahl ist:<\/strong> Sie entwickeln eine &ouml;ffentlich zug&auml;ngliche Website, f&uuml;r die SEO wichtig ist, m&ouml;chten serverseitiges Rendering oder statische Generierung nutzen oder ben&ouml;tigen Backend-Funktionen, ohne einen separaten Server zu betreiben. Beide Ans&auml;tze eignen sich f&uuml;r unterschiedliche <a href=\"\/de\/tutorials\/arten-von-webanwendungen\/\">Arten von Web-Apps<\/a>. Die richtige Wahl h&auml;ngt davon ab, ob SEO, Interaktivit&auml;t oder Geschwindigkeit f&uuml;r Ihr Projekt am wichtigsten sind.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-funktioniert-next-js-in-der-praxis\">Wie funktioniert Next.js in der Praxis?<\/h2><p class=\"wp-block-paragraph\">Der Next.js-Workflow umfasst sechs Schritte: Sie richten das Projekt ein, definieren Routen, w&auml;hlen eine Rendering-Strategie, rufen Daten ab, f&uuml;gen Backend-Logik hinzu und erstellen anschlie&szlig;end den Build f&uuml;r die Bereitstellung.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\">\n<figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6aa2a45e6eec0\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6aa2a45e6eec0\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Workflow.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"So funktioniert Next.js\" class=\"wp-image-15048\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Workflow.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Workflow.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Workflow.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><h3 class=\"wp-block-heading\">1. Erstellen Sie ein Next.js-Projekt<\/h3><p class=\"wp-block-paragraph\">F&uuml;hren Sie zun&auml;chst <strong>create-next-app<\/strong> in Ihrem Terminal aus. Der Befehl erstellt ein vollst&auml;ndiges Projekt mit der Standardkonfiguration. Daf&uuml;r muss Node.js installiert sein &ndash; entweder auf Ihrem Rechner oder auf dem Server. Anschlie&szlig;end richtet dieser eine Befehl das Projekt ein.<\/p><p class=\"wp-block-paragraph\">Der Befehl stellt einige Fragen zur Einrichtung, etwa zu TypeScript oder JavaScript, den ESLint-Einstellungen und Ihrem bevorzugten Styling-Ansatz, und generiert anschlie&szlig;end die Projektstruktur. Die wichtigsten Dateien befinden sich im <strong>app<\/strong>-Verzeichnis. Dort legen Sie Seiten, Layouts und Route Handler ab.<\/p><p class=\"wp-block-paragraph\">F&uuml;hren Sie nach der Projekterstellung <strong>npm run dev<\/strong> aus, um den lokalen Entwicklungsserver zu starten. Ihre Website ist anschlie&szlig;end unter <strong>localhost:3000<\/strong> erreichbar. Dank Fast Refresh sehen Sie &Auml;nderungen sofort und erhalten w&auml;hrend der Entwicklung direktes Feedback.<\/p><h3 class=\"wp-block-heading\">2. Definieren Sie Routen mit dem App Router<\/h3><p class=\"wp-block-paragraph\">Jeder Ordner im <strong>app<\/strong>-Verzeichnis wird zu einer URL-Route. F&uuml;gen Sie einem Ordner eine <strong>page.js<\/strong>&ndash; oder <strong>page.tsx<\/strong>-Datei hinzu, wird unter dem entsprechenden Pfad eine Seite auf Ihrer Website verf&uuml;gbar.<\/p><p class=\"wp-block-paragraph\">Layouts fassen gemeinsame UI-Elemente f&uuml;r mehrere Seiten zusammen. Erstellen Sie eine <strong>layout.js<\/strong>-Datei, &uuml;bernehmen alle Seiten in diesem Ordner und seinen Unterordnern das Layout. So verwenden Sie eine einheitliche Navigation, Seitenleisten und Fu&szlig;zeilen, ohne Code zu duplizieren.<\/p><p class=\"wp-block-paragraph\">Dynamische Routensegmente erm&ouml;glichen variable URLs. Ein Ordner namens <strong>[id]<\/strong> steht f&uuml;r einen beliebigen Wert an dieser Position in der URL. So verarbeitet <strong>app\/blog\/[slug]\/page.js<\/strong> beispielsweise <strong>\/blog\/mein-erster-beitrag<\/strong>, <strong>\/blog\/ein-weiterer-artikel<\/strong> und alle anderen Blog-URLs automatisch. Der Wert von <strong>slug<\/strong> steht innerhalb Ihrer Komponente als Prop zur Verf&uuml;gung.<\/p><h3 class=\"wp-block-heading\">3. W&auml;hlen Sie eine Rendering-Strategie<\/h3><p class=\"wp-block-paragraph\">Jede Route Ihrer Anwendung kann eine andere Rendering-Methode verwenden. Eine Startseite kann SSG nutzen, um sofort zu laden. Eine Produktseite kann ISR verwenden, damit die Preise aktuell bleiben. Ein Benutzer-Dashboard kann mit SSR personalisierte Inhalte bereitstellen.<\/p><p class=\"wp-block-paragraph\">Welche Methode zum Einsatz kommt, steuern Sie &uuml;ber den Datenabruf und die Caching-Konfiguration der jeweiligen Route. Server Components werden standardm&auml;&szlig;ig statisch gerendert und zwischengespeichert, sofern keine dynamischen Daten oder abweichenden Cache-Einstellungen verwendet werden. F&uuml;gen Sie einen Datenabruf mit <strong>{ cache: &lsquo;no-store&rsquo; }<\/strong> hinzu, verwendet die Route SSR. Legen Sie einen <strong>revalidate<\/strong>-Wert fest, verwendet sie ISR.<\/p><p class=\"wp-block-paragraph\">Durch diese Flexibilit&auml;t k&ouml;nnen Sie f&uuml;r jede Route die passende Methode w&auml;hlen.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Expert tip                <\/p>\n            <\/div>\n            <p class=\"protip__content\"><strong>So funktioniert Caching in Next.js:<\/strong> Caching bestimmt ma&szlig;geblich, wie Next.js die Leistung optimiert. Standardm&auml;&szlig;ig werden serverseitig abgerufene Daten zwischengespeichert. Verwenden Sie <strong>cache: 'force-cache'<\/strong>, um Daten f&uuml;r mehrere Anfragen wiederzuverwenden, <strong>cache: 'no-store'<\/strong>, um bei jeder Anfrage aktuelle Daten abzurufen, oder legen Sie einen <strong>revalidate<\/strong>-Wert fest, um zwischengespeicherte Daten nach einem bestimmten Zeitplan zu aktualisieren. Viele Leistungsprobleme entstehen durch Cache-Einstellungen und nicht durch die gew&auml;hlte Rendering-Methode. Daher lohnt es sich, sich fr&uuml;hzeitig mit dem Caching vertraut zu machen.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\">4. Rufen Sie Daten auf dem Server oder Client ab<\/h3><p class=\"wp-block-paragraph\">Server Components k&ouml;nnen Daten direkt abrufen. Eine API-Schicht ist daf&uuml;r nicht erforderlich. Schreiben Sie asynchrone Funktionen, die Datenbanken oder externe APIs aufrufen. Die Daten werden dann auf dem Server geladen, bevor der HTML-Code den Browser erreicht. Sensible Logik wie Datenbankabfragen und API-Schl&uuml;ssel gelangt dadurch nicht auf den Client.<\/p><p class=\"wp-block-paragraph\">Clientseitiger Datenabruf eignet sich f&uuml;r Daten, die von Benutzerinteraktionen abh&auml;ngen. Dazu geh&ouml;ren Suchergebnisse w&auml;hrend der Eingabe, Echtzeit-Benachrichtigungen oder Inhalte, die beim Scrollen geladen werden. Diese Daten ruft der Browser erst nach dem Laden der Seite ab. React-Hooks wie <strong>useEffect<\/strong> oder Bibliotheken wie SWR eignen sich daf&uuml;r gut.<\/p><p class=\"wp-block-paragraph\">Caching und Revalidierung verkn&uuml;pfen beide Strategien. Das Framework speichert serverseitig abgerufene Daten standardm&auml;&szlig;ig im Cache und erm&ouml;glicht es Ihnen, Revalidierungsintervalle festzulegen, um die Aktualit&auml;t zu steuern. So bestimmen Sie genau, wie aktuell die einzelnen Daten sein m&uuml;ssen.<\/p><h3 class=\"wp-block-heading\">5. Implementieren Sie Backend-Logik mit Route Handlern<\/h3><p class=\"wp-block-paragraph\">Mit Route Handlern k&ouml;nnen Sie API-Endpunkte direkt in Ihrem Next.js-Projekt erstellen. Eine Datei unter <strong>app\/api\/newsletter\/route.js<\/strong> erstellt automatisch einen <strong>\/api\/newsletter<\/strong>-Endpunkt, der HTTP-Anfragen verarbeitet.<\/p><p class=\"wp-block-paragraph\">Verwenden Sie Route Handler, um Formular&uuml;bermittlungen zu verarbeiten, eine Datenbank anzubinden, Webhook-Callbacks von Zahlungsanbietern zu verarbeiten oder Anfragen an APIs von Drittanbietern weiterzuleiten. Jeder Handler exportiert Funktionen, die nach den jeweiligen HTTP-Methoden benannt sind: <strong>GET, POST, PUT, DELETE<\/strong>. Dadurch bleibt die Struktur &uuml;bersichtlich und vorhersehbar.<\/p><p class=\"wp-block-paragraph\">Bei den meisten Projekten ist dadurch kein separater Backend-Server erforderlich. Sie k&ouml;nnen die Formularverarbeitung, Datenspeicherung und externe Integrationen zusammen mit Ihrem Frontend-Code in demselben Projekt verwalten.<\/p><h3 class=\"wp-block-heading\">6. Erstellen Sie den Build und stellen Sie die Anwendung bereit<\/h3><p class=\"wp-block-paragraph\">Mit <strong>next build<\/strong> kompilieren Sie Ihre Anwendung f&uuml;r die Produktionsumgebung. Dazu geh&ouml;ren serverseitig gerenderte Seiten, vorab erstellte statische Seiten, optimierte JavaScript-Bundles und verarbeitete Assets.<\/p><p class=\"wp-block-paragraph\">F&uuml;r eine m&ouml;glichst einfache Bereitstellung k&ouml;nnen Sie Vercel verwenden, das Unternehmen hinter Next.js. Verbinden Sie Ihr Repository, und jeder Push l&ouml;st automatisch eine Bereitstellung mit integriertem CDN, Analysetools und Serverless Functions aus. Alternativ k&ouml;nnen Sie jede Hosting-Plattform verwenden, die Node.js unterst&uuml;tzt.<\/p><p class=\"wp-block-paragraph\">W&auml;hrend des Builds erfolgt die Optimierung f&uuml;r den Produktionseinsatz automatisch. JavaScript wird minimiert, Bilder werden komprimiert, nicht verwendeter Code wird entfernt und Seiten werden in m&ouml;glichst kleine Bundles aufgeteilt. Das Ergebnis ist eine Anwendung, die schnell l&auml;dt und f&uuml;r die Skalierung bereit ist.<\/p><h2 class=\"wp-block-heading\" id=\"h-anwendungsbereiche-von-next-js\">Anwendungsbereiche von Next.js<\/h2><p class=\"wp-block-paragraph\">Next.js kommt bei zahlreichen Arten von Anwendungen zum Einsatz, da sich sein Rendering-Modell an unterschiedliche Inhalte und Traffic-Muster anpasst.<\/p><div class=\"wp-block-image wp-block-image aligncenter size-large\">\n<figure class=\"wp-lightbox-container\" data-wp-context='{\"imageId\":\"6aa2a45e74421\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6aa2a45e74421\"><img decoding=\"async\" width=\"1024\" height=\"572\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anwendungsbereiche.jpg\/w=1024,h=1024,fit=scale-down\" alt=\"Anwendungstypen, die Sie mit Next.js erstellen k&ouml;nnen\" class=\"wp-image-15050\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anwendungsbereiche.jpg\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anwendungsbereiche.jpg\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2026\/09\/Next.js-Anwendungsbereiche.jpg\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Statische Marketing-Websites<\/strong> eignen sich besonders gut f&uuml;r Next.js. Erstellen Sie die Seiten einmal w&auml;hrend der Bereitstellung und liefern Sie sie anschlie&szlig;end &uuml;ber ein globales CDN aus, um weltweit nahezu sofortige Ladezeiten zu erreichen. Startups und SaaS-Unternehmen nutzen diesen Ansatz f&uuml;r Landingpages, die schnell laden und gute Rankings erzielen.<\/p><p class=\"wp-block-paragraph\"><strong>E-Commerce-Plattformen<\/strong> profitieren von ISR. Produktseiten bleiben f&uuml;r kurze Ladezeiten im Cache, werden jedoch regelm&auml;&szlig;ig revalidiert, um &Auml;nderungen an Lagerbest&auml;nden und Preisen sowie neue Bewertungen abzubilden. Wenn Sie bei null anfangen, k&ouml;nnen Sie mit einer solchen Konfiguration einen <a href=\"\/de\/tutorials\/e-commerce-website-erstellen\/\">Online-Shop erstellen<\/a> und ihn mit wachsendem Sortiment skalieren.<\/p><p class=\"wp-block-paragraph\"><strong>SaaS-Dashboards<\/strong> nutzen serverseitiges Rendering f&uuml;r personalisierte, datenintensive Benutzeroberfl&auml;chen. Jeder Benutzer sieht seine eigenen Daten, die auf dem Server gerendert werden. Die Seite wird vollst&auml;ndig geladen angezeigt, ohne dass zun&auml;chst ein leerer Bildschirm erscheint, w&auml;hrend JavaScript die Daten abruft.<\/p><p class=\"wp-block-paragraph\"><strong>Websites auf Basis eines Headless-CMS<\/strong> kombinieren Next.js mit Content-Management-Systemen (CMS) wie WordPress, Contentful oder Sanity. Redakteure verwalten die Inhalte &uuml;ber das <a href=\"\/de\/tutorials\/was-ist-ein-cms\/\">CMS<\/a>. Next.js ruft sie w&auml;hrend des Builds oder bei jeder Anfrage ab und generiert daraus optimierte Seiten. Dadurch bleiben Inhaltserstellung und Bereitstellung klar voneinander getrennt.<\/p><p class=\"wp-block-paragraph\"><strong>Unternehmensanwendungen<\/strong> setzen auf Next.js, um hohen Traffic zu bew&auml;ltigen und f&uuml;r verschiedene Bereiche unterschiedliche Rendering-Strategien einzusetzen. Unternehmen wie Netflix, Uber, Nike und Spotify verwenden Next.js in der Produktion, vor allem f&uuml;r leistungskritische, &ouml;ffentlich zug&auml;ngliche Seiten, bei denen Geschwindigkeit und SEO direkten Einfluss auf den Umsatz haben.<\/p><h2 class=\"wp-block-heading\" id=\"h-was-sind-die-haufigsten-herausforderungen-bei-der-entwicklung-mit-next-js\">Was sind die h&auml;ufigsten Herausforderungen bei der Entwicklung mit Next.js?<\/h2><p class=\"wp-block-paragraph\"><strong>Die Wahl der richtigen Rendering-Strategie<\/strong> bereitet am h&auml;ufigsten Schwierigkeiten. Vier Optionen pro Seite k&ouml;nnen zun&auml;chst &uuml;berw&auml;ltigend wirken, und Entwickler entscheiden sich manchmal &bdquo;nur zur Sicherheit&ldquo; &uuml;berall f&uuml;r SSR.<\/p><p class=\"wp-block-paragraph\">Die Regel ist einfacher, als sie zun&auml;chst erscheint:<\/p><p class=\"wp-block-paragraph\">Verwenden Sie SSG, wenn Sie keine aktuellen Daten ben&ouml;tigen. Setzen Sie ISR ein, wenn sich die Daten regelm&auml;&szlig;ig &auml;ndern, und SSR, wenn sie in Echtzeit aktuell sein m&uuml;ssen. Verwenden Sie CSR nur f&uuml;r interaktive Bereiche, die nicht f&uuml;r Suchmaschinen indexiert werden m&uuml;ssen.<\/p><p class=\"wp-block-paragraph\"><strong>Die Abgrenzung zwischen Server und Client Components<\/strong> bereitet Entwicklern, die neu mit dem App Router arbeiten, h&auml;ufig Schwierigkeiten. Komponenten sind standardm&auml;&szlig;ig Server Components. Deshalb treten Fehler auf, wenn Sie ausschlie&szlig;lich im Browser verf&uuml;gbare Funktionen wie <strong>useState<\/strong> oder <strong>onClick<\/strong> verwenden, ohne <strong>&lsquo;use client&rsquo;<\/strong> hinzuzuf&uuml;gen. Verlagern Sie in diesem Fall die interaktive Logik in separate Client Components und belassen Sie den Datenabruf in Server Components.<\/p><p class=\"wp-block-paragraph\"><strong>Hydration-Fehler<\/strong> entstehen, wenn das vom Server generierte HTML nicht mit dem &uuml;bereinstimmt, was der Client rendert. H&auml;ufige Ursachen sind Browser-Erweiterungen, die das DOM ver&auml;ndern, bedingtes Rendering auf Grundlage von <strong>window<\/strong> oder <strong>localStorage<\/strong> sowie eine abweichende Datumsformatierung. Diese Fehler sind in der Regel &uuml;berschaubar und lassen sich beheben, sobald Sie das zugrunde liegende Muster erkennen.<\/p><p class=\"wp-block-paragraph\"><strong>Bereitstellung und Umgebungskonfiguration<\/strong> k&ouml;nnen au&szlig;erhalb von Vercel anspruchsvoll sein. Selbst gehostete Bereitstellungen ben&ouml;tigen eine korrekt konfigurierte Node.js-Umgebung. Funktionen wie ISR und <strong>proxy.ts<\/strong> k&ouml;nnen je nach Hosting-Plattform zus&auml;tzliche Einrichtungsschritte erfordern. Testen Sie Ihren Produktions-Build vor der Bereitstellung lokal mit <strong>next start<\/strong>, um die meisten Konfigurationsprobleme fr&uuml;hzeitig zu erkennen.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-stellen-sie-eine-next-js-anwendung-bereit\">Wie stellen Sie eine Next.js-Anwendung bereit?<\/h2><p class=\"wp-block-paragraph\">Eine Next.js-Anwendung stellen Sie bereit, indem Sie einen Produktions-Build erstellen und die Anwendung in einer Serverumgebung ausf&uuml;hren, die Node.js unterst&uuml;tzt.<\/p><p class=\"wp-block-paragraph\">Die Ausgabe von <strong>next build<\/strong> umfasst serverseitig gerenderte Seiten, vorab erstellte statische Assets und kompilierte API-Route-Handler und ist damit f&uuml;r den Einsatz in einer Produktionsumgebung bereit.<\/p><p class=\"wp-block-paragraph\">F&uuml;r das Hosting stehen Ihnen zwei wesentliche Optionen zur Verf&uuml;gung. Verwaltete Plattformen wie Vercel &uuml;bernehmen Serverkonfiguration, Skalierung und CDN-Verteilung automatisch. Verbinden Sie Ihr Repository, und stellen Sie die Anwendung mit einem einzigen Klick bereit. Ein Virtual Private Server (VPS) bietet Ihnen dagegen vollst&auml;ndige Kontrolle &uuml;ber die Node.js-Laufzeitumgebung, das Betriebssystem und die Serverkonfiguration.<\/p><p class=\"wp-block-paragraph\">Eine Next.js-Anwendung mit SSR oder ISR ben&ouml;tigt persistente Node.js-Prozesse und eine entsprechende Serverkonfiguration. VPS-Hosting eignet sich daf&uuml;r gut, da Sie die Umgebung vollst&auml;ndig kontrollieren. Rein statische Builds, die ausschlie&szlig;lich SSG verwenden, sind flexibler. Die vorab erstellten Dateien k&ouml;nnen &uuml;ber jedes CDN oder jeden Anbieter f&uuml;r statische Dateien ausgeliefert werden, ohne dass Node.js ausgef&uuml;hrt werden muss.<\/p><p class=\"wp-block-paragraph\">Vor der Bereitstellung m&uuml;ssen Sie die Serverumgebung korrekt konfigurieren. Ein ordnungsgem&auml;&szlig; <a href=\"\/de\/tutorials\/vserver-einrichten\/\">eingerichteter VPS<\/a> sorgt daf&uuml;r, dass Ihre Node.js-Prozesse zuverl&auml;ssig ausgef&uuml;hrt werden und Ihre Anwendung auch bei hohem Traffic verf&uuml;gbar bleibt.<\/p><p class=\"wp-block-paragraph\">Die Wahl des Hostings wirkt sich darauf aus, wie Ihre Besucher die Leistung, Skalierbarkeit und Zuverl&auml;ssigkeit Ihrer Website wahrnehmen. Sobald Ihre Serverumgebung eingerichtet ist, k&ouml;nnen Sie Ihr Next.js-Projekt bereitstellen und mit der Entwicklung skalierbarer, produktionsreifer Webanwendungen beginnen.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/de\/vps-server\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-VPS-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-3556\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-VPS-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-VPS-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/02\/DE-VPS-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Next.js ist ein Open-Source-React-Framework zur Entwicklung produktionsreifer, serverseitig gerenderter Full-Stack-Webanwendungen. Es wird von Vercel entwickelt und gepflegt und erweitert React um integriertes Routing, verschiedene Rendering-Strategien, Backend-Funktionen und Leistungsoptimierungen. Bei vielen Anwendungen k&ouml;nnen Sie damit sowohl die Frontend- als auch die Backend-Logik in einer einzigen Codebasis verwalten. Die Architektur des Frameworks basiert auf Node.js und unterst&uuml;tzt [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/was-ist-nextjs\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":14985,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Was ist Next.js? Funktionen und Einsatzbereiche erkl\u00e4rt","rank_math_description":"Was ist Next.js und wie funktioniert es? Erfahren Sie, wie das React-Framework Rendering, Routing und Backend-Funktionen f\u00fcr moderne Web-Apps kombiniert.","rank_math_focus_keyword":"was ist next.js","footnotes":""},"categories":[83,56],"tags":[],"class_list":["post-14990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frameworks","category-web-app"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-nextjs\/","default":1},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-nextjs\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-nextjs\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/was-ist-nextjs","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/14990","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=14990"}],"version-history":[{"count":12,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/14990\/revisions"}],"predecessor-version":[{"id":15051,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/14990\/revisions\/15051"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media\/14985"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=14990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=14990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=14990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}