Blog

content/blog/hello.mdx :

---
title: Pourquoi nous avons refait l'onboarding
description: Il fallait quatre écrans. Il en faut un.
date: 2026-09-01
tags: [produit]
---

La première version demandait un nom d'entreprise avant de demander quoi que ce
soit d'utile.

Voilà un article publié. Pas d'écran d'administration, pas d'éditeur, pas de ligne à insérer.

Pourquoi des fichiers#

Un blog adossé à la base tombe avec la base. Il ne peut pas non plus être relu dans une pull request, ni annulé avec git revert, ni édité par les outils d'IA que vous avez déjà pointés sur ce dépôt.

La contrepartie, c'est que publier signifie déployer. Pour un blog produit qui sort un article par semaine, ce n'est pas un vrai coût.

Les lire#

import { allPosts, postBySlug } from "@/lib/blog";

const posts = await allPosts();          // du plus récent, trié sur la date
const post = await postBySlug("hello");  // null s'il n'y a pas de fichier

allPosts lit le répertoire une fois et met en cache. Les fichiers ne peuvent pas changer au runtime sur un hébergement serverless, donc il n'y a rien à invalider.

Le rendu#

La route compile le MDX à la compilation et associe les éléments à vos composants, de sorte qu'un article hérite de la typographie du site au lieu d'arriver avec les valeurs par défaut du navigateur.

export const dynamicParams = false;

export async function generateStaticParams() {
  return (await allPosts()).map((post) => ({ slug: post.slug }));
}

dynamicParams = false fait d'un slug inconnu un 404 plutôt qu'une tentative de rendre un fichier absent.

Ajouter la coloration syntaxique#

Si vos articles contiennent du code, ajoutez Shiki en plugin rehype et émettez les deux thèmes en variables CSS, pour que le code coloré suive le passage clair et sombre sans embarquer un colorateur dans le navigateur :

rehypePlugins: [[rehypeShiki, {
  themes: { light: "vitesse-light", dark: "vitesse-dark" },
  defaultColor: false,
}]]

C'est exactement ce que fait cette documentation.