შინაარსზე გადასვლა

ტერმინები

რა არის MDX?

ვრცლად

MDX 2018-ში დაიწყო (John Otander), 2024 v3 — modern parser, source map support, async components. Idea: Markdown ფაილში React component-ი დაწერო პირდაპირ — <Card title="X" /> Markdown text-თან ერთად.

Use cases: (1) **Documentation sites** — Stripe Docs, React Docs, Vercel docs MDX-ზე. (2) **Tech blogs** — Lee Robinson, Dan Abramov, Josh Comeau MDX-ით. (3) **Marketing pages** — Vercel marketing site MDX. (4) **Programmatic content** — Craftwebstudio blog MDX-ში.

Next.js 15 + MDX setup: (1) `@next/mdx` package install. (2) `mdx-components.tsx` configure. (3) `app/blog/[slug]/page.mdx` create. (4) Custom components map H1, code blocks, callouts. (5) Frontmatter via `gray-matter` parse.

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 direct write.

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-ში structured taxonomies (tags, authors).

მაგალითები

  • 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

მსგავსი ტერმინები

CMS (Content Management System)

CMS (Content Management System) არის პროგრამა, რომელიც საშუალებას გაძლევს შექმნა, რედაქტირება და გამოქვეყნდეს კონტენტი ვ…

Next.js

Next.js არის React-based full-stack framework, რომელიც ფარავს server-side rendering, static generation, file-based routi…

React

React არის JavaScript ბიბლიოთეკა UI-ს ასაშენებლად — Facebook-მა 2013-ში გაუშვა. დღეს უმსხვილესი frontend ბიბლიოთეკა — 40…

დაკავშირებული სერვისები

ვებსაიტის დამზადება

მორგებული, სწრაფი, SEO-მზად ვებსაიტი ბიზნესისთვის.

ელექტრონული კომერცია

ონლაინ მაღაზია პროდუქტების, გადახდის და ლოგისტიკის სრული სტეკით.

ლენდინგ-გვერდი

მაღალი-კონვერტაბელური ერთგვერდიანი საიტი კამპანიისთვის.

ხშირად დასმული კითხვები

MDX vs CMS — როდის რომელი?▾

MDX: developer-authored (docs, tech blogs), Git workflow OK, ბიუჯეტი $0. CMS: non-technical editors, frequent updates, structured taxonomies. ჰიბრიდი ხშირად ჯობია.

MDX-ში images რა pattern?▾

(1) Static: public/blog/[slug]/*.jpg + Next.js Image component. (2) Cloudinary/Sanity CDN URL inline. (3) Custom rehype plugin → automatic AVIF + responsive.

MDX SEO-ისთვის optimal?▾

კი — pre-rendered HTML, fast LCP, Article schema integration easy. გასცვლა WordPress → MDX often improves rankings via Core Web Vitals + structured data.

გინდა უფასო კონსულტაცია?

დაგვიკავშირდი — 24 საათის განმავლობაში დაგიბრუნებთ საპასუხო წერილს პროექტის შეფასებით.

დაიწყე პროექტი
ახლა რთავსCraftwebstudio Mix