Bonjour le Monde

4 janvier 2026

Bonjour le Monde

Le premier article de ce blog, un aperçu de la stack, ce que je prévois d'écrire et pourquoi je m'y suis finalement mis.

engineering

Pourquoi un blog maintenant ?

Je construis des choses depuis sept ans sans beaucoup écrire à ce sujet. C'était une erreur. Pas pour les raisons habituelles du type « construire sa marque ». J'ai simplement constaté que l'écriture me force à vraiment comprendre les choses. Si je ne peux pas l'expliquer clairement, c'est que je ne l'ai pas encore compris.

Sur quoi ce site est construit

Le portfolio lui-même est une application Next.js 15 déployée sur Vercel. Le blog n'a pas de CMS, juste des fichiers .mdx dans src/content/blog/. Chaque fichier commence par un bloc de frontmatter :

---
title: Hello World
date: 2026-01-04
tags: [engineering]
published: true
---

Your content here...

next-mdx-remote les rend côté serveur dans des React Server Components, et sugar-high gère la coloration syntaxique sans configuration.

Le routage utilise une route slug de Next.js App Router dans src/app/[lang]/blog/[slug]/page.tsx. Quand on accède à /en/blog/hello-world, Next.js extrait le slug et le passe au composant de page. generateStaticParams s'exécute au moment du build, lit tous les articles publiés et indique à Next.js quels slugs pré-rendre :

export async function generateStaticParams() {
  const posts = getPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

Ensuite, le composant de page prend le relais :

export default async function BlogPostPage({ params }) {
  const { slug } = await params;
  const post = getPost(slug);
  return <MDXRemote source={post.content} components={mdxComponents} />;
}

getPost lit le fichier .mdx depuis le disque, retire le frontmatter et retourne la chaîne de contenu brute. MDXRemote le compile et le rend côté serveur avec une map de composants personnalisés, pour que des éléments comme code, h2 et a s'affichent avec les bons styles plutôt qu'avec les valeurs par défaut du navigateur :

export const mdxComponents = {
  h2: createHeading(2),
  a: CustomLink,
  pre: Pre,
  code: Code,
};

La suite

  • Préparation aux entretiens de system design avec des animations : consistent hashing, élection de leader, retard de réplication, le genre de contenu où un schéma statique ne suffit pas
  • Des trucs aléatoires comme l'aménagement de pièces et l'esthétique, pourquoi pas
  • La séparation des responsabilités, pas seulement dans le logiciel mais aussi dans la vie et le design intérieur
  • Le SEO technique d'un point de vue ingénieur
  • Des idées tirées des livres que je lis, pas des résumés, juste la chose qui a marqué