Skip to main content

Découvre MDX : Le Markdown Extra

· 3 min read
Juste Kouassi
Juste Kouassi
Fondateur de 1/Docs

Salut cher dev ! Aujourd'hui, on plonge dans un outil qui va transformer ta manière d'écrire du contenu pour le web : MDX. Si tu travailles déjà avec React, MDX va devenir ton nouveau meilleur ami.

🤔 C'est quoi MDX ?​

Imagine pouvoir mélanger du Markdown (pour écrire du contenu) et du JSX (pour ajouter des composants React) dans un seul fichier. Ça te permet de créer du contenu interactif et dynamique sans quitter ton éditeur préféré.

En gros, MDX te donne le meilleur des deux mondes : la simplicité du Markdown + la puissance de React.

🚀 Installer et Configurer MDX​

Voyons comment installer MDX dans un projet React, que ce soit avec Next.js ou Gatsby.

Installation avec Next.js​

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

Ensuite, configure ton fichier next.config.js :

// next.config.js
const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/,
})
module.exports = withMDX({
  pageExtensions: ['js', 'jsx', 'mdx'],
})

Installation avec Gatsby​

npm install gatsby-plugin-mdx @mdx-js/react
// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,
  ],
}

📝 Syntaxe de Base​

Maintenant que tout est installé, voyons comment écrire du contenu avec MDX. Voici un exemple basique :

# Mon Super Article

Ceci est du texte Markdown.

<MonComposant />

```jsx
const MonComposant = () => <div>Je suis un composant React !</div>
\```

Tu peux écrire du Markdown classique et insérer des composants React où tu veux. Simple, non ?

💡 Utilisation des Composants​

Avec MDX, tu peux réutiliser tes composants React directement dans ton contenu. Par exemple, pour un bouton custom :

// components/Button.js
export const Button = ({ children }) => (
  <button style={{ padding: '10px', backgroundColor: 'royalblue', color: 'white' }}>
    {children}
  </button>
)

Ensuite, tu l'utilises dans ton fichier MDX :

import { Button } from './components/Button'

# Bienvenue dans MDX

<Button>Clique ici</Button> pour découvrir quelque chose de cool !

pour découvrir quelque chose de cool !

🔥 Cas d'utilisation de MDX​

MDX est parfait pour des blogs dynamiques, des documentations interactives, ou même des sites web statiques avec du contenu enrichi. Si tu veux que tes lecteurs aient une expérience immersive, MDX est ton allié.

📚 Ressources pour Aller Plus Loin​

Voilà, tu as maintenant un aperçu de ce que MDX peut apporter à tes projets. N'hésite pas à l'essayer et à créer du contenu super interactif ! 🚀../components/Button