Pourquoi j'ai migré mon blog de WordPress vers MDX

Pendant des années, j'ai utilisé WordPress. C'est le choix par défaut. L'éditeur Gutenberg est correct, les plugins gèrent le SEO, et c'est facile.

Mais en tant que développeur, je me sentais toujours limité. Je voulais inclure un graphique interactif dans un article ? Il fallait installer un plugin ou écrire du HTML bizarre. Je voulais afficher un bout de code avec une belle coloration syntaxique ? Encore un plugin.

Un jour, j'ai découvert MDX. Et tout a changé.

C'est quoi MDX ?

MDX, c'est Markdown + JSX.

Vous écrivez votre contenu en Markdown standard (titres, listes, gras), mais vous pouvez importer et utiliser des composants React directement dans votre texte.

Exemple :

# Mon super article

Voici un graphique de mes ventes :

<LineChart 
  data={[10, 20, 45, 30]} 
  color="blue" 
/>

Et voici une alerte importante :

<Alert type="warning">
  N'oubliez pas de faire vos backups !
</Alert>

Le résultat est une page qui mélange parfaitement texte riche et applications interactives.

5 Raisons pour lesquelles j'ai migré

1. "Content as Code"

Mon blog est maintenant un dossier dans mon dépôt Git.

• Je peux utiliser git diff pour voir mes modifications.
• Je peux créer une branche pour rédiger un brouillon.
• Je peux faire une Pull Request pour qu'un collègue relise mon article.
• Si mon site crash, j'ai tout le contenu en local. Pas de base de données MySQL à exporter/importer.

2. Composants interactifs

C'est la "killer feature". Dans un article sur le tri de tableaux en JS, je ne mets pas juste une image du code. Je mets un composant <SortingVisualizer /> que le lecteur peut manipuler.

Cela transforme un article passif en une expérience interactive. C'est impossible à faire proprement avec WordPress sans devenir fou.

3. Performance absolue

Avec Next.js et MDX, mes articles sont compilés en HTML statique au moment du build. Pas de requêtes base de données. Pas de PHP qui s'exécute à chaque visite. Le temps de réponse est instantané (TTFB < 50ms).

4. Sécurité

Pas de base de données = pas d'injection SQL. Pas de panel admin (wp-admin) = pas d'attaques brute-force sur le login. C'est la tranquillité d'esprit totale.

5. Developer Experience (DX)

J'écris mes articles dans VS Code. J'ai mes raccourcis, mon auto-complétion, mon Copilot. J'utilise Prettier pour formater mon texte. C'est beaucoup plus agréable que d'écrire dans une textarea dans un navigateur.

Les inconvénients (il y en a)

Soyons honnêtes, ce n'est pas pour tout le monde.

Pas de CMS visuel (par défaut) Si je veux corriger une faute d'orthographe depuis mon téléphone, je dois aller sur GitHub, éditer le fichier, et commit. Pas super pratique. (Note : des CMS basés sur Git comme TinaCMS ou Decap CMS résolvent ça).

Gestion des images Dans WordPress, on glisse-dépose une image et elle est redimensionnée en 3 tailles. En MDX "brut", il faut gérer ça soi-même (ou configurer next/image correctement).

Courbe d'apprentissage Pour un client non-technique, le Markdown fait peur. "C'est quoi ces dièses devant les titres ?".

Comment commencer ?

Si vous utilisez Next.js, vous avez plusieurs options :

1. @next/mdx : Le plus simple, transforme les pages .mdx en routes.
2. next-mdx-remote : Plus flexible, permet de charger du MDX depuis n'importe où (fichier, base de données).
3. Velite / Contentlayer : Le top du top. Transforme vos fichiers MDX en données JSON typées avec validation de schéma. C'est ce que j'utilise.

// velite.config.ts
export default defineConfig({
  collections: {
    posts: {
      name: 'Post',
      pattern: 'posts/**/*.mdx',
      schema: s.object({
        title: s.string(),
        slug: s.slug(),
        date: s.date(),
        cover: s.image(),
      })
    }
  }
})

Conclusion

Je ne migrerai pas un client boulanger sur MDX. WordPress reste imbattable pour les utilisateurs non-techniques.

Mais pour un blog de développeur, un site de documentation, ou un portfolio personnel ? MDX est la meilleure chose qui soit arrivée au blogging technique. C'est la fusion parfaite entre l'écriture et le code.