Saltar al contenido principal
Uno de los principios fundamentales del desarrollo de software es DRY (“Don’t Repeat Yourself”), que también se 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 snippet personalizado

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

​
Exportación predeterminada

  1. Agrega contenido al archivo de fragmento que quieras reutilizar.
snippets/my-snippet.mdx
¡Hola mundo! Este es mi contenido que quiero reutilizar en varias páginas.
  1. Importa el fragmento en tu archivo de destino.
destination-file.mdx
---
title: Mi título
description: Mi descripción
---

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

## Encabezado

Lorem impsum dolor sit amet.

<MySnippet/>

​
Exportación 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
Mi palabra clave del día es {word}.
  1. Importa el fragmento en tu archivo de destino con la variable. La propiedad se completará según tu configuración.
destination-file.mdx
---
title: Mi título
description: Mi descripción
---

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

## Encabezado

Lorem ipsum dolor sit amet.

<MySnippet word="bananas" />

​
Variables reutilizables

  1. Exporta una variable desde tu archivo de fragmento:
snippets/path/to/custom-variables.mdx
export const myName = "mi nombre";

export const myObject = { fruit: "fresas" };
  1. Importa el fragmento desde tu archivo de destino y usa la variable:
destination-file.mdx
---
title: Mi título
description: Mi descripción
---

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

Hola, mi nombre es {myName} y me gusta {myObject.fruit}.

​
Fragmentos de JSX

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

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

<MyJSXSnippet />