"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", hr: "hr", li: "li", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }, {SvgCard} = _components; if (!SvgCard) _missingMdxReference("SvgCard", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Next.jsとMDXを組み合わせることで、Markdownの書きやすさとReactコンポーネントの柔軟性を両立したブログを構築できます。この記事では、セットアップから記事表示・カスタムコンポーネントの導入まで、実装コードを交えて詳しく解説します。" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "実際のコンポーネント例：SvgCard" }), "\n", _jsxs(_components.p, { children: ["MDXの大きな特長は、記事の中にReactコンポーネントをそのまま埋め込めることです。例として、このブログで使っている ", _jsx(_components.code, { children: "SvgCard" }), " コンポーネントを紹介します。背景デザインを ", _jsx(_components.code, { children: "variant" }), " で切り替えられる記事装飾用カードです。"] }), "\n", _jsx(SvgCard, { title: "グラデーション背景カード", description: "variant=\"gradient\" — ピンク〜パープルのグラデーション。デフォルトのスタイルです。", variant: "gradient" }), "\n", _jsx(SvgCard, { title: "テック背景カード", description: "variant=\"tech\" — ダーク＋ドットグリッド。技術系の記事に合います。", variant: "tech" }), "\n", _jsx(SvgCard, { title: "ウェーブ背景カード", description: "variant=\"wave\" — ウェーブ曲線の穏やかなデザイン。", variant: "wave" }), "\n", _jsx(SvgCard, { title: "オーロラ背景カード", description: "variant=\"aurora\" — 夜空にオーロラが流れるダークデザイン。", variant: "aurora" }), "\n", _jsx(SvgCard, { title: "ジオメトリック背景カード", description: "variant=\"geometric\" — 三角形と同心円を使ったクリーンな幾何学デザイン。", variant: "geometric" }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.h2, { children: "1. MDXとは" }), "\n", _jsxs(_components.p, { children: ["MDXは ", _jsx(_components.strong, { children: "Markdown + JSX" }), " の拡張フォーマットです。通常のMarkdownとして文章を書きながら、Reactコンポーネントをそのまま埋め込めます。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mdx", children: "# 記事タイトル\n\n通常のMarkdownとして書けます。\n\n\n Reactコンポーネントもそのまま使えます。\n\n\n> 引用もMarkdownの記法のまま\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "MDXのメリット:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Markdownのシンプルな記法をそのまま活かせる" }), "\n", _jsx(_components.li, { children: "コードブロック・テーブル・引用などの標準記法がそのまま使える" }), "\n", _jsx(_components.li, { children: "カスタムUIコンポーネントを記事内に自由に埋め込める" }), "\n", _jsx(_components.li, { children: "TypeScriptとの相性が良く、型安全にコンポーネントを管理できる" }), "\n"] }), "\n", _jsx(_components.h2, { children: "2. ライブラリの選択" }), "\n", _jsx(_components.p, { children: "Next.jsでMDXを扱うライブラリは主に2つあります。用途に応じて選びましょう。" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "ライブラリ" }), _jsx(_components.th, { children: "特徴" }), _jsx(_components.th, { children: "向いているケース" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: _jsx(_components.code, { children: "@next/mdx" }) }) }), _jsx(_components.td, { children: "Next.js公式。MDXファイルをページとして直接扱う" }), _jsx(_components.td, { children: "MDXファイル自体がルートになる構成" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.strong, { children: _jsx(_components.code, { children: "next-mdx-remote" }) }) }), _jsx(_components.td, { children: "外部ファイルやDBからMDXを読み込んでレンダリング" }), _jsx(_components.td, { children: "ファイルシステムやCMSから記事を取得する構成" })] })] })] }), "\n", _jsxs(_components.p, { children: ["ブログのようにファイルから記事を読み込む構成には ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "next-mdx-remote" }) }), " が適しています。本記事ではこちらを使います。"] }), "\n", _jsx(_components.h2, { children: "3. インストール" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install next-mdx-remote gray-matter\nnpm install -D @types/mdx\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "next-mdx-remote" }) }), " — MDXをサーバーサイドでシリアライズしてクライアントに渡すライブラリ"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "gray-matter" }) }), " — MDXファイルのフロントマター（", _jsx(_components.code, { children: "---" }), "で囲まれたYAML部分）をパースするライブラリ"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "4. フォルダ構成" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "my-blog/\n├── app/\n│ ├── blog/\n│ │ ├── page.tsx # 記事一覧ページ\n│ │ └── [slug]/\n│ │ └── page.tsx # 記事詳細ページ\n│ └── layout.tsx\n├── content/\n│ └── posts/\n│ ├── hello-world.mdx # ブログ記事\n│ └── nextjs-tips.mdx\n├── components/\n│ ├── mdx/\n│ │ ├── MDXRenderer.tsx # MDXレンダラー\n│ │ ├── MDXComponents.tsx # カスタムコンポーネント定義\n│ │ ├── Alert.tsx # 記事内UIコンポーネント例\n│ │ └── SvgCard.tsx # SVG背景カードコンポーネント\n│ └── blog/\n│ └── PostCard.tsx # 記事一覧カード\n└── lib/\n └── posts.ts # 記事データ取得ロジック\n" }) }), "\n", _jsx(_components.h2, { children: "5. 記事ファイルの作成" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "content/posts/hello-world.mdx" }), " を作成します。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mdx", children: "---\ntitle: \"はじめての記事\"\ndate: \"2026-03-03\"\nupdated: \"2026-03-03\"\ndescription: \"Next.js × MDXブログ最初の投稿です。\"\ntags: [\"Next.js\", \"MDX\"]\n---\n\n## はじめに\n\n\n\n通常のMarkdownとして**太字**や`コード`も使えます。\n" }) }), "\n", _jsx(_components.h2, { children: "6. 記事データの取得ロジック" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// lib/posts.ts\nimport fs from 'fs';\nimport path from 'path';\nimport matter from 'gray-matter';\n\nconst POSTS_DIR = path.join(process.cwd(), 'content/posts');\n\nexport type PostMeta = {\n slug: string;\n title: string;\n date: string;\n updated: string;\n description: string;\n tags: string[];\n};\n\nexport type Post = PostMeta & {\n content: string;\n};\n\nexport function getAllPosts(): PostMeta[] {\n const files = fs.readdirSync(POSTS_DIR);\n\n return files\n .filter((file) => file.endsWith('.mdx'))\n .map((file) => {\n const slug = file.replace(/\\.mdx$/, '');\n const raw = fs.readFileSync(path.join(POSTS_DIR, file), 'utf-8');\n const { data } = matter(raw);\n\n return {\n slug,\n title: data.title ?? '',\n date: data.date ?? '',\n updated: data.updated ?? '',\n description: data.description ?? '',\n tags: data.tags ?? [],\n };\n })\n .sort((a, b) => (a.date < b.date ? 1 : -1));\n}\n\nexport function getPostBySlug(slug: string): Post | null {\n const filePath = path.join(POSTS_DIR, `${slug}.mdx`);\n if (!fs.existsSync(filePath)) return null;\n\n const raw = fs.readFileSync(filePath, 'utf-8');\n const { data, content } = matter(raw);\n\n return {\n slug,\n title: data.title ?? '',\n date: data.date ?? '',\n updated: data.updated ?? '',\n description: data.description ?? '',\n tags: data.tags ?? [],\n content,\n };\n}\n" }) }), "\n", _jsx(_components.h2, { children: "7. SvgCard コンポーネントの実装" }), "\n", _jsxs(_components.p, { children: ["MDXで ", _jsx(_components.code, { children: "" }), " を使うために、5種類の背景デザインを持つコンポーネントを作成します。"] }), "\n", _jsx(_components.h3, { children: "variant一覧" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "variant" }), _jsx(_components.th, { children: "デザイン" }), _jsx(_components.th, { children: "用途例" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "gradient" }) }), _jsx(_components.td, { children: "ピンク〜パープルのグラデーション" }), _jsx(_components.td, { children: "デフォルト・汎用" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "tech" }) }), _jsx(_components.td, { children: "ダーク＋グリーンのドットグリッド" }), _jsx(_components.td, { children: "技術系・開発系記事" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "wave" }) }), _jsx(_components.td, { children: "ライトブルーのウェーブ曲線" }), _jsx(_components.td, { children: "穏やか・日常系記事" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "aurora" }) }), _jsx(_components.td, { children: "星空＋オーロラのダークデザイン" }), _jsx(_components.td, { children: "深夜・哲学系記事" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.code, { children: "geometric" }) }), _jsx(_components.td, { children: "三角形＋同心円の幾何学デザイン" }), _jsx(_components.td, { children: "クリーン・ミニマル" })] })] })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/mdx/SvgCard.tsx\ntype SvgCardVariant = 'gradient' | 'tech' | 'wave' | 'aurora' | 'geometric';\n\ntype SvgCardProps = {\n title: string;\n description: string;\n variant?: SvgCardVariant;\n};\n\n// gradient背景\nfunction GradientBg() {\n return (\n \n );\n}\n\n// tech背景\nfunction TechBg() {\n return (\n \n );\n}\n\n// wave背景\nfunction WaveBg() {\n return (\n \n );\n}\n\n// aurora背景\nfunction AuroraBg() {\n return (\n \n );\n}\n\n// geometric背景\nfunction GeometricBg() {\n return (\n \n );\n}\n" }) }), "\n", _jsx(_components.p, { children: "各背景はすべて純粋なSVGで実装しています。画像ファイルが不要なため、ページ表示が高速でビルドサイズも増えません。" }), "\n", _jsx(_components.h3, { children: "コンポーネントの本体" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "const variantConfig = {\n gradient: { BgComponent: GradientBg, titleClass: 'text-white', descClass: 'text-pink-100',\n badgeClass: 'bg-white/20 text-white border border-white/30' },\n tech: { BgComponent: TechBg, titleClass: 'text-green-400', descClass: 'text-slate-300',\n badgeClass: 'bg-green-400/10 text-green-400 border border-green-400/30' },\n wave: { BgComponent: WaveBg, titleClass: 'text-sky-900', descClass: 'text-sky-700',\n badgeClass: 'bg-sky-100 text-sky-700 border border-sky-200' },\n aurora: { BgComponent: AuroraBg, titleClass: 'text-white', descClass: 'text-slate-300',\n badgeClass: 'bg-white/10 text-teal-300 border border-teal-400/30' },\n geometric: { BgComponent: GeometricBg, titleClass: 'text-slate-800', descClass: 'text-slate-500',\n badgeClass: 'bg-slate-100 text-slate-600 border border-slate-200' },\n};\n\nexport function SvgCard({ title, description, variant = 'gradient' }: SvgCardProps) {\n const { BgComponent, titleClass, descClass, badgeClass } = variantConfig[variant];\n\n return (\n

\n \n

\n \n variant="{variant}"\n \n

{title}

{description}

\n );\n}\n" }) }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsxs(_components.strong, { children: [_jsx(_components.code, { children: "not-prose" }), " クラスについて:"] }), " Tailwind Typographyの ", _jsx(_components.code, { children: "prose" }), " クラスが適用されている記事本文の中でコンポーネントを使う場合、", _jsx(_components.code, { children: "not-prose" }), " を付けることでTypographyのスタイルをリセットできます。"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "8. カスタムコンポーネントの登録" }), "\n", _jsxs(_components.p, { children: ["作成した ", _jsx(_components.code, { children: "SvgCard" }), " と ", _jsx(_components.code, { children: "Alert" }), " を ", _jsx(_components.code, { children: "mdxComponents" }), " に登録すれば、MDXファイル内で ", _jsx(_components.code, { children: "import" }), " なしに使えるようになります。"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/mdx/MDXComponents.tsx\nimport type { MDXComponents } from 'mdx/types';\nimport { Alert } from './Alert';\nimport { SvgCard } from './SvgCard';\n\nexport const mdxComponents: MDXComponents = {\n // カスタムコンポーネント（import不要でMDX内で使える）\n Alert,\n SvgCard,\n\n // HTML要素のオーバーライド\n h2: ({ children }) => (\n

