Ce qui fait une bonne landing page

Avant de construire, il est utile de savoir ce dont une landing page performante a besoin :

Une proposition de valeur claire - les visiteurs comprennent en quelques secondes ce que vous proposez.
Un appel à l'action fort - un seul CTA principal, visible, qui dit exactement quoi faire.
De la preuve sociale - témoignages, logos clients ou chiffres qui inspirent confiance.
Un design épuré - chaque élément sert l'objectif de conversion.
Un chargement rapide - la vitesse compte pour les visiteurs comme pour le référencement.

Comment fonctionne Cmssy

Cmssy est un CMS headless avec un éditeur visuel. Vous écrivez les blocs comme des composants React dans votre propre application avec @cmssy/react et @cmssy/next, et vous déployez cette application vous-même, sur Vercel ou ailleurs. Cmssy stocke et diffuse le contenu ; votre application l'affiche. L'éditeur visuel encadre votre site en fonctionnement, les rédacteurs glissent donc des blocs et modifient le texte sur la vraie page.

Étape 1 : partir d'un exemple ou brancher votre application

Le plus rapide est de partir d'un exemple prêt à lancer. cmssy-io/examples contient des applications autonomes qui affichent le workspace de démo public sans compte :

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

next-storefront contient déjà les trois blocs d'une landing page - hero, value-props et cta-banner -, vous pouvez donc lire des versions finies de tout ce qui suit.

Pour brancher votre propre application, laissez la CLI copier les fichiers et la connecter à votre workspace :

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 écrit un registre de blocs dans cmssy/blocks.ts, un bloc d'exemple dans blocks/hero/ et une page catch-all qui affiche tout ce que vous publiez avec createCmssyPage depuis @cmssy/next/server. Chaque fichier est du code ordinaire dans votre dépôt. link écrit les slugs et le secret de brouillon de votre workspace dans .env.local et les vérifie auprès de l'API.

Étape 2 : définir vos blocs

Un bloc, c'est un composant React plus un schéma que lit l'éditeur. Vous déclarez les champs éditables avec fields, vous typez le composant avec BlockProps, et vous enregistrez le tout avec defineBlock. Remplacez le hero d'exemple par un hero avec appel à l'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,
});

Le composant reçoit tout dans une seule prop content, typée à partir du schéma : heading est une chaîne parce qu'il est obligatoire, les autres champs peuvent être undefined. Une liste de fonctionnalités est un repeater, dont chaque élément a son propre schéma.

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 reprend le même appel à defineBlock que le hero, avec type: "features" et component: Features. Écrivez le bloc CTA de la même façon - un titre, un texte, un libellé de bouton et un fields.link - ou copiez cta-banner depuis next-storefront, qui fait exactement cela. Ajoutez ensuite les trois au registre.

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];

Ce tableau est la liste unique des blocs que votre site sait afficher. Le serveur s'en sert pour le rendu, et l'éditeur y lit le schéma de chaque bloc : les blocs apparaissent donc dans le sélecteur avec les champs déclarés. Le balisage et le style vous appartiennent, vos blocs correspondent donc exactement à votre design system.

Étape 3 : créer la page dans Cmssy

Dans l'admin Cmssy, créez une nouvelle page avec un nom et un slug, par exemple /launch. Le slug est le chemin que votre application affichera. La page démarre vide - vous la remplirez ensuite avec vos blocs.

Étape 4 : composer la page dans l'éditeur visuel

Ouvrez la page dans l'éditeur. Pendant le développement, réglez le Dev host de l'éditeur sur http://localhost:3000 ; pour le site déployé, renseignez la Preview URL du workspace. L'éditeur encadre votre application en fonctionnement, vous voyez donc vos vrais composants. Glissez les blocs Hero, Features et CTA sur la page dans cet ordre, puis cliquez sur un bloc pour le modifier - les champs déclarés apparaissent comme des contrôles de formulaire. Rédigez un titre, ajoutez trois ou quatre bénéfices et réglez le texte et le lien du bouton.

Étape 5 : ajouter de la preuve sociale

On fait confiance aux autres. Si vous avez un bloc de témoignages, de logos ou de chiffres (next-storefront fournit stats-band), placez-le juste après le hero pour asseoir votre crédibilité avant de demander la conversion.

Étape 6 : laisser un agent IA rédiger (optionnel)

L'admin intègre un assistant (Cmd + K) qui tourne sur une clé de modèle que vous fournissez, et les mêmes outils sont disponibles pour Claude et les autres clients MCP via le serveur MCP. Les deux sont inclus dans tous les plans. Quand la page est ouverte dans l'éditeur, l'assistant peut la générer, la traduire ou modifier les blocs que vous avez sous les yeux ; il rédige aussi le titre et la description SEO. Il ne modifie que le contenu, jamais votre code, et les modifications sur le canevas restent non enregistrées tant que vous ne les enregistrez pas. La publication fait partie des actions qui attendent votre confirmation.

Étape 7 : configurer le SEO

Chaque page a un titre SEO et une méta-description par langue, plus une liste de mots-clés :

Titre SEO - incluez votre mot-clé principal et restez sous 60 caractères.
Méta-description - résumez la page en environ 155 caractères, avec un appel à l'action.
Mots-clés - les termes que votre audience recherche.

L'API de diffusion les renvoie avec la page, et votre application les place dans les métadonnées Next.js via generateMetadata. L'exemple next-storefront le fait dans services/seo.ts.

Étape 8 : publier

Cliquez sur Publier. Le contenu est mis en ligne via l'API de diffusion, et votre application l'affiche au slug choisi, sur votre domaine et votre hébergement. Pointez un webhook content.changed vers la route /api/revalidate de votre application (la CLI l'écrit pour vous) et une publication apparaît sans redéploiement.

Bonnes pratiques pour les landing pages

Un objectif par page - chaque landing page doit avoir un seul objectif de conversion.
Le mobile d'abord - testez sur petit écran avant tout.
Testez vos titres - de petits changements de titre peuvent faire bouger la conversion.
Surveillez le temps de chargement - compressez les images et retirez les scripts inutiles.
L'urgence, mais honnête - une vraie échéance aide, un faux compte à rebours coûte la confiance.

Prochaines étapes

Clonez cmssy-io/examples et lisez les blocs finis de next-storefront.
Suivez le guide d'installation pour brancher votre propre application.
Lisez comment définir des blocs, avec tous les types de champs.
Configurez l'assistant IA ou le serveur MCP.

Comment créer une landing page

Créer une landing page avec Cmssy et Next.js