Next.js

Kurz erklärt: React vs. Next.js

React ist eine Bibliothek, mit der Sie Benutzeroberflächen aus Komponenten bauen. React legt aber nicht fest, wie Routing, Rendering, Datenladen oder SEO-Rendering gelöst werden.

Next.js ist ein Framework auf Basis von React, das genau diese Fragen beantwortet und eine klare Projektstruktur mitbringt. Im Alltag bedeutet das: weniger Eigenbau, mehr Standard, bessere Defaults.

Warum Next.js für Websites und SEO so interessant ist

Für viele Projekte ist Next.js attraktiv, weil es mehrere Rendering-Strategien sauber unterstützt:

• SSR (Server-Side Rendering): HTML wird pro Request am Server gerendert.
• SSG (Static Site Generation): Seiten werden beim Build als statisches HTML erzeugt.
• ISR (Incremental Static Regeneration): Statische Seiten werden im Betrieb aktualisiert, ohne Full Rebuild.
• Hybrid-Ansatz: pro Route die passende Strategie.

Für SEO ist das wichtig, weil Suchmaschinen Inhalte zuverlässig als HTML erhalten, statt auf clientseitiges Rendering angewiesen zu sein.

Rendering-Modelle: wann nutzt man was?

SSR (Server-Side Rendering)

Gut für:

• Inhalte, die pro Nutzer oder pro Request variieren
• Dashboards, Login-Bereiche, personalisierte Daten
• Seiten, die immer aktuell sein müssen

Risiko:

• höhere Serverlast
• TTFB kann steigen, wenn Backend langsam ist

SSG (Static Site Generation)

Gut für:

• Marketing-Seiten
• Glossar, Blog, Hilfe-Bereich
• Landingpages mit seltenen Änderungen

Vorteil:

• sehr schnell, oft beste Core Web Vitals
• ideal für CDN-Auslieferung

ISR (Incremental Static Regeneration)

Gut für:

• Content, der regelmäßig aktualisiert wird
• große Seiten mit vielen Unterseiten
• E-Commerce Kategorien, Magazin-Seiten

Vorteil:

• kombiniert Speed von SSG mit Aktualität

Typische Einsatzfälle für Next.js

• SEO-starke Unternehmenswebsites
• Content-Plattformen mit Blog und Glossar
• E-Commerce (Shop-Frontend, Headless Commerce)
• SaaS und Webapps mit Login
• internationale Websites mit mehreren Sprachen

Performance: was Next.js automatisch gut kann

Next.js bringt sinnvolle Standards mit, die Performance vereinfachen:

• Route-basiertes Code-Splitting
• Optimierung und Lazy Loading von Bildern
• gute Caching- und Deployment-Patterns (je nach Hosting)
• einfache Integration von CDN und Edge

Wichtig: Automatik ersetzt kein sauberes Setup. Tracking, Third-Party Skripte, große Bilder und unkontrolliertes CSS können jede Next.js Seite ausbremsen.

SEO in Next.js: die wichtigsten Punkte

1) Meta-Tags pro Seite sauber setzen

Je Seite sollten Title, Description, Canonical und Open Graph stimmen.

export const metadata = {
  title: "Next.js Agentur: schnelle Websites mit SEO-Fokus",
  description: "Wir bauen Next.js Websites mit hoher Performance, sauberem Code und klarem SEO-Setup."
};

2) Saubere Indexierbarkeit sicherstellen

• keine versehentlichen noindex Header oder Meta-Tags
• robots.txt korrekt
• sinnvolle Canonicals
• Sitemap aktuell und vollständig

3) Strukturierte Daten dort einsetzen, wo sie Sinn ergeben

Beispiele:

• Article Schema für Blogposts
• FAQ Schema für FAQ Sektionen
• BreadcrumbList für Navigation

4) Interne Verlinkung und Routing

• sprechende URLs
• stabile Slugs
• 301 Redirects bei URL-Änderungen
• keine Duplicate Content Varianten durch Parameter

Datenquellen: Headless CMS und APIs

Next.js wird häufig mit Headless CMS kombiniert, weil das gut zu SSG/ISR passt.

Typische Quellen:

• Headless CMS (Content, Blog, Glossar)
• PIM/ERP (Produkte)
• CRM (Leads)
• eigene REST oder GraphQL APIs

Das Ziel ist eine klare Trennung: Content im CMS, Darstellung in Next.js, Daten per API.

Beispiel: Route mit SSG in der Praxis (vereinfacht)

export async function generateStaticParams() {
  const res = await fetch("https://example.com/api/posts");
  const posts = await res.json();
  return posts.map((p) => ({ slug: p.slug }));
}

export default async function Page({ params }) {
  const res = await fetch(`https://example.com/api/posts/${params.slug}`);
  const post = await res.json();

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </article>
  );
}

Hinweis: Das Beispiel zeigt das Prinzip. In echten Projekten achten wir zusätzlich auf Caching, Fehlerfälle, Sanitizing und strukturierte Daten.

Next.js im Vergleich: React SPA vs. Next.js

Häufige Stolpersteine in Next.js Projekten

• zu viele client components, obwohl serverseitig besser wäre
• Tracking und Widgets laden zu früh und bremsen INP
• Bilder ohne Größen und ohne Optimierung
• Content wird doppelt ausgeliefert (Duplicate Content durch URL-Varianten)
• fehlendes Redirect-Management bei Relaunch
• keine klare Entscheidung pro Route (SSG/SSR/ISR)

Checkliste: Next.js Setup mit SEO-Fokus

• Rendering-Strategie pro Seitentyp definiert
• Title und Description pro Seite sauber gepflegt
• Canonical, robots.txt, sitemap.xml korrekt
• strukturierte Daten dort, wo sie Nutzen haben
• Bilder optimiert und mit festen Dimensionen
• Third-Party Skripte reduziert und verzögert geladen
• Redirects sauber dokumentiert und umgesetzt
• Core Web Vitals gemessen und nachgebessert

Fazit

Next.js ist mehr als „React mit ein paar Extras“. Es ist ein Framework, das Rendering, Routing, Performance und SEO in eine robuste Struktur bringt. Für moderne Websites, Content-Projekte und skalierbare Webapps ist Next.js oft eine sehr gute Wahl, wenn Architektur, Tracking und Content-Setup sauber geplant werden.