Neu: Dein Agent fragt vor Erstattungen, Stornos und Seitenlöschungen
Tutorial

So baust du eine Landing Page

Baue eine Landing Page mit Cmssy: Definiere Hero-, Features- und CTA-Blöcke mit dem aktuellen SDK in deiner eigenen Next.js-App und baue und veröffentliche die Seite dann im visuellen Editor.

C
Cmssy Team
6 min read

So baust du eine Landing Page mit Cmssy und Next.js

Schritt für Schritt: Hero-, Features- und CTA-Blöcke mit dem aktuellen Cmssy SDK in deiner eigenen Next.js-App definieren, dann die Seite im visuellen Editor bauen und veröffentlichen.

Was eine Landing Page wirksam macht

Bevor du baust, hilft es zu wissen, was eine Landing Page mit hoher Conversion braucht:

  • Ein klares Wertversprechen - Besucher verstehen in Sekunden, was du anbietest.
  • Ein starker Call-to-Action - ein einziger primärer CTA, der heraussticht und genau sagt, was zu tun ist.
  • Social Proof - Testimonials, Kundenlogos oder Zahlen, die Vertrauen schaffen.
  • Ein klares Design - jedes Element dient dem Conversion-Ziel.
  • Kurze Ladezeiten - Geschwindigkeit zählt für Besucher und für das Ranking.

So funktioniert Cmssy

Cmssy ist ein Headless CMS mit visuellem Editor. Du schreibst die Blöcke als React-Komponenten in deiner eigenen App mit @cmssy/react und @cmssy/next und deployst die App selbst, auf Vercel oder woanders. Cmssy speichert und liefert die Inhalte, deine App rendert sie. Der visuelle Editor bettet deine laufende Site ein, sodass Redakteure Blöcke ziehen und Text direkt auf der echten Seite bearbeiten.

Schritt 1: Mit einem Beispiel starten oder die eigene App anbinden

Am schnellsten startest du mit einem lauffähigen Beispiel. cmssy-io/examples enthält eigenständige Apps, die den öffentlichen Demo-Workspace ohne Konto rendern:

git clone https://github.com/cmssy-io/examples
cd examples/next-storefront
pnpm install
cp .env.example .env.local
pnpm dev

next-storefront bringt die drei Blöcke einer Landing Page schon mit - hero, value-props und cta-banner -, du kannst also fertige Versionen von allem unten nachlesen.

Um deine eigene App anzubinden, lässt du die CLI die Dateien kopieren und die App mit deinem Workspace verbinden:

npx create-next-app@latest my-site
cd my-site
npx @cmssy/cli@latest init
pnpm install
npx @cmssy/cli@latest link --token cs_...
pnpm dev

init schreibt eine Block-Registry in cmssy/blocks.ts, einen Beispielblock in blocks/hero/ und eine Catch-all-Seite, die alles Veröffentlichte mit createCmssyPage aus @cmssy/next/server rendert. Jede Datei ist normaler Code in deinem Repository. link schreibt die Slugs und das Draft-Secret deines Workspace in .env.local und prüft sie gegen die API.

Schritt 2: Blöcke definieren

Ein Block ist eine React-Komponente plus ein Schema, das der Editor liest. Die editierbaren Felder deklarierst du mit fields, die Komponente typisierst du mit BlockProps, und beides registrierst du mit defineBlock. Ersetze den Beispiel-Hero durch einen mit Call-to-Action.

blocks/hero/Hero.tsx:

import { fields, type BlockProps } from "@cmssy/react";

export const heroProps = {
  heading: fields.text({ label: "Heading", required: true }),
  subheading: fields.textarea({ label: "Subheading" }),
  ctaText: fields.text({ label: "Button text" }),
  ctaUrl: fields.link({ label: "Button URL" }),
};

export default function Hero({ content }: BlockProps<typeof heroProps>) {
  const { heading, subheading, ctaText, ctaUrl } = content;
  return (
    <section>
      <h1>{heading}</h1>
      {subheading ? <p>{subheading}</p> : null}
      {ctaText && ctaUrl ? <a href={ctaUrl}>{ctaText}</a> : null}
    </section>
  );
}

blocks/hero/block.ts:

import { defineBlock } from "@cmssy/react";
import Hero, { heroProps } from "./Hero";

export const heroBlock = defineBlock({
  type: "hero",
  label: "Hero",
  component: Hero,
  props: heroProps,
});

Die Komponente bekommt alles in einem einzigen content-Prop, typisiert aus dem Schema: heading ist ein String, weil das Feld Pflicht ist, die anderen Felder können undefined sein. Eine Feature-Liste ist ein repeater, und jedes Element hat sein eigenes Schema.

blocks/features/Features.tsx:

import { fields, type BlockProps } from "@cmssy/react";

export const featuresProps = {
  heading: fields.text({ label: "Heading" }),
  items: fields.repeater({
    label: "Features",
    itemLabel: "Feature",
    maxItems: 6,
    itemSchema: {
      title: fields.text({ label: "Title", required: true }),
      text: fields.textarea({ label: "Text" }),
    },
  }),
};

