Bienvenue sur notre Blog avec MDX !

Qu'est-ce que MDX ?

• Écrire du contenu en Markdown standard
• Intégrer des composants React personnalisés
• Créer des expériences interactives
• Maintenir la lisibilité du code

Exemple de formatage

1. Texte en gras et texte en italique
2. Code inline avec des backticks
3. Liens vers des sites externes
4. Liens internes vers d'autres pages

Citation importante MDX révolutionne la façon dont nous créons du contenu technique en combinant la simplicité du Markdown avec la flexibilité de React.

Exemples de code

JavaScript

// Exemple de fonction React
function WelcomeMessage({name}) {
  return (
    <div className="welcome">
      <h2>Bonjour {name} !</h2>
      <p>Bienvenue dans notre application Next.js</p>
    </div>
  )
}

export default WelcomeMessage

TypeScript

interface User {
  id: number
  name: string
  email: string
  isActive: boolean
}

const createUser = (userData: Omit<User, 'id'>): User => {
  return {
    id: Date.now(),
    ...userData,
  }
}

CSS

.blog-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Inter', sans-serif;
}

.highlight {
  background: linear-gradient(120deg, #a8edea 0%, #fed6e3 100%);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

Listes et structures

Technologies utilisées dans ce projet

• Next.js 15 - Framework React avec App Router
• TypeScript - Typage statique pour JavaScript
• Tailwind CSS - Framework CSS utilitaire
• MDX - Markdown avec composants React
• ShadCN UI - Composants UI modernes
• Next Intl - Internationalisation

Étapes de développement

1. Configuration initiale
   • Installation des dépendances
   • Configuration de Next.js
   • Setup de TypeScript
2. Développement
   • Création des composants
   • Implémentation des pages
   • Tests et optimisation
3. Déploiement
   • Build de production
   • Optimisation des performances
   • Mise en ligne

Tableau des fonctionnalités

Démonstration des Composants MDX

Callouts

Steps (Étapes)

Tabs (Onglets)

Vidéo YouTube

Vidéo Vimeo

Tweet / X

Excalidraw

Code avec nom de fichier

export function Example() {
  return <div>Hello World</div>
}

Images

Récapitulatif des composants disponibles

Conclusion

• Simplicité : Syntaxe Markdown familière
• Flexibilité : Composants React intégrés
• Performance : Rendu optimisé côté serveur
• Maintenabilité : Code structuré et lisible