Blöcke und Komponenten: Was einen neuen Markenauftritt übersteht

Jede Vorlage verspricht einfache Anpassung. Für eine neue Überschrift musst du dann doch mehrere Dateien durchsuchen. ShipAny Next vermeidet das mit einer Regel:

Eine Datei, die Übersetzungen liest, ist ein Block. Eine Datei, die alle Inhalte über Props erhält, ist eine Komponente.

Blöcke sind austauschbar

Blöcke liegen in src/blocks/ und sind direkt einsetzbare Seitenabschnitte wie <Hero />, <Pricing /> und <Footer />. Jeder Block liest Übersetzungen, stellt eine Inhaltskonfiguration zusammen und übergibt sie an eine Komponente. Sie sind Beispielmaterial: Für dein eigenes Projekt ersetzt du sie durch deine Blöcke.

// src/blocks/header.tsx — a block: reads i18n, wires a component
export async function Header() {
  const t = await getTranslations('landing');
  const navLinks = [{ href: '/#features', label: t('nav.features') }];
  return <SiteHeader navLinks={navLinks} />;
}

Komponenten sind dauerhaft

Komponenten liegen in src/components/ und lesen keine Übersetzungen. SiteHeader, PricingTable und AppSidebar erhalten alle Inhalte über Props. Sie kennen weder App-Namen noch Texte oder Sprache. Genau deshalb lassen sie sich bei jedem neuen Markenauftritt weiterverwenden.

Warum die Trennung zählt

Wenn du deinen Markenauftritt änderst oder ein neues Projekt startest:

1. Behalte src/components/* — die Grundlage.
2. Schreibe src/blocks/* neu — die Verbindung der Inhalte.
3. Schreibe die Übersetzungs-JSON-Dateien neu, die die Blöcke versorgen.

Die Seitendateien bleiben klein: page.tsx stellt lediglich Blöcke zusammen. Eine neue Startseite betrifft Blöcke und JSON, während die grundlegenden Komponenten bleiben. Diese Trennung ermöglicht es, deine eigenen Vorstellungen umzusetzen, ohne gegen fremde Designentscheidungen arbeiten zu müssen.