Center-Website von Cockpit nach v0 migrieren

Für wen: Entwickler, IT, Agentur — plus Projektleitung, die den Unterschied zu „neues Design in v0“ verstehen muss.
Referenz-Implementierung: ILG-Template → Repo smg-ilg-template-website (Ordner website-ilg/ im Monorepo).

Das ist der Zielweg. WordPress, die Center-Website-SPA und die Signage-App sind veraltet — bestehende Instanzen bleiben, bis dieser Umzug fertig ist.

Redaktion pflegt weiterhin alle Inhalte und Optionen im Cockpit (Webseiten-Reiter, Shops, Aktuelles). Es werden keine Center-Daten migriert oder überschrieben — nur das Frontend wechselt zu einem eigenen Next.js-Deploy (v0 + GitHub + Vercel).

Was / Warum / Wer / Wo


Was	Ein bestehendes Center-Template (z. B. ILG) wird als Standalone-Repo exportiert, in v0 importiert und auf Vercel deployed. Live-Daten kommen über die öffentliche Cockpit-API.
Warum	Eigenes Design-Hosting (v0), ein Vercel-Projekt für viele Center (Shared Layout), weniger Render-Last der Monorepo-Website, schnellere Template-Iteration ohne Full-Monorepo-Deploy.
Wer	Dev/IT: Repo, Routen, Env, Domains. Redaktion: unverändert Cockpit. v0: Feintuning am Layout — keine erfundenen Shop-Namen.
Wo (Cockpit)	Center → Webseite · Website-Management → Frontend-Kanäle (v0) · Custom Domain
Wo (Code)	Monorepo: `apps/center-website/components/templates/<template>/` · Export: `website-<template>/` · GitHub: `sawmuedev/smg-*-template-website`

Zwei v0-Wege — nicht verwechseln

Weg	Richtung	Ergebnis
ZIP-Template	v0 → Cockpit	Design wird ins Dashboard hochgeladen, läuft in bestehender `center-website` → Templates Intro, V0-TEMPLATE-WORKFLOW
Standalone v0-Repo (diese Seite)	Cockpit-Template → v0	Eigenes Next.js-Projekt, eigene Domain, liest Cockpit per API → ILG-Referenz unten

Merksatz: ZIP = Template in die Plattform. Migration = Frontend neben der Plattform, gleiche Datenquelle.

Architektur (kurz)

Center-Auflösung: Hostname → GET /api/centers/by-domain?domain=… (Prod) oder DEFAULT_CENTER_SLUG (Preview: *.vercel.run, v0).
Stammdaten + Template: GET /api/centers/{centerId}/public-visitor-surface → templatePublicContent.content (= templateContent.ilg o. Ä.), pagesConfig, Logo, Social, Öffnungszeiten.
Seiten-Inhalte: GET /api/centers/{centerId}/page-content?pageType=shops|kontakt|…
Listen/Details: Shops, Aktuelles-Bundle, Services, Offices, Kontakte — siehe Public API Vertrag.

Nicht nutzen für v0: GET …/website-config (Auth/401). Redaktion arbeitet im Dashboard; die Website liest nur öffentliche Endpunkte.

Migrations-Checkliste (Entwickler)

Phase 1 — Repo vorbereiten

Template-Ordner aus apps/center-website/components/templates/<name>/ in Standalone-Struktur bringen (Referenz: website-ilg/ilg/).
lib/cockpit/resolve-center.ts — by-domain + Preview-Fallback (DEFAULT_CENTER_SLUG, Preview-Hosts).
Shared Helfer mitziehen: website-pages-defaults, Template-Sichtbarkeit (pageVisibility, pagesConfig), ggf. Export-Skript (scripts/export-website-ilg-v0-repo.mjs).
middleware.ts — Legacy-Pfade (z. B. /geschaefte → /shops) für Bookmarks.
API-Routen: /api/kontakt (Proxy zum Dashboard), optional /api/revalidate.

