Loading...
Loading...

Anders Planck / 15 giugno 2024 • 2 min read
MDX è un formato potente che combina Markdown con JSX, permettendoti di scrivere contenuti interattivi con componenti React direttamente nei tuoi file markdown. È perfetto per documentazione, blog e qualsiasi contenuto che necessiti sia di formattazione ricca che di funzionalità dinamiche.
voti attuali: 0
Prima, installa MDX e le dipendenze correlate usando Bun:
bun add @next/mdx @mdx-js/loader @mdx-js/react @types/mdxCrea o aggiorna il tuo file next.config.mjs per abilitare il supporto MDX:
import createMDX from '@next/mdx'
/** @type {import('next').NextConfig} */
const nextConfig = {
pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
experimental: {
mdxRs: true,
},
}
const withMDX = createMDX({
options: {
remarkPlugins: [],
rehypePlugins: [],
},
})
export default withMDX(nextConfig)Crea un file mdx-components.tsx nella radice del tuo progetto:
import type { MDXComponents } from 'mdx/types'
import Image, { ImageProps } from 'next/image'
export function useMDXComponents(components: MDXComponents): MDXComponents {
return {
h1: ({ children }) => (
<h1 className="text-4xl font-bold mb-4">{children}</h1>
),
h2: ({ children }) => (
<h2 className="text-3xl font-semibold mb-3 mt-8">{children}</h2>
),
h3
Crea un nuovo file app/blog/my-post.mdx:
---
title: "Il Mio Primo Post MDX"
date: "2024-01-15"
---
# Benvenuto nel Mio Post
Questo è un paragrafo con testo **grassetto** e *corsivo*.
<CustomButton>Cliccami</CustomButton>
## Esempi di Codice
Ecco del JavaScript:
\`\`\`javascript
const saluto = "Ciao, MDX!"
console.log(saluto)
\`\`\`Importa e usa componenti personalizzati nel tuo MDX:
import { Alert } from '@/components/ui/alert'
import { Card } from '@/components/ui/card'
<Alert>
Questo è un messaggio importante!
</Alert>
<Card>
<h3>Titolo Card</h3>
<p>Il contenuto della card va qui</p>
</Card>Aggiungi metadati ai tuoi file MDX usando il frontmatter:
---
title: "MDX Avanzato"
author: "Anders Planck"
publishedAt: "2024-06-15"
tags: ["mdx", "nextjs", "react"]
---
Il tuo contenuto qui...Carica componenti dinamicamente:
import dynamic from 'next/dynamic'
export const DynamicChart = dynamic(() => import('@/components/chart'), {
loading: () => <p>Caricamento grafico...</p>
})
<DynamicChart data={chartData} />Passa props alla tua pagina MDX:
// app/blog/[slug]/page.tsx
import { MDXRemote } from 'next-mdx-remote/rsc'
export default function BlogPost({ params }: { params: { slug: string } }) {
return (
<MDXRemote
source={content}
components={customComponents}
options={{
mdxOptions: {
remarkPlugins: [],
rehypePlugins: [],
},
}}
/>
)
}bun add rehype-highlight rehype-pretty-code shikiimport rehypePrettyCode from 'rehype-pretty-code'
const withMDX = createMDX({
options: {
rehypePlugins: [
[
rehypePrettyCode,
{
theme: 'github-dark',
keepBackground: false,
},
],
],
},
})content dedicataimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
<Tabs defaultValue="install">
<TabsList>
<TabsTrigger value="install">Installazione</TabsTrigger>
<TabsTrigger value="usage">Utilizzo</TabsTrigger>
</TabsList>
<TabsContent value="install">
Istruzioni di installazione...
</TabsContent>
<TabsContent value="usage">
Esempi di utilizzo...
</TabsContent>
</Tabs>import { Counter } from '@/components/counter'
import { CodeSandbox } from '@/components/code-sandbox'
Prova questo contatore interattivo:
<Counter initialValue={0} />
Modifica il codice in tempo reale:
<CodeSandbox template="react" />import { ProjectCard } from '@/components/project-card'
import { ImageGallery } from '@/components/image-gallery'
<ProjectCard
title="Il Mio Progetto"
description="Descrizione del progetto"
image="/project.png"
link="/projects/my-project"
/>
<ImageGallery images={projectImages} />// Aggiungi error boundaries
import { ErrorBoundary } from 'react-error-boundary'
<ErrorBoundary fallback={<div>Qualcosa è andato storto</div>}>
<YourMDXContent />
</ErrorBoundary>MDX è uno strumento potente per creare contenuti ricchi e interattivi nelle applicazioni Next.js. Combinando la semplicità di Markdown con la potenza dei componenti React, puoi costruire documentazione coinvolgente, blog e applicazioni basate sui contenuti.
Inizia a sperimentare con MDX oggi e sblocca nuove possibilità per i tuoi progetti Next.js!