استفاده از Markdown و MDX در Next.js – ترکیب محتوا و کامپوننت‌های React در صفحات پویا

مقدمه

Markdown یک زبان نشانه‌گذاری سبک برای نوشتن محتوا است که به HTML تبدیل می‌شود. MDX نسخهٔ پیشرفته‌تری از Markdown است که اجازه می‌دهد کامپوننت‌های React را مستقیماً در فایل‌های محتوا بنویسید.

نصب وابستگی‌ها

برای پشتیبانی از MDX در Next.js، پکیج‌های زیر را نصب کنید:

npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx

پیکربندی فایل next.config.mjs

در ریشه پروژه، فایل next.config.mjs را به شکل زیر تنظیم کنید:

import createMDX from '@next/mdx'

const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
}

const withMDX = createMDX({
  extension: /\.(md|mdx)$/,
})

export default withMDX(nextConfig)

تعریف کامپوننت‌های MDX

فایل mdx-components.tsx را در ریشه پروژه ایجاد کنید:

import type { MDXComponents } from 'mdx/types'

const components: MDXComponents = {}

export function useMDXComponents(): MDXComponents {
  return components
}

این فایل برای App Router الزامی است.

استفاده از فایل‌های MDX در مسیرهای فایل‌محور

می‌توانید فایل‌های .mdx را مانند صفحات معمولی در پوشه app قرار دهید:

app/mdx-page/page.mdx

در این فایل می‌توانید از Markdown و کامپوننت‌های React استفاده کنید:

# خوش آمدید

این متن **bold** و _italic_ است.

استفاده از import برای بارگذاری MDX

می‌توانید فایل‌های MDX را در صفحات TypeScript وارد کنید:

import Welcome from '@/markdown/welcome.mdx'

export default function Page() {
  return <Welcome />
}

بارگذاری پویا با مسیرهای دینامیک

برای بارگذاری فایل‌های MDX بر اساس slug:

export default async function Page({ params }) {
  const { slug } = await params
  const { default: Post } = await import(`@/content/${slug}.mdx`)
  return <Post />
}

export function generateStaticParams() {
  return [{ slug: 'welcome' }, { slug: 'about' }]
}

export const dynamicParams = false

استایل‌دهی با کامپوننت‌های سفارشی

می‌توانید کامپوننت‌های HTML را با نسخه‌های سفارشی جایگزین کنید:

const components = {
  h1: ({ children }) => (
    <h1 style={{ color: 'red', fontSize: '48px' }}>{children}</h1>
  ),
}

استایل‌دهی محلی

برای اعمال استایل فقط روی یک صفحه:

const overrideComponents = {
  h1: ({ children }) => (
    <h1 style={{ color: 'blue', fontSize: '100px' }}>{children}</h1>
  ),
}

<Welcome components={overrideComponents} />

استفاده از layout مشترک

برای اشتراک‌گذاری استایل بین صفحات MDX:

export default function MdxLayout({ children }) {
  return <div style={{ color: 'blue' }}>{children}</div>
}

استفاده از Tailwind Typography

با نصب پلاگین @tailwindcss/typography می‌توانید استایل‌های تایپوگرافی را روی محتوای Markdown اعمال کنید:

export default function MdxLayout({ children }) {
  return (
    <div className="prose prose-h1:text-5xl dark:prose-headings:text-white">
      {children}
    </div>
  )
}

جمع‌بندی

Markdown و MDX در Next.js ابزارهایی قدرتمند برای ترکیب محتوا و کامپوننت‌های پویا هستند. با پیکربندی مناسب، می‌توانید صفحات قابل توسعه، قابل استایل‌دهی و قابل تعامل بسازید که هم برای نویسندگان محتوا و هم برای توسعه‌دهندگان جذاب باشند.