Next.js से MDX ब्लॉग खुद बनाना - यह ब्लॉग कैसे बना

अभी आप जो ब्लॉग पढ़ रहे हैं, उसमें न कोई डेटाबेस है, न कोई एडमिन पैनल। हर पोस्ट बस एक मार्कडाउन फ़ाइल है। कैसे बनाया, वह पूरा यहां खोलकर बता रहा हूं।

फ़ाइल-बेस्ड क्यों

ब्लॉग टूल बहुत सारे हैं, लेकिन सोलो डेवलपर के लिए ज़्यादातर ज़रूरत से ज़्यादा भारी हैं।

• CMS: एडमिन पैनल, इंटीग्रेशन और फ़ीस साथ आती हैं
• Notion इंटीग्रेशन: आसान है, लेकिन रेंडरिंग, स्पीड और कस्टमाइज़ेशन में अटक जाता है
• मार्कडाउन फ़ाइलें: पोस्ट कोड के साथ वर्ज़न कंट्रोल में रहती हैं, मुफ़्त हैं, और git push ही पब्लिश है

मैंने तीसरा चुना। friction सबसे कम है।

फ़ोल्डर स्ट्रक्चर

मुख्य हिस्सा देखें तो कुछ ऐसा दिखता है।

src/
├── app/
│   ├── page.tsx              # 홈 - 글 목록
│   ├── posts/[slug]/page.tsx # 글 상세
│   └── sitemap.ts            # /sitemap.xml
├── content/posts/*.mdx       # ← 글은 여기에만 추가
└── lib/posts.ts              # 목록·메타 로딩

फ़ाइल का नाम ही URL बन जाता है। hello.mdx खुलती है /posts/hello पर।

MDX सेटअप

App Router में MDX इस्तेमाल करने के लिए @next/mdx जोड़ते हैं। Next 16 में Turbopack डिफ़ॉल्ट है, इसलिए remark/rehype प्लगइन को स्ट्रिंग नाम के रूप में पास करना पड़ता है (फ़ंक्शन रेफ़रेंस पास नहीं कर सकते)।

const withMDX = createMDX({
  options: {
    remarkPlugins: ["remark-gfm"],   // 표·취소선 지원
    rehypePlugins: ["rehype-slug"],  // 제목 앵커
  },
})

frontmatter की जगह meta export

आम तौर पर मार्कडाउन के ऊपर --- ब्लॉक (frontmatter) में टाइटल और डेट लिखते हैं, लेकिन MDX में जावास्क्रिप्ट समा सकती है, इसलिए एक और साफ़ तरीक़ा है। बस ऑब्जेक्ट को export कर देना।

export const meta = {
  title: "글 제목",
  date: "2026-07-06",
  category: "dev",
}

## 본문 시작

लिस्ट पेज पर हर फ़ाइल को dynamic import करके सिर्फ़ यह meta पढ़ते हैं।

const mod = await import(`@/content/posts/${slug}.mdx`)
return mod.meta   // 본문 렌더 없이 메타만

न पार्सिंग लाइब्रेरी चाहिए, न अलग से कोई इंडेक्स।

SEO शुरुआत से ही

अगर ब्लॉग का मक़सद ट्रैफ़िक लाना है, तो SEO बाद में नहीं, शुरुआत में ही डालना चाहिए। मैंने हर पोस्ट के मेटाडेटा, Open Graph और JSON-LD स्ट्रक्चर्ड डेटा के साथ sitemap.xml, robots.txt और rss.xml तक बुनियादी तौर पर लगा दिए। इस पर अगली पोस्ट में और विस्तार से बात करूंगा।

सार

• पोस्ट = एक .mdx फ़ाइल, फ़ाइल का नाम ही URL
• @next/mdx + स्ट्रिंग प्लगइन (Turbopack)
• frontmatter की जगह export const meta
• SEO पहले कमिट से ही

इसी स्ट्रक्चर से आपका ब्लॉग भी 30 मिनट में खड़ा हो सकता है। मैं इसी तरीक़े से आज की लहर जैसे प्रोडक्ट की कहानियां लगातार जमा कर रहा हूं।