{"id":58798,"date":"2023-02-13T09:59:56","date_gmt":"2023-02-13T08:59:56","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=58798&#038;preview=true&#038;preview_id=58798"},"modified":"2023-07-27T11:07:04","modified_gmt":"2023-07-27T10:07:04","slug":"nextjs-vs-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/","title":{"rendered":"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb"},"content":{"rendered":"<p>An <a href=\"https:\/\/kinsta.com\/de\/blog\/javascript-bibliotheken\/\">JavaScript-Bibliotheken<\/a> und -Frameworks f\u00fcr moderne Webentwickler\/innen herrscht kein Mangel. Eine der am weitesten verbreiteten Bibliotheken ist <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-react-js\/\">React<\/a>, die Facebook (jetzt Meta) entwickelt hat, um funktionsreiche Anwendungen zu erstellen. React-Anwendungen werden traditionell in Webbrowsern ausgef\u00fchrt, aber das <a href=\"https:\/\/kinsta.com\/de\/blog\/next-js\/\">Next.js-Framework<\/a> erweitert die React-Funktionen \u00fcber die JavaScript-Laufzeitumgebung <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Node.js<\/a> auf die Serverseite.<\/p>\n<p>In diesem Artikel werfen wir einen Blick auf Next.js und React, damit du entscheiden kannst, ob sie f\u00fcr dein n\u00e4chstes Projekt geeignet sind.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Next.js und React: JavaScript auf dem n\u00e4chsten Level<\/h2>\n<p>Eine Umfrage von SlashData aus dem Jahr 2022 ergab, dass es weltweit mehr als 17 Millionen <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-javascript\/\">JavaScript-Programmierer\/innen<\/a> gibt. Damit liegt JavaScript an der Spitze einer Gruppe, zu der auch beliebte Sprachen wie Python und Java geh\u00f6ren. JavaScript kann sowohl auf der Client- als auch auf der Serverseite eingesetzt werden, und diese Vielseitigkeit bedeutet, dass Entwickler\/innen mit einer einzigen Programmiersprache komplette Anwendungen erstellen k\u00f6nnen.<\/p>\n<figure style=\"width: 960px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/programming-language-community-sizes-worldwide-2022.png\" alt=\" Eine Grafik, die die Anzahl der Programmierer\/innen zeigt, die verschiedene Sprachen verwenden, zeigt, dass sich viele \u00fcber Next.js vs. React Gedanken machen.\" width=\"960\" height=\"908\"><figcaption class=\"wp-caption-text\">Slash\/Data-Umfrage zu den Sprachen, die von Programmierern im Jahr 2022 verwendet werden. (Quelle: <a href=\"https:\/\/www.statista.com\/statistics\/1241923\/worldwide-software-developer-programming-language-communities\/\" target=\"_blank\" rel=\"noopener noreferrer\">Statista<\/a>)<\/figcaption><\/figure>\n<p>Die Einf\u00fchrung von JavaScript-Bibliotheken wie React und <a href=\"https:\/\/kinsta.com\/javascript\/#frameworks\">Frameworks<\/a> wie Next.js hat diese Entwicklung weiter vorangetrieben. Diese Bibliotheken und Frameworks bieten Funktionen, die die Integration von Frontend und Backend vereinfachen. Au\u00dferdem k\u00f6nnen Entwickler\/innen die JavaScript-Funktionen mit Paketmanagern wie <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-npm\/\">npm<\/a> (dem Node.js-Paketmanager) erweitern, um JavaScript-Bibliotheken und -Tools zu installieren. Diese Ressourcen bieten ausgefeilte Funktionen, die den Umfang des Codes, den du selbst schreiben musst, reduzieren.<\/p>\n<p>Die Erweiterbarkeit von JavaScript bedeutet, dass ein umfassendes Wissen \u00fcber die g\u00e4ngigsten Tools der Schl\u00fcssel zu deinem Erfolg als Webentwickler\/in ist.<\/p>\n<h2>Was ist Next.js?<\/h2>\n<p>Next.js wurde erstmals im Jahr 2016 von Vercel ver\u00f6ffentlicht und ist ein Open-Source-React-Framework, das die Bausteine f\u00fcr die Erstellung leistungsstarker <a href=\"https:\/\/kinsta.com\/de\/blog\/web-anwendungs-architektur\/\">Webanwendungen<\/a> liefert. Gro\u00dfe Unternehmen haben es seitdem \u00fcbernommen, darunter Twitch, TikTok und Uber, um nur einige von ihnen zu nennen.<\/p>\n<p>Next.js bietet eine der besten Entwicklererfahrungen f\u00fcr die Erstellung schneller, SEO-freundlicher Anwendungen. Im Folgenden findest du einige Funktionen von Next.js, die es zu einem au\u00dfergew\u00f6hnlichen Produktionsframework machen:<\/p>\n<ul>\n<li>Hybride Rendering-Funktionen<\/li>\n<li>Automatisches Code-Splitting<\/li>\n<li>Bildoptimierung<\/li>\n<li>Eingebaute Unterst\u00fctzung f\u00fcr CSS-Pr\u00e4prozessoren und CSS-in-JS-Bibliotheken<\/li>\n<li>Eingebautes Routing<\/li>\n<\/ul>\n<p>Diese Funktionen helfen Next.js-Entwicklern, viel Zeit bei der Konfiguration und beim Einsatz von Tools zu sparen. Du kannst direkt mit der Entwicklung deiner Anwendung beginnen, die Projekte wie die folgenden unterst\u00fctzen kann:<\/p>\n<ul>\n<li>E-Commerce-Shops<\/li>\n<li>Blogs<\/li>\n<li>Dashboards<\/li>\n<li>Single-Page-Anwendungen<\/li>\n<li>Interaktive Benutzeroberfl\u00e4chen<\/li>\n<li>Statische Websites<\/li>\n<\/ul>\n<h2>Was ist React?<\/h2>\n<p>React ist eine JavaScript-Bibliothek, mit der du dynamische Benutzeroberfl\u00e4chen erstellen kannst. Mit React Native kannst du nicht nur Weboberfl\u00e4chen erstellen, sondern auch mobile Anwendungen entwickeln.<\/p>\n<p>Einige Vorteile von React sind:<\/p>\n<ul>\n<li><strong>Verbesserte Leistung:<\/strong> Anstatt jede Komponente im DOM zu aktualisieren, verwendet React ein virtuelles DOM, um nur die ge\u00e4nderten Komponenten zu aktualisieren.<\/li>\n<li><strong>Starke Komponentenbasierung: <\/strong>Sobald du eine Komponente erstellt hast, kannst du sie immer wieder verwenden.<\/li>\n<li><strong>Einfaches Debugging:<\/strong> React-Anwendungen verwenden einen unidirektionalen Datenfluss &#8211; nur von Parent- zu Childkomponenten.<\/li>\n<\/ul>\n<h2>Next.js vs. React<\/h2>\n<p>Obwohl Entwickler\/innen Next.js und React oft f\u00fcr den gleichen Zweck verwenden, gibt es einige grundlegende Unterschiede zwischen den beiden.<\/p>\n<h3>Einfachheit der Nutzung<\/h3>\n<p>Der Einstieg in Next.js und React ist einfach. F\u00fcr beide brauchst du nur einzelne Befehle in deinem Terminal auszuf\u00fchren, und zwar mit <code>npx<\/code>, das Teil von <a href=\"https:\/\/kinsta.com\/de\/blog\/so-installierst-du-node-js\/\">npm f\u00fcr Node.js<\/a> ist.<\/p>\n<p>F\u00fcr Next.js lautet der einfachste Befehl:<\/p>\n<pre><code>npx create-next-app<\/code><\/pre>\n<p>Ohne zus\u00e4tzliche Argumente f\u00fcr <code>create-next-app<\/code> wird die Installation im interaktiven Modus durchgef\u00fchrt. Du wirst nach einem Projektnamen gefragt (der f\u00fcr das Projektverzeichnis verwendet wird) und ob du die Unterst\u00fctzung f\u00fcr TypeScript und den Code-Linter ESLint einbinden m\u00f6chtest.<\/p>\n<p>Es sieht in etwa so aus:<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/using-npx-to-create-next-app.png\" alt=\"Screenshot einer Next.js-Anwendung, die mit npx erstellt wird.\" width=\"1040\" height=\"467\"><figcaption class=\"wp-caption-text\">Erstellen einer Next.js-Anwendung im interaktiven Modus.<\/figcaption><\/figure>\n<p>Beim Initialisieren einer React-Instanz enth\u00e4lt der einfachste Befehl einen Namen f\u00fcr das Verzeichnis des Projekts:<\/p>\n<pre><code>npx create-react-app <strong>new-app<\/strong><\/code><\/pre>\n<p>Dadurch wird ein Ordner erstellt, der alle notwendigen Anfangskonfigurationen und Abh\u00e4ngigkeiten enth\u00e4lt:<\/p>\n<figure style=\"width: 1040px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/01\/using-npx-to-create-react-app.png\" alt=\"Screenshot eines React-Projekts, das mit npx erstellt wird.\" width=\"1040\" height=\"756\"><figcaption class=\"wp-caption-text\">Erstellen eines React-Projekts \u00fcber die Terminal-Befehlszeile.<\/figcaption><\/figure>\n<p>Beides macht den Einstieg leicht, aber denk daran, dass Next.js auf React aufbaut. Du kannst Next.js also nicht lernen, ohne vorher React zu kennen und zu verstehen, wie es funktioniert. Zum Gl\u00fcck ist React leicht zu erlernen und eignet sich hervorragend f\u00fcr Anf\u00e4nger.<\/p>\n<p>Es ist auch wichtig zu wissen, dass React relativ unstrukturiert ist. Du musst einen React-Router installieren und einrichten und entscheiden, wie du das Abrufen von Daten, die Optimierung von Bildern und das Aufteilen von Code handhaben willst. F\u00fcr diese Einrichtung musst du zus\u00e4tzliche Bibliotheken und Tools installieren und konfigurieren.<\/p>\n<p>Im Gegensatz dazu sind bei Next.js diese Tools bereits vorinstalliert und vorkonfiguriert. Mit Next.js dient jede Datei, die dem Ordner <code>pages<\/code> hinzugef\u00fcgt wird, automatisch als Route. Dank dieser eingebauten Unterst\u00fctzung ist es einfacher, t\u00e4glich mit Next.js zu arbeiten, sodass du sofort mit der Programmierung der Logik deiner Anwendung beginnen kannst.<\/p>\n\n<h2>Next.js und React-Funktionen<\/h2>\n<p>Da Next.js auf React basiert, teilen sich die beiden einige Funktionen. Next.js geht jedoch noch einen Schritt weiter und bietet zus\u00e4tzliche Funktionen wie Routing, Code-Splitting, Pre-Rendering und API-Unterst\u00fctzung. Diese Funktionen musst du bei der Verwendung von React selbst konfigurieren.<\/p>\n<h3>Datenabrufe<\/h3>\n<p>React rendert Daten auf der Client-Seite. Der Server sendet statische Dateien an den Browser, der dann die Daten aus den APIs abruft, um die Anwendung zu f\u00fcllen. Dieser Prozess verringert die Leistung der App und sorgt f\u00fcr ein schlechtes Nutzererlebnis, da die App langsam l\u00e4dt. Next.js l\u00f6st dieses Problem durch Pre-Rendering.<\/p>\n<p>Beim Pre-Rendering t\u00e4tigt der Server die notwendigen API-Aufrufe und holt die Daten ab, bevor er die Anwendung an den Browser sendet. So erh\u00e4lt der Browser fertig gerenderte Webseiten.<\/p>\n<p>Pre-Rendering kann sich auf Static Site Generation (SSG) oder Server-Side Rendering (SSR) beziehen. Bei SSG werden die HTML-Seiten zum Zeitpunkt der Erstellung generiert und f\u00fcr mehrere Anfragen wiederverwendet. Next.js kann <a href=\"https:\/\/kinsta.com\/de\/blog\/was-ist-html\/\">HTML-Seiten<\/a> mit oder ohne Daten erzeugen.<\/p>\n<p>Im Folgenden siehst du ein Beispiel, wie Next.js Seiten ohne Daten generiert:<\/p>\n<pre><code class=\"language-js\">function App() {\n  return &lt;div&gt;Welcome&lt;\/div&gt;\n}\nexport default App<\/code><\/pre>\n<p>F\u00fcr statische Seiten, die externe Daten verbrauchen, verwendest du die Funktion <code>getStaticProps()<\/code>. Sobald du <code>getStaticProps()<\/code> aus einer Seite exportierst, rendert Next.js die Seite mit den zur\u00fcckgegebenen Props vor. Diese Funktion wird immer auf dem Server ausgef\u00fchrt, also verwende <code>getStaticProps()<\/code>, wenn die Daten, die die Seite verwendet, zum Zeitpunkt der Erstellung verf\u00fcgbar sind. Du kannst sie zum Beispiel verwenden, um Blogposts aus einem CMS abzurufen.<\/p>\n<pre><code class=\"language-js\">const Posts= ({ posts }) =&gt; {\n    return (\n        &lt;div className={styles.container}&gt;\n            {posts.map((post, index) =&gt; (\n                \/\/ render each post\n            ))}\n        &lt;\/div&gt;\n    );\n  };\n\nexport const getStaticProps = async () =&gt; {\n    const posts = getAllPosts();\n    return {\n        props: { posts },\n    };\n};<\/code><\/pre>\n<p>In Situationen, in denen die Seitenpfade von externen Daten abh\u00e4ngen, verwendest du die Funktion <code>getStaticPaths()<\/code>. Um also einen Pfad auf der Grundlage der Beitrags-ID zu erstellen, exportiere die <code>getStaticPaths()<\/code> aus der Seite.<\/p>\n<p>Du k\u00f6nntest zum Beispiel <code>getStaticPaths()<\/code> aus <strong>pages\/posts\/[id].js<\/strong> exportieren, wie unten gezeigt.<\/p>\n<pre><code class=\"language-js\">export getStaticPaths = async()  =&gt; {\n  \/\/ Get all the posts\n  const posts = await getAllPosts()\n\n  \/\/ Get the paths you want to pre-render based on posts\n  const paths = posts.map((post) =&gt; ({\n    params: { id: post.id },\n  }))\n  return { paths, fallback: false }\n}<\/code><\/pre>\n<p><code>getStaticPaths()<\/code> wird oft mit <code>getStaticProps()<\/code> gepaart. In diesem Beispiel w\u00fcrdest du <code>getStaticProps()<\/code> verwenden, um die Details der ID im Pfad abzurufen.<\/p>\n<pre><code class=\"language-js\">export const getStaticProps = async ({ params }) =&gt; {\n    const post = await getSinglePost(params.id);\n    return {\n        props: { post }\n    };\n};<\/code><\/pre>\n<p>In SSR werden die Daten zum gew\u00fcnschten Zeitpunkt abgerufen und an den Browser gesendet. Um SSR zu nutzen, exportierst du die Funktion <code>getServerSide()<\/code> props von der Seite, die du rendern willst. Der Server ruft diese Funktion bei jeder Anfrage auf, was SSR f\u00fcr Seiten n\u00fctzlich macht, die dynamische Daten verbrauchen.<\/p>\n<p>Du kannst sie zum Beispiel verwenden, um Daten von einer Nachrichten-API abzurufen.<\/p>\n<pre><code class=\"language-js\">const News = ({ data }) =&gt; {\n    return (\n        \/\/ render data\n    );\n  };\n\nexport async function getServerSideProps() {\n    const res = await fetch(`https:\/\/app-url\/data`)\n    const data = await res.json()\n    return { props: { data } }\n}<\/code><\/pre>\n<p>Die Daten werden bei jeder Anfrage abgerufen und \u00fcber Props an die Nachrichtenkomponente \u00fcbergeben.<\/p>\n<h3>Code-Splitting<\/h3>\n<p>Code-Splitting bedeutet, dass der Code in Teile aufgeteilt wird, die der Browser bei Bedarf laden kann. Dadurch wird die Menge des Codes, die beim ersten Laden an den Browser gesendet wird, reduziert, da der Server nur das sendet, was der Nutzer braucht. Bundler wie Webpack, Rollup und Browserify unterst\u00fctzen Code-Splitting in React.<\/p>\n<p>Next.js unterst\u00fctzt Code-Splitting von Haus aus.<\/p>\n<p>Mit Next.js wird jede Seite in Code gesplittet, und das Hinzuf\u00fcgen von Seiten zur Anwendung erh\u00f6ht nicht die Gr\u00f6\u00dfe des Bundles. Next.js unterst\u00fctzt auch dynamische Importe, die es dir erm\u00f6glichen, JavaScript-Module zu importieren und sie w\u00e4hrend der Laufzeit dynamisch zu laden. Dynamische Importe tragen zu schnelleren Seitengeschwindigkeiten bei, da die Pakete nur langsam geladen werden.<\/p>\n<p>In der <strong>Home-Komponente<\/strong> unten zum Beispiel wird der Server die Hero-Komponente nicht in das erste Bundle aufnehmen.<\/p>\n<pre><code class=\"language-js\">const DynamicHero = dynamic(() =&gt; import('..\/components\/Hero'), {\n  suspense: true,\n})\n\nexport default function Home() {\n  return (\n    &lt;Suspense fallback={`Loading...`}&gt;\n      &lt;DynamicHero \/&gt;\n    &lt;\/Suspense&gt;\n  )\n}<\/code><\/pre>\n<p>Stattdessen wird das Fallback-Element der Suspense gerendert, bevor die Hero-Komponente geladen wird.<\/p>\n<h3>API-Unterst\u00fctzung in Next.js vs. React<\/h3>\n<p>Die Next.js API-Routing-Funktion erm\u00f6glicht es dir, Backend- und Frontend-Code in derselben Codebasis zu schreiben. Jede Seite, die im Ordner <strong>\/pages\/api\/<\/strong> gespeichert ist, wird auf die Route <strong>\/api\/*<\/strong> abgebildet und von Next.js wie ein <a href=\"https:\/\/kinsta.com\/de\/blog\/api-endpunkt\/\">API-Endpunkt<\/a> behandelt.<\/p>\n<p>So kannst du zum Beispiel eine API-Route <strong>pages\/api\/user.js<\/strong> erstellen, die den Namen des aktuellen Benutzers zur\u00fcckgibt:<\/p>\n<pre><code class=\"language-js\">export default function user(req, res) {\n    res.status(200).json({ username: 'Jane' });\n}<\/code><\/pre>\n<p>Wenn du die URL <strong>https:\/\/app-url\/api\/user<\/strong> aufrufst, siehst du das Objekt username.<\/p>\n<pre><code class=\"language-json\">{\n        username: 'Jane'\n}<\/code><\/pre>\n<p>API-Routen sind hilfreich, wenn du die URL eines Dienstes, auf den du zugreifst, verschleiern oder Umgebungsvariablen geheim halten willst, ohne eine ganze Backend-Anwendung zu programmieren.<\/p>\n<h3>Leistung<\/h3>\n<p>Next.js ist zweifelsohne \u00fcberlegen, wenn es darum geht, leistungsf\u00e4higere Apps mit einem vereinfachten Prozess zu erstellen. SSR und SSG Next.js-Anwendungen sind leistungsf\u00e4higer als React-Anwendungen mit Client-Side-Rendering (CSR). Da Next.js die Daten auf dem Server abruft und alles, was der Browser zum Rendern braucht, sendet, sind keine Datenabrufe bei APIs mehr n\u00f6tig. Das bedeutet schnellere Ladezeiten.<\/p>\n<p>Au\u00dferdem unterst\u00fctzt Next.js client-seitiges Routing. Der Browser muss nicht jedes Mal Daten vom Server abrufen, wenn ein Nutzer zu einer anderen Route navigiert. Au\u00dferdem erm\u00f6glicht die Next.js-Bildkomponente eine automatische Bildoptimierung. Bilder werden nur dann geladen, wenn sie in den Viewport gelangen. Wenn m\u00f6glich, liefert Next.js auch Bilder in modernen Formaten wie <a href=\"https:\/\/kinsta.com\/de\/blog\/webp\/#what-is-webp\">WebP<\/a>.<\/p>\n<p>Next.js bietet auch Optimierungen f\u00fcr Schriftarten, intelligentes Prefetching von Routen und Optimierungen f\u00fcr die B\u00fcndelung. Diese Optimierungen sind in React nicht automatisch verf\u00fcgbar.<\/p>\n<h3>Support<\/h3>\n<p>Da es React schon l\u00e4nger gibt als Next.js, verf\u00fcgt es \u00fcber eine gr\u00f6\u00dfere Community. Allerdings \u00fcbernehmen viele React-Entwickler\/innen Next.js, so dass die Community stetig w\u00e4chst. Entwickler\/innen finden leichter bestehende L\u00f6sungen f\u00fcr Probleme, auf die sie sto\u00dfen, als dass sie L\u00f6sungen von Grund auf neu entwickeln m\u00fcssen.<\/p>\n<p>Next.js verf\u00fcgt au\u00dferdem \u00fcber eine hervorragende Dokumentation mit umfassenden und leicht verst\u00e4ndlichen Beispielen. Trotz seiner Beliebtheit ist die Dokumentation von React nicht so \u00fcbersichtlich.<\/p>\n\n<h2>Zusammenfassung<\/h2>\n<p>Die Entscheidung zwischen Next.js und React h\u00e4ngt von den Anforderungen der Anwendung ab.<\/p>\n<p>Next.js erweitert die F\u00e4higkeiten von React, indem es Strukturen und Werkzeuge zur Verf\u00fcgung stellt, die die Leistung verbessern. Diese Werkzeuge, wie Routing, Code-Splitting und Bildoptimierung, sind in Next.js integriert, so dass Entwickler\/innen nichts manuell konfigurieren m\u00fcssen. Dank dieser Funktionen ist Next.js einfach zu bedienen und die Entwickler k\u00f6nnen sofort mit der Programmierung der Gesch\u00e4ftslogik beginnen.<\/p>\n<p>Aufgrund der verschiedenen Rendering-Optionen eignet sich Next.js f\u00fcr serverseitig gerenderte Anwendungen oder f\u00fcr Anwendungen, die statische Generierung und Node.js-Server-seitiges Rendering kombinieren. Dank der Optimierungsfunktion von Next.js ist es au\u00dferdem perfekt f\u00fcr Websites, die schnell sein m\u00fcssen, wie E-Commerce-Shops.<\/p>\n<p>React ist eine JavaScript-Bibliothek, mit der du robuste Frontend-Anwendungen erstellen und skalieren kannst. Ihre Syntax ist einfach, besonders f\u00fcr Entwickler\/innen mit JavaScript-Kenntnissen. Au\u00dferdem hast du die Kontrolle \u00fcber die Werkzeuge, die du in deiner Anwendung verwendest und wie du sie konfigurierst.<\/p>\n<p>Planst du deine eigene weltbeherrschende Anwendung? Informiere dich \u00fcber Kinstas Ansatz f\u00fcr das <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">Hosting von Node.js-Anwendungen<\/a> f\u00fcr Dienste, die React und Next.js unterst\u00fctzen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An JavaScript-Bibliotheken und -Frameworks f\u00fcr moderne Webentwickler\/innen herrscht kein Mangel. Eine der am weitesten verbreiteten Bibliotheken ist React, die Facebook (jetzt Meta) entwickelt hat, um funktionsreiche &#8230;<\/p>\n","protected":false},"author":117,"featured_media":59024,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[951,975],"class_list":["post-58798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-javascript-frameworks","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb\" \/>\n<meta property=\"og:description\" content=\"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-13T08:59:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-27T10:07:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salman Ravoof\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\" \/>\n<meta name=\"twitter:creator\" content=\"@salmanravoof\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salman Ravoof\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\"},\"author\":{\"name\":\"Salman Ravoof\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\"},\"headline\":\"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb\",\"datePublished\":\"2023-02-13T08:59:56+00:00\",\"dateModified\":\"2023-07-27T10:07:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\"},\"wordCount\":1970,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\",\"name\":\"Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\",\"datePublished\":\"2023-02-13T08:59:56+00:00\",\"dateModified\":\"2023-07-27T10:07:04+00:00\",\"description\":\"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png\",\"width\":1460,\"height\":730,\"caption\":\"Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript-Frameworks\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987\",\"name\":\"Salman Ravoof\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g\",\"caption\":\"Salman Ravoof\"},\"description\":\"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.\",\"sameAs\":[\"https:\/\/salmanravoof.com\",\"https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/\",\"https:\/\/x.com\/salmanravoof\"],\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb - Kinsta\u00ae","description":"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/","og_locale":"de_DE","og_type":"article","og_title":"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb","og_description":"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.","og_url":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-02-13T08:59:56+00:00","article_modified_time":"2023-07-27T10:07:04+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","type":"image\/png"}],"author":"Salman Ravoof","twitter_card":"summary_large_image","twitter_description":"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","twitter_creator":"@salmanravoof","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Salman Ravoof","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/"},"author":{"name":"Salman Ravoof","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987"},"headline":"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb","datePublished":"2023-02-13T08:59:56+00:00","dateModified":"2023-07-27T10:07:04+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/"},"wordCount":1970,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/","url":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/","name":"Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","datePublished":"2023-02-13T08:59:56+00:00","dateModified":"2023-07-27T10:07:04+00:00","description":"Du fragst dich, wie Next.js und React in die JavaScript-Landschaft passen? Wir werfen einen Blick auf diese Tools zur Erstellung leistungsstarker Websites.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/02\/nextjs-vs-react.png","width":1460,"height":730,"caption":"Next.js vs. React? Es ist eine Partnerschaft, kein Wettbewerb"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/nextjs-vs-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"JavaScript-Frameworks","item":"https:\/\/kinsta.com\/de\/thema\/javascript-frameworks\/"},{"@type":"ListItem","position":3,"name":"Next.js gegen React? Es ist eine Partnerschaft, kein Wettbewerb"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/9cafd2eedd617e640eeea4cf3a5fd987","name":"Salman Ravoof","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0c5885f75cb78473fb7408e5e49ad190?s=96&d=mm&r=g","caption":"Salman Ravoof"},"description":"Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.","sameAs":["https:\/\/salmanravoof.com","https:\/\/www.linkedin.com\/in\/salman-ravoof-5a749133\/","https:\/\/x.com\/salmanravoof"],"url":"https:\/\/kinsta.com\/de\/blog\/author\/salmanravoof\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/117"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=58798"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58798\/revisions"}],"predecessor-version":[{"id":64216,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/58798\/revisions\/64216"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/translations\/dk"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/58798\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/59024"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=58798"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=58798"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=58798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}