Configuration

src/config.ts est le seul fichier que vous devez modifier pour transformer le kit en votre produit. La navigation, les titres de page, les e-mails, l'image sociale et les noms d'offres y puisent tous.

export const config = {
  name: "Acme",
  domain: "acme.com",
  description: "Ce que vous construisez, en une phrase.",

  email: {
    from: "Acme <hello@acme.com>",
    support: "hello@acme.com",
  },

  locales: ["en", "fr"] as const,
  defaultLocale: "en",

  billing: {
    currency: "eur",
    plans: [
      { id: "starter", name: "Starter", priceId: "price_starter_replace_me" },
      { id: "pro", name: "Pro", priceId: "price_pro_replace_me" },
    ],
  },

  brand: {
    ink: "#0b0c0f",
    accent: "#f8430a",
    font: "Host Grotesk",
  },
} as const;

Des décisions, pas des secrets#

La distinction compte. config.ts est commité et lisible par quiconque a votre code. .env ne l'est pas, et contient tout ce qui serait dangereux entre d'autres mains.

Un price id Stripe est une décision : il est public, il apparaît dans l'URL de paiement, sa place est ici. Une clé secrète Stripe est un secret et sa place est dans .env. Si vous avez envie de mettre une clé dans config.ts, c'est le signe que vous avez ouvert le mauvais fichier.

Le as const#

config est déclaré as const pour que les types se réduisent aux valeurs littérales. C'est ce qui fait fonctionner ceci :

export type PlanId = Config["billing"]["plans"][number]["id"];
// "starter" | "pro"

Ajoutez une offre au tableau et PlanId s'élargit tout seul. Chaque fonction qui prend un identifiant d'offre refuse désormais ceux qui n'existent pas, à la compilation, sans liste à maintenir. Retirez le as const et vous obtenez string : cette garantie disparaît sans bruit.

Changer la marque#

brand.accent est lu par src/app/globals.css comme token d'accent. Changez-le et tout suit : boutons, anneaux de focus, élément de navigation actif, image sociale. Voir Tokens de design.

brand.font est la police d'affichage. Elle est chargée via next/font/google dans src/app/layout.tsx, donc en changer signifie modifier la valeur de config et l'import, puisque next/font a besoin d'un nom statique à la compilation.

Retirer une langue#

Mettez locales: ["en"] as const et supprimez messages/fr.json. Rien d'autre à changer : le sélecteur affiche ce qui est dans locales, et avec une seule entrée il n'affiche rien. Voir Internationalisation.