Phase 2 — App Router

Listenseiten unter app/ (Shops, Kontakt, Aktuelles, …) — zentraler Loader (ILG: lib/ilg/ilg-route-page.tsx).
Detail-Routen (News, Events, Angebote, Jobs, Shops, Services, freie CMS-Seiten).
Route-Generator (scripts/generate-ilg-routes.mjs + pnpm routes:generate) — hält v0-Branch und main konsistent.
pagesConfig + Sichtbarkeit → notFound() wenn Seite im Cockpit deaktiviert; Navigation filtert mit (mergeIlgLayout, Header).

Phase 3 — Parität zur Monorepo-Website

Bereich	Soll-Stand (ILG Referenz)
Webseiten-Reiter Startseite	Hero, Info-Kacheln, Header/Footer aus `templateContent`
SEO	`generateMetadata` pro Route, `lib/seo-utils.ts`
JSON-LD	Homepage, Shops, Details, Breadcrumbs
Service-Details	`/services/[serviceSlug]`
Centerplan	Statisches Fallback-Bild (`lageplan.fallbackImage`) — ohne interaktives Wayfinding
Chatbot / KI	Bewusst optional / separater Schritt
Kontakt	Proxy-API; Turnstile optional wie Monorepo

Phase 4 — v0 & Vercel

GitHub-Repo (Organisation sawmuedev) anlegen oder syncen.
v0: Import from GitHub — Instructions A, B, C, D, E, J; bei Multi-Center zusätzlich G → Instructions A–J.
Zwei Branchs pflegen: main und v0-Branch (z. B. v0/iamsaad82-55cde441) — v0 deployed oft nicht main.
Env (Shared ILG-Beispiel):

NEXT_PUBLIC_DASHBOARD_URL=https://dashboard.cockpit-os.de
COCKPIT_VERCEL_PROJECT_MODE=shared
EXPECTED_WEBSITE_TEMPLATE=ilg
DEFAULT_CENTER_SLUG=<referenz-center-für-preview>
REVALIDATION_SECRET=<team-secret>
COCKPIT_DASHBOARD_URL=https://dashboard.cockpit-os.de
COCKPIT_FRONTEND_CHANNEL=website

Phase 5 — Go-Live

Cockpit: Center mit passendem websiteTemplate, Custom Domain pflegen.
Vercel: Domain am Shared-Projekt hinterlegen (nicht pro Center ein neues Projekt, wenn Instruction G).
cockpit_register_frontend_deployment oder Dashboard Frontend-Kanäle (v0) → Go-Live DNS.
Smoke: Startseite, Shop-Liste, eine Detailseite, deaktivierte Seite → 404, Kontaktformular.

ILG-Referenz (konkret)

Thema	Ort
Standalone-Repo	`website-ilg/` im Monorepo · GitHub `sawmuedev/smg-ilg-template-website`
Export aus Monorepo	`node scripts/export-website-ilg-v0-repo.mjs`
Routen neu erzeugen	`cd website-ilg && pnpm routes:generate`
Center-Loader	`lib/cockpit/resolve-center.ts`
Listenseiten	`lib/ilg/ilg-route-page.tsx`
Detailseiten	`lib/ilg/ilg-detail-page.tsx`
Sichtbarkeit	`lib/ilg-page-visibility.ts`
v0-Einstieg (Chat-Text)	`website-ilg/V0_IMPORT.md`
Kurz-README im Repo	`website-ilg/README.md`

Webseiten-Reiter → API (ILG):

Reiter	Speicher	v0 liest
Startseite	`templateContent.ilg.hero`, `infoTiles`	`public-visitor-surface`
Header & Footer	`templateContent.ilg.header/footer` + Stammdaten	`mergeIlgLayout`
Optionen / Seiten ein-aus	`pageVisibility`, `pagesConfig`	Route-Guards + Navigation
Unterseiten-Texte	Page-Content	`page-content?pageType=…`
Centerplan	`lageplan.fallbackImage`	`/centerplan` (statisch)

