L’un des principes fondamentaux du développement logiciel est DRY (« Don’t Repeat Yourself »), qui s’applique aussi à la documentation. Si vous répétez le même contenu à plusieurs endroits, créez un extrait personnalisé pour garder votre contenu synchronisé.

​
Créer un extrait personnalisé

Précondition : vous devez créer votre fichier d’extrait dans le répertoire snippets pour que l’import fonctionne. Toute page située dans le répertoire snippets sera considérée comme un extrait et ne sera pas générée en page autonome. Si vous souhaitez créer une page autonome à partir de l’extrait, importez-le dans un autre fichier et utilisez-le comme composant.

​
Export par défaut

  1. Ajoutez le contenu à votre fichier de snippet que vous souhaitez réutiliser. Vous pouvez éventuellement ajouter des variables qui seront renseignées via des props lors de l’import du snippet. Dans cet exemple, notre variable est word.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  1. Importez le snippet dans votre fichier de destination.
destination-file.mdx
---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## En-tête

Lorem impsum dolor sit amet.

<MySnippet/>

​
Exportation avec variables

  1. Facultativement, vous pouvez ajouter des variables à renseigner via des props lors de l’import de l’extrait. Dans cet exemple, notre variable est word.
snippets/my-snippet.mdx
My keyword of the day is {word}.
  1. Importez l’extrait dans votre fichier de destination avec la variable. La propriété sera renseignée selon votre configuration.
destination-file.mdx
---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

​
Variables réutilisables

  1. Exportez une variable depuis votre fichier de snippet :
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importez le snippet dans votre fichier de destination et utilisez la variable :
destination-file.mdx
---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Bonjour, je m’appelle {myName} et j’aime les {myObject.fruit}.

​
Extraits JSX

  1. Exportez un composant JSX depuis votre fichier d’extrait. (Voir Composants React pour plus d’informations) :
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
Important : lors de la création d’extraits JSX, utilisez la syntaxe de fonction fléchée (=>) plutôt que des déclarations de fonction. Le mot‑clé function n’est pas pris en charge dans ce contexte.
  1. Importez l’extrait dans votre fichier de destination et utilisez le composant :
destination-file.mdx
---
title: My title
description: My Description
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />