Test du système MDX

Cet article valide le nouveau système de blog basé sur MDX (Markdown + JSX). Il teste toutes les fonctionnalités de parsing, compilation et rendu.

Fonctionnalités testées

1. Parsing du frontmatter

Le frontmatter YAML en début de fichier est correctement parsé par gray-matter :

• ✅ Titre, excerpt, date
• ✅ Catégorie et tags
• ✅ Auteur et temps de lecture
• ✅ Images (cover + Open Graph)
• ✅ Flags (published, featured)

2. Markdown étendu (GFM)

Grâce à remark-gfm, nous avons accès aux extensions GitHub Flavored Markdown :

Tables

Fonctionnalité	Status	Plugin
Syntax highlighting	✅	rehype-highlight
Auto-linking headings	✅	rehype-autolink-headings
Slugs automatiques	✅	rehype-slug

Task lists

• Installer les dépendances MDX
• Créer src/lib/mdx.ts
• Créer un article de test
• Migrer les articles existants

Strikethrough

Ancien système blog hardcodé → Nouveau système MDX scalable

3. Code Blocks avec Syntax Highlighting

TypeScript

import { getAllArticles } from "@/lib/mdx";

export async function generateStaticParams() {
  const articles = await getAllArticles();
  return articles.map((article) => ({
    slug: article.slug,
  }));
}

JavaScript

// Exemple de compilation MDX
const { content } = await compileMDXContent(article.content);

Bash

# Installer les dépendances
npm install next-mdx-remote gray-matter reading-time

4. Formatting avancé

Texte en gras pour les points importants.

Texte en italique pour les nuances.

Gras + italique pour l'emphase maximale.

Citation importante : "Un système de blog scalable commence par une architecture solide." — Lead Engineer ONEX Technology

5. Listes imbriquées

1. Première étape : Installer les dépendances
   • next-mdx-remote
   • gray-matter
   • reading-time
2. Deuxième étape : Créer le parser
   • Fonction getAllArticles()
   • Fonction getArticleBySlug()
   • Fonction compileMDXContent()
3. Troisième étape : Tester
   • Créer un article MDX
   • Vérifier le parsing
   • Valider le rendu

6. Liens

• Lien externe : Documentation Next.js
• Lien interne : Retour au blog
• Ancre : Aller à la conclusion

7. Images (à venir)

Une fois les images ajoutées dans public/images/blog/test-systeme-mdx/, elles seront affichées ici.

Architecture du système

Flux de données

content/blog/*.mdx
       ↓
  gray-matter (frontmatter)
       ↓
  reading-time (calcul)
       ↓
  compileMDX (compilation)
       ↓
  rehype/remark plugins
       ↓
  React components

Fichiers clés

• src/lib/mdx.ts : Parser et compilateur MDX
• src/types/blog.ts : Types TypeScript
• content/blog/*.mdx : Articles au format MDX
• src/app/blog/[slug]/page.tsx : Page dynamique SSG

Avantages du système MDX

Pour les développeurs

1. Git-versioned : Tous les articles sont dans Git (historique, backup automatique)
2. Type-safe : Types TypeScript pour tous les métadonnées
3. Scalable : Supporte des centaines d'articles sans problème
4. Extensible : Facile d'ajouter des composants React custom

Pour le SEO

1. SSG (Static Site Generation) : Pages générées au build time
2. Performance optimale : Pas d'appels API, tout est statique
3. Sitemap automatique : Génération dynamique basée sur les fichiers MDX
4. RSS feed : Export automatique en XML

Pour l'automatisation n8n

1. API route /api/blog/create : Créer un article via webhook
2. Validation serveur : Authentification avec secret token
3. Génération slug : Automatique à partir du titre
4. Revalidation : Cache Next.js invalidé automatiquement

Prochaines étapes

1. ✅ Valider le parsing MDX (cet article)
2. ⏳ Migrer les 3 articles existants depuis src/data/blog.ts
3. ⏳ Créer les API routes (/api/blog/create, /api/blog/publish)
4. ⏳ Configurer le workflow n8n
5. ⏳ Générer le sitemap.xml et RSS feed

Conclusion

Le système MDX est maintenant opérationnel et prêt pour :

• ✅ Migration des articles existants (Étape 4)
• ✅ Création manuelle d'articles (format MDX)
• ⏳ Automatisation via n8n (nécessite API routes)

Note technique : Ce système respecte les meilleures pratiques Next.js 15+ avec App Router, SSG, et TypeScript strict.

---

Article de test créé le 18 janvier 2026 - Étape 2 de la migration vers architecture MDX scalable.