Glossary
What is MDX?
In depth
MDX launched in 2018 (John Otander), v3 in 2024 — modern parser, source map support, async components. Idea: write a React component directly inside a Markdown file — <Card title="X" /> alongside Markdown text.
Use cases: (1) **Documentation sites** — Stripe Docs, React Docs, Vercel docs run on MDX. (2) **Tech blogs** — Lee Robinson, Dan Abramov, Josh Comeau use MDX. (3) **Marketing pages** — Vercel marketing site is MDX. (4) **Programmatic content** — Craftwebstudio blog is MDX.
Next.js 15 + MDX setup: (1) install `@next/mdx`. (2) configure `mdx-components.tsx`. (3) create `app/blog/[slug]/page.mdx`. (4) map custom components for H1, code blocks, callouts. (5) parse frontmatter via `gray-matter`.
Advantages vs CMS: (1) **Git-versioned** — content reviewed in PR. (2) **Type-safe references** — MDX imports React components, IDE catches typos. (3) **Performance** — pre-rendered at build, 0 runtime cost. (4) **Free** — no CMS subscription. (5) **AI-generation friendly** — Gemini/Claude → MDX directly.
Disadvantages vs CMS: (1) **Non-technical editors blocked** — Git workflow not approachable. (2) **Image management manual** — no asset CDN integration. (3) **Search/preview limited** — no admin UI. (4) **Schema validation custom** — Zod frontmatter validation needed.
Craftwebstudio uses MDX for blog (850+ posts) + programmatic content. Hybrid: MDX-ში long-form articles + Sanity for structured taxonomies (tags, authors).
Examples
- 1Code block with syntax highlight: ```typescript ... ``` rendered via Shiki
- 2Custom callout: <Callout type="warning">Watch out for X</Callout>
- 3Frontmatter: --- title: ... date: ... author: ... --- → Zod-validated
- 4AI content pipeline: Gemini generates MDX → human review PR → merged
- 5Build-time RSS: glob MDX → parse frontmatter → emit /blog/rss.xml
Related terms
CMS (Content Management System)
A CMS (Content Management System) is software that lets you create, edit and publish website content without writing cod…
Next.js
Next.js is a React-based full-stack framework covering server-side rendering, static generation, file-based routing, edg…
React
React is a JavaScript library for building UIs — released by Facebook in 2013. Today the largest front-end library — 40%…
Related services
Frequently asked questions
MDX vs CMS — when to use which?▾
MDX: developer-authored (docs, tech blogs), Git workflow OK, $0 budget. CMS: non-technical editors, frequent updates, structured taxonomies. A hybrid often wins.
What's the image pattern in MDX?▾
(1) Static: public/blog/[slug]/*.jpg + Next.js Image component. (2) Cloudinary/Sanity CDN URL inline. (3) Custom rehype plugin → automatic AVIF + responsive.
Is MDX optimal for SEO?▾
Yes — pre-rendered HTML, fast LCP, easy Article schema integration. Migrating WordPress → MDX often improves rankings via Core Web Vitals + structured data.
Ready for a free consultation?
Get in touch — we reply within 24 hours with a scoped project estimate.