Sync nach Template-Änderungen im Monorepo

Wenn ILG-Komponenten in apps/center-website angepasst wurden:

# Im Monorepo-Root
node scripts/export-website-ilg-v0-repo.mjs
cd website-ilg
pnpm routes:generate   # falls Routen-Metadaten geändert
git add -A && git commit -m "sync: ILG aus Monorepo"
git push origin main
git push origin v0/<euer-v0-branch>   # v0-Branch nicht vergessen

Integrationsschicht (lib/ilg/, lib/cockpit/, app/) bleibt im website-ilg-Repo und wird nicht vom Export überschrieben — nur ilg/ UI und Shared-Libs laut Skript.

So testen

Lokal: DEFAULT_CENTER_SLUG auf ein echtes ILG-Center · pnpm dev · /shops, /aktuelles, /services/<slug>.
Preview: v0/Vercel-URL — gleiches Center über Env-Slug; keine leeren Listen, wenn Cockpit befüllt ist.
Multi-Center: Zweite Domain am Vercel-Projekt · Cockpit by-domain · andere Farben/Logo ohne Code-Deploy.
Seite deaktivieren: Im Cockpit pagesConfig.shops = false → Route 404, Nav-Eintrag weg.
SEO: Seiten-Titel im Browser-Tab, Canonical in Seitenquelltext prüfen.

Betrieb

Variable / Thema	Hinweis
`NEXT_PUBLIC_DASHBOARD_URL`	Öffentliche Dashboard-URL (Prod)
`DEFAULT_CENTER_SLUG`	Nur Preview / lokale Entwicklung
`EXPECTED_WEBSITE_TEMPLATE`	Schutz: falsches Template → Fehlerseite
`REVALIDATION_SECRET`	On-Demand-Revalidate nach Cockpit-Publish
Render Monorepo-Website	Kann parallel laufen, bis DNS auf v0 umgestellt ist
Bandwidth	v0 entlastet `apps/center-website` auf Render — siehe Changelog (Bandwidth Phase 2)

Cron/Webhooks: On-Demand-Revalidate über Cockpit-Hook oder MCP — Details v0 Recast Deploy.

Häufige Fehler

Symptom	Ursache	Fix
v0 zeigt alten Stand	Deploy auf v0-Branch, nicht `main`	Beide Branchs pushen, in v0 Sync
404 auf allen Unterseiten	Fehlende `app/…/page.tsx`	`pnpm routes:generate`
Leere Listen	Center leer oder falscher Slug	Cockpit befüllen / `DEFAULT_CENTER_SLUG`
Webseiten-Reiter ignoriert	Code liest Hardcoding statt API	`public-visitor-surface` + `page-content` prüfen
`website-config` 401	Falscher Endpunkt	Nur public-visitor-surface
Nav zeigt deaktivierte Seite	`pagesConfig` nicht in Header	`mergeIlgLayout` + Header-Filter

Nächste Seiten

Redaktion (Kurzpfad): Center-Website mit v0
Instructions A–J: v0 + Cockpit (So geht's)
API-Vertrag: Public Center-Website API
ZIP-Weg (andere Richtung): Templates Intro
Center-Website App: Intro

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/developer-guide/cockpit-zu-v0-migration

Was / Warum / Wer / Wo​

Zwei v0-Wege — nicht verwechseln​

Architektur (kurz)​

Migrations-Checkliste (Entwickler)​

Phase 1 — Repo vorbereiten​

Phase 2 — App Router​

Phase 3 — Parität zur Monorepo-Website​

Phase 4 — v0 & Vercel​

Phase 5 — Go-Live​

ILG-Referenz (konkret)​

Sync nach Template-Änderungen im Monorepo​

So testen​

Betrieb​

Häufige Fehler​

Nächste Seiten​