Uno dei principi fondamentali dello sviluppo software è DRY (Don’t Repeat Yourself), che vale anche per la documentazione. Se ti capita di ripetere gli stessi contenuti in più punti, crea uno snippet personalizzato per mantenere i contenuti allineati.

​
Creazione di uno snippet personalizzato

Condizione preliminare: devi creare il file dello snippet nella directory snippets affinché l’import funzioni. Qualsiasi pagina nella directory snippets verrà trattata come snippet e non sarà resa come pagina autonoma. Se vuoi creare una pagina autonoma a partire dallo snippet, importa lo snippet in un altro file e richiamalo come componente.

​
Esportazione predefinita

  1. Aggiungi al file dello snippet il contenuto che vuoi riutilizzare. Facoltativamente, puoi aggiungere variabili da valorizzare tramite le props quando importi lo snippet. In questo esempio, la nostra variabile è word.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages.
  1. Importa lo snippet nel file di destinazione.
destination-file.mdx
---
title: My title
description: My Description
---

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

## Intestazione

Lorem impsum dolor sit amet.

<MySnippet/>

​
Esportare con variabili

  1. Facoltativamente, puoi aggiungere variabili che possono essere valorizzate tramite props quando importi lo snippet. In questo esempio, la nostra variabile è word.
snippets/my-snippet.mdx
My keyword of the day is {word}.
  1. Importa lo snippet nel file di destinazione passando la variabile. La proprietà verrà valorizzata in base alla tua specifica.
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" />

​
Variabili riutilizzabili

  1. Esporta una variabile dal file di snippet:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
  1. Importa lo snippet nel file di destinazione e usa la variabile:
destination-file.mdx
---
title: My title
description: My Description
---

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

Ciao, mi chiamo {myName} e mi piacciono le {myObject.fruit}.

​
Frammenti JSX

  1. Esporta un componente JSX dal file del frammento. (Consulta React components per ulteriori informazioni):
snippets/my-jsx-snippet.jsx
export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}
Importante: quando crei frammenti JSX, usa la sintassi con funzione freccia (=>) invece delle dichiarazioni di funzione. La parola chiave function non è supportata in questo contesto.
  1. Importa il frammento dal file di destinazione e usa il componente:
destination-file.mdx
---
title: My title
description: My Description
---

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

<MyJSXSnippet />