\n {children}\n

\n ),\n a: ({ href, children }) => (\n \n {children}\n \n ),\n code: ({ children }) => (\n \n {children}\n \n ),\n};\n" }) }), "\n", _jsx(_components.h2, { children: "9. MDXRenderer コンポーネント" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/mdx/MDXRenderer.tsx\n'use client';\n\nimport { MDXRemote } from 'next-mdx-remote';\nimport type { MDXRemoteSerializeResult } from 'next-mdx-remote';\nimport { mdxComponents } from './MDXComponents';\n\ntype Props = {\n source: MDXRemoteSerializeResult;\n};\n\nexport function MDXRenderer({ source }: Props) {\n return (\n

\n \n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { children: "10. 記事詳細ページ" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/blog/[slug]/page.tsx\nimport { notFound } from 'next/navigation';\nimport type { Metadata } from 'next';\nimport { serialize } from 'next-mdx-remote/serialize';\nimport rehypePrettyCode from 'rehype-pretty-code';\nimport { getAllPosts, getPostBySlug } from '@/lib/posts';\nimport { MDXRenderer } from '@/components/mdx/MDXRenderer';\n\ntype Props = { params: Promise<{ slug: string }> };\n\nexport async function generateStaticParams() {\n return getAllPosts().map((post) => ({ slug: post.slug }));\n}\n\nexport async function generateMetadata({ params }: Props): Promise {\n const { slug } = await params;\n const post = getPostBySlug(slug);\n if (!post) return { title: '記事が見つかりません' };\n\n return {\n title: post.title,\n description: post.description,\n openGraph: { title: post.title, description: post.description, type: 'article' },\n };\n}\n\nexport default async function BlogPostPage({ params }: Props) {\n const { slug } = await params;\n const post = getPostBySlug(slug);\n if (!post) notFound();\n\n const mdxSource = await serialize(post.content, {\n mdxOptions: {\n rehypePlugins: [[rehypePrettyCode, { theme: 'github-dark' }]],\n },\n });\n\n return (\n

{post.title}

\n {post.date}\n

\n \n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { children: "まとめ" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "MDX" }), " によってReactコンポーネントを記事内に直接埋め込める"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "SvgCard" }) }), " のように純粋なSVGで背景を描くことで、画像なしで視覚的に豊かな記事装飾が作れる"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "mdxComponents" }) }), " に登録したコンポーネントは、全記事で ", _jsx(_components.code, { children: "import" }), " なしに使える"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "next-mdx-remote" }) }), " のシリアライズをサーバーサイドで行い、レンダリングをクライアントに委ねることで適切な責務分離ができる"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: _jsx(_components.code, { children: "rehype-pretty-code" }) }), " でコードブロックのシンタックスハイライトを適用する"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Next.js × MDX でブログを作成する方法