Uno de los principios fundamentales del desarrollo de software es DRY (Don’t Repeat Yourself), que también aplica a la documentación. Si te encuentras repitiendo el mismo contenido en varios lugares, crea un fragmento personalizado para mantener tu contenido sincronizado.

​
Creación de un fragmento personalizado

Requisito previo: Debes crear el archivo del fragmento en el directorio snippets para que la importación funcione. Cualquier página en el directorio snippets se tratará como un fragmento y no se renderizará como una página independiente. Si quieres crear una página independiente a partir del fragmento, importa el fragmento en otro archivo y úsalo como componente.

​
Exportación predeterminada

  1. Agrega contenido al archivo del snippet que quieras reutilizar. Opcionalmente, puedes agregar variables que se puedan completar mediante props cuando importes el snippet. En este ejemplo, nuestra variable es word.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  1. Importa el snippet en tu archivo de destino.
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/>

​
Exportar con variables

  1. Opcionalmente, puedes añadir variables que se puedan completar mediante props cuando importes el fragmento. En este ejemplo, nuestra variable es word.
snippets/my-snippet.mdx
My keyword of the day is {word}.
  1. Importa el fragmento en tu archivo de destino con la variable. La propiedad se completará según tu especificación.
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 reutilizables

  1. Exporta una variable desde tu archivo de fragmentos:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importa el fragmento en tu archivo de destino y usa la variable:
destination-file.mdx
---
title: My title
description: My Description
---

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

Hola, me llamo {myName} y me gustan las {myObject.fruit}.

​
Fragmentos de JSX

  1. Exporta un componente de JSX desde tu archivo de fragmentos. (Consulta React components para más información):
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
Importante: Al crear fragmentos de JSX, usa la sintaxis de función flecha (=>) en lugar de declaraciones de función. La palabra clave function no es compatible en este contexto.
  1. Importa el fragmento en tu archivo de destino y utiliza el componente:
destination-file.mdx
---
title: My title
description: My Description
---

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

<MyJSXSnippet />