Essai de MDX avec Next.js : De l’installation de @next/mdx à l’affichage du contenu

Introduction

Il existe plusieurs bibliothèques Markdown, et cette fois, je vous présente Next/MDX.
J’ai déjà utilisé react-markdown avec React, mais je ne l’ai pas particulièrement apprécié.
J’avais des besoins spécifiques, comme combiner des variables ou insérer facilement des images, ce qui n’est pas possible avec un Markdown classique.

Répondre à ces exigences rend souvent les choses complexes.
Dans ce contexte, "Next/MDX" répond parfaitement aux besoins, tout en permettant une syntaxe élégante. C’est pourquoi je l’ai choisi.

Voici les étapes, de l’ajout au projet jusqu’à l’affichage.

Environnement

• Next.js : 14.0.3

Étapes

Installer les paquets nécessaires

Pour utiliser @next/mdx, plusieurs paquets sont nécessaires.
Ajoutez-les à votre projet avec la commande suivante :

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

Ajouter dans le fichier de configuration (next.config.js)

Configurez comme suit :

// next.config.js
const withMDX = require('@next/mdx')()
const nextConfig = {
  // omis
};
module.exports = withMDX(nextConfig);

withMDX est un plugin permettant de prendre en charge Markdown et React dans la configuration de MDX.
En écrivant withMDX(nextConfig), les fichiers MDX sont intégrés dans le processus de build.

Créer un fichier MDX

Créez src/component/md.mdx :

# Welcome to my MDX page!

This is some **bold** and _italics_ text.

This is a list in markdown:

- One
- Two
- Three

Importer dans un fichier TSX

Créez src/app/page.tsx :

"use client"
import Mdx from '@/component/md.mdx'

const App = () => {
  return (
    <>
      <Mdx />
    </>
  );
}
export default App;

De cette manière, le Markdown sera rendu en HTML et affiché.
Puisque nous utilisons App Router, nous ajoutons "use client" au début.

Références

Markdown and MDX

Conclusion

L’intégration est simple et l’outil est facile à utiliser.
C’est une bibliothèque populaire, donc il existe de nombreuses ressources utiles.
De plus, elle semble compatible avec d’autres frameworks, ce qui la rend polyvalente.