export default function Features({ content }: BlockProps<typeof featuresProps>) {
  const items = content.items ?? [];
  return (
    <section>
      {content.heading ? <h2>{content.heading}</h2> : null}
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            <strong>{item.title}</strong>
            {item.text ? <p>{item.text}</p> : null}
          </li>
        ))}
      </ul>
    </section>
  );
}

blocks/features/block.ts ist derselbe defineBlock-Aufruf wie beim Hero, mit type: "features" und component: Features. Den CTA-Block schreibst du genauso - Überschrift, Text, Button-Text und ein fields.link - oder du kopierst cta-banner aus next-storefront, der genau das ist. Dann trägst du alle drei in die Registry ein.

cmssy/blocks.ts:

import { heroBlock } from "@/blocks/hero/block";
import { featuresBlock } from "@/blocks/features/block";
import { ctaBlock } from "@/blocks/cta/block";

export const blocks = [heroBlock, featuresBlock, ctaBlock];

Dieses Array ist die einzige Liste der Blöcke, die deine Site rendern kann. Der Server rendert daraus, und der Editor liest daraus das Schema jedes Blocks, sodass die Blöcke mit den deklarierten Feldern in der Blockauswahl erscheinen. Markup und Styling gehören dir, die Blöcke passen also exakt zu deinem Designsystem.

Schritt 3: Die Seite in Cmssy anlegen

Lege im Cmssy-Admin eine neue Seite an und gib ihr einen Namen und einen URL-Slug, zum Beispiel /launch. Der Slug ist der Pfad, den deine App rendert. Die Seite startet leer - als Nächstes füllst du sie mit deinen Blöcken.

Schritt 4: Die Seite im visuellen Editor bauen

Öffne die Seite im Editor. Während der Entwicklung stellst du den Dev host des Editors auf http://localhost:3000; für die deployte Site setzt du die Preview URL des Workspace. Der Editor bettet deine laufende App ein, du siehst also deine echten Komponenten. Ziehe die Blöcke Hero, Features und CTA in dieser Reihenfolge auf die Seite und klicke einen Block an, um ihn zu bearbeiten - die deklarierten Felder erscheinen als Formularfelder. Schreib eine Headline, füge drei oder vier Vorteile hinzu und setze Button-Text und Link.

Schritt 5: Social Proof hinzufügen

Menschen vertrauen Menschen. Wenn du einen Block für Testimonials, Logos oder Kennzahlen hast (next-storefront bringt stats-band mit), setze ihn direkt hinter den Hero, um Glaubwürdigkeit aufzubauen, bevor du um die Conversion bittest.

Schritt 6: Einen KI-Agenten tippen lassen (optional)

Der Admin hat einen eingebauten Assistenten (Cmd + K), der auf einem Modell-Key läuft, den du mitbringst, und dieselben Tools stehen Claude und anderen MCP-Clients über den MCP-Server zur Verfügung. Beides gibt es in jedem Plan. Ist die Seite im Editor geöffnet, kann der Assistent sie generieren, übersetzen oder die Blöcke vor dir bearbeiten; auch SEO-Titel und -Beschreibung schreibt er. Er bearbeitet nur Inhalte, nie deinen Code, und Änderungen auf dem Canvas bleiben ungespeichert, bis du speicherst. Das Veröffentlichen gehört zu den Schritten, die auf deine Bestätigung warten.

Schritt 7: SEO einrichten

Jede Seite hat pro Sprache einen SEO-Titel und eine Meta-Beschreibung, dazu eine Liste von Keywords:

  • SEO-Titel - nimm dein wichtigstes Keyword auf und bleib unter 60 Zeichen.
  • Meta-Beschreibung - fasse die Seite in etwa 155 Zeichen zusammen, mit Call-to-Action.
  • Keywords - Begriffe, nach denen deine Zielgruppe sucht.

Die Delivery-API liefert sie mit der Seite aus, und deine App setzt sie in generateMetadata in die Next.js-Metadaten. Das next-storefront-Beispiel macht das in services/seo.ts.

Schritt 8: Veröffentlichen

Klicke auf Veröffentlichen. Die Inhalte gehen über die Delivery-API live, und deine App rendert sie unter dem gesetzten Slug, auf deiner eigenen Domain und deinem Hosting. Richte einen content.changed-Webhook auf die Route /api/revalidate deiner App (die CLI legt sie an), dann erscheint eine Veröffentlichung ohne neues Deployment.

Best Practices für Landing Pages

  • Ein Ziel pro Seite - jede Landing Page sollte ein einziges Conversion-Ziel haben.
  • Mobile first - teste zuerst auf kleinen Bildschirmen.
  • Headlines testen - kleine Änderungen an der Headline können die Conversion spürbar bewegen.
  • Ladezeit im Blick - Bilder komprimieren, unnötige Skripte weglassen.
  • Dringlichkeit nur ehrlich - eine echte Frist hilft, ein falscher Countdown kostet Vertrauen.

Nächste Schritte