18:["$","div",null,{"id":"content-detail","className":"_1oyqyhe0","children":[["$","p",null,{"className":"_1oyqyhe4","children":["ブログ記事を Markdown で書いていると、「ここだけReactコンポーネントを差し込みたい」「コードブロックをサイトのデザインに合わせたい」と思う瞬間があります。",["$","br",null,{}],"\n","そこで出会ったのが ",["$","strong",null,{"className":"_1oyqyhe5","children":"MDX"}],"。",["$","br",null,{}],"\n","さらに Next.js の App Router に合わせやすいのが ",["$","strong",null,{"className":"_1oyqyhe5","children":"next-mdx-remote-client"}]," でした。"]}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":"この記事では、私がこのライブラリを選んだ理由、実装手順などを、microCMS連携＆静的生成（SG）構成という実戦的な環境で解説します。"}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"なぜ-mdx-を導入したか","children":"なぜ MDX を導入したか"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":"当初は microCMS のリッチエディタで記事管理をしようとしていましたが、以下のような課題がありました。"}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":"特定箇所にだけデザイン済みの UI 部品を入れたいのに、HTML直書きか画像で代用するしかない"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"コードブロックのハイライトや装飾を記事ごとに調整するのが面倒"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"OGPカードやカスタム埋め込み（Tweet、YouTubeなど）の統一が難しい"}],"\n"]}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":["このように、Markdown はシンプルで扱いやすいですが、インタラクティブ要素や高度なレイアウトの埋め込みには不向きでした。",["$","br",null,{}],"\n","一方で、MDX は",["$","strong",null,{"className":"_1oyqyhe5","children":"MarkdownにReactコンポーネントを埋め込める"}],"ので、こういった拡張が容易になります。たとえば、記事中に ",["$","code",null,{"className":"_1oyqyhe8","children":"\\"}]," と書くだけで、スタイルも機能も統一されたリンクカードを呼び出せます。"]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"なぜ-next-mdx-remote-client-を選んだのか","children":"なぜ next-mdx-remote-client を選んだのか"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":"MDXをNext.jsで扱う方法は以下のようにいくつかあります。"}],"\n",["$","table",null,{"className":"_1oyqyhec","children":[["$","thead",null,{"children":["$","tr",null,{"children":[["$","th",null,{"className":"_1oyqyhed","style":{"textAlign":"left"},"children":"方法"}],["$","th",null,{"className":"_1oyqyhed","style":{"textAlign":"left"},"children":"特徴"}],["$","th",null,{"className":"_1oyqyhed","style":{"textAlign":"left"},"children":"弱点"}]]}]}],["$","tbody",null,{"children":[["$","tr",null,{"children":[["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":["$","code",null,{"className":"_1oyqyhe8","children":"@next/mdx"}]}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"App Routerに組み込みやすい"}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"サーバーでの動的パースが難しい"}]]}],["$","tr",null,{"children":[["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":["$","code",null,{"className":"_1oyqyhe8","children":"next-mdx-remote"}]}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"サーバーでシリアライズし、クライアントで描画可能"}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"App Router対応に工夫が必要"}]]}],["$","tr",null,{"children":[["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":["自前 (",["$","code",null,{"className":"_1oyqyhe8","children":"@mdx-js/mdx"}],")"]}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"自由度MAX"}],["$","td",null,{"className":"_1oyqyhee","style":{"textAlign":"left"},"children":"設定が煩雑、保守コスト高"}]]}]]}]]}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":[["$","code",null,{"className":"_1oyqyhe8","children":"next-mdx-remote-client"}]," は",["$","strong",null,{"className":"_1oyqyhe5","children":"App Routerに対応"}],"しており、サーバーでパース → クライアントで描画という流れをシンプルに作れます。",["$","code",null,{"className":"_1oyqyhe8","children":"components"}]," の差し替えも容易で、記事ごとに動的なUIを組み込みやすいのが魅力です。",["$","br",null,{}],"\n","今回の構成では App Router + SSG + microCMS という要件だったため、ビルド時に microCMS から記事を取得 → MDX としてシリアライズ → 静的ページ生成という流れに最も適していた ",["$","code",null,{"className":"_1oyqyhe8","children":"next-mdx-remote-client"}]," を選びました。"]}],"\n",["$","a",null,{"href":"https://github.com/ipikuka/next-mdx-remote-client","target":"_blank","rel":"noreferrer noopener","className":"_18tyvhj0","children":["$","div",null,{"className":"_18tyvhj1","children":[["$","div",null,{"className":"_18tyvhj2","children":[["$","div",null,{"children":[["$","p",null,{"className":"_18tyvhj3","children":"GitHub - ipikuka/next-mdx-remote-client: A wrapper of `@mdx-js/mdx` for `Next.js` applications in order to load MDX content. It is a fork of `next-mdx-remote`."}],["$","p",null,{"className":"_18tyvhj4","children":"A wrapper of `@mdx-js/mdx` for `Next.js` applications in order to load MDX content. It is a fork of `next-mdx-remote`. - ipikuka/next-mdx-remote-client"}]]}],["$","div",null,{"className":"_18tyvhj5","children":[["$","$L19",null,{"tag":"img","src":"https://github.githubassets.com/favicons/favicon.svg","className":"_18tyvhj6"}],["$","span",null,{"className":"_18tyvhj7","children":"github.com"}]]}]]}],["$","div",null,{"className":"_18tyvhj8","children":["$","$L19",null,{"tag":"img","src":"https://opengraph.githubassets.com/a4086b1a9f06e35272e016b0292f6ded616f40e1629f86fea0bcde0663a5638c/ipikuka/next-mdx-remote-client","className":"_18tyvhj9"}]}]]}]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"技術スタック","children":"技術スタック"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":"主に以下の技術を使用して、本サイトを作成しました。"}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":"フロント：Next.js[App Router]（React/TypeScript）"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"デザイン：TailwindCSS、vanilla-extract"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"ライブラリ：next-mdx-remote-client"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"コンテンツ管理：microCMS"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"デプロイ：Vercel"}],"\n"]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"導入手順","children":"導入手順"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":"Next.js[App Router] のプロジェクトは作成済みとして、進めていきます。"}],"\n",["$","h3",null,{"className":"_1oyqyhe2","id":"ライブラリのインストール","children":"ライブラリのインストール"}],"\n",["$","$L1b",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"backgroundColor":"#24292e","color":"#e1e4e8"},"tabIndex":"0","data-language":"plaintext","data-theme":"github-dark","children":["$","code",null,{"className":"$undefined","data-language":"plaintext","data-theme":"github-dark","style":{"display":"grid"},"children":["$","span",null,{"data-line":"","children":["$","span",null,{"children":"npm install next-mdx-remote-client remark-gfm open-graph-scraper"}]}]}]}]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"remark-gfm"}],"：GitHub Flavored Markdown（表・チェックボックスなど）対応"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"open-graph-scraper"}],"：OGPデータ取得"]}],"\n"]}],"\n",["$","h3",null,{"className":"_1oyqyhe2","id":"mdx-変換オプションの設定","children":"MDX 変換オプションの設定"}],"\n",["$","$L1b",null,{"data-rehype-pretty-code-figure":"","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"github-dark","children":"/src/libs/mdxOptions.ts"}],["$","pre",null,{"style":{"backgroundColor":"#24292e","color":"#e1e4e8"},"tabIndex":"0","data-language":"tsx","data-theme":"github-dark","children":["$","code",null,{"className":"$undefined","data-language":"tsx","data-theme":"github-dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#F97583"},"children":" type"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { MDXRemoteOptions } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"next-mdx-remote-client/rsc\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" remarkGfm "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"remark-gfm\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"export"}],["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" mdxOptions"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" MDXRemoteOptions"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" mdxOptions: {"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" remarkPlugins: [remarkGfm],"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":" format: "}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":"\"mdx\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":" parseFrontmatter: "}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"true"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":","}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"};"}]}]]}]}]]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"MDXRemote"}],"（RSC版）に渡す変換オプションを事前定義。"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"remark-gfm"}]," で GFM（表/チェックボックス/打消し等）を有効化。"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"format: \"mdx\""}]," により、本文内の JSX（MDX）構文を許可。"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"parseFrontmatter: true"}]," で、先頭の ",["$","code",null,{"className":"_1oyqyhe8","children":"---"}]," で囲うFrontmatterを ",["$","code",null,{"className":"_1oyqyhe8","children":"source.frontmatter"}]," に抽出"]}],"\n"]}],"\n",["$","h3",null,{"className":"_1oyqyhe2","id":"ルーティングと静的生成sg-データ取得","children":"ルーティングと静的生成（SG）/ データ取得"}],"\n",["$","h4",null,{"className":"_1oyqyhe3","id":"動的ルートの静的化generatestaticparams","children":["動的ルートの静的化（",["$","code",null,{"className":"_1oyqyhe8","children":"generateStaticParams"}],"）"]}],"\n",["$","$L1b",null,{"data-rehype-pretty-code-figure":"","children":["$","pre",null,{"style":{"backgroundColor":"#24292e","color":"#e1e4e8"},"tabIndex":"0","data-language":"tsx","data-theme":"github-dark","children":["$","code",null,{"className":"$undefined","data-language":"tsx","data-theme":"github-dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"export"}],["$","span",null,{"style":{"color":"#F97583"},"children":" async"}],["$","span",null,{"style":{"color":"#F97583"},"children":" function"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" generateStaticParams"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" slugs"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#F97583"},"children":" await"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" getAllBlogSlugs"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" return"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" (slugs "}],["$","span",null,{"style":{"color":"#F97583"},"children":"??"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" [])."}],["$","span",null,{"style":{"color":"#B392F0"},"children":"map"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"(({ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"articleSlug"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ({ slug: articleSlug }));"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"}"}]}]]}]}]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":["ビルド時に microCMS からすべての ",["$","code",null,{"className":"_1oyqyhe8","children":"slug"}]," を取得 → 各記事ページをSGで生成"]}],"\n"]}],"\n",["$","h4",null,{"className":"_1oyqyhe3","id":"ページ本体rsc--ogp-前処理--mdx描画","children":"ページ本体（RSC） + OGP 前処理 + MDX描画"}],"\n",["$","$L1b",null,{"data-rehype-pretty-code-figure":"","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"github-dark","children":"/src/app/blog/[slug]/page.tsx"}],["$","pre",null,{"style":{"backgroundColor":"#24292e","color":"#e1e4e8"},"tabIndex":"0","data-language":"tsx","data-theme":"github-dark","children":["$","code",null,{"className":"$undefined","data-language":"tsx","data-theme":"github-dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" React "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"react\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { getAllBlogSlugs, getBlogBySlug } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/libs/microcms\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { notFound } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"next/navigation\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { fetchOgpDataFromMdx } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/libs/fetchOgpDataFromMdx\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { MdxComponents } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/components/PortfolioAndBlog/ContentPage/MdxComponents\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { MDXRemote } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"next-mdx-remote-client/rsc\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { mdxOptions } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/libs/mdxOptions\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" BlogClientWrapper "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/components/PortfolioAndBlog/ContentPage/BlogClientWrapper\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"type"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" PageProps"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFAB70"},"children":" params"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" Promise"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"<{ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"slug"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" string"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }>;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"};"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"export"}],["$","span",null,{"style":{"color":"#F97583"},"children":" async"}],["$","span",null,{"style":{"color":"#F97583"},"children":" function"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" generateStaticParams"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"() {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" slugs"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#F97583"},"children":" await"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" getAllBlogSlugs"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" return"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" (slugs "}],["$","span",null,{"style":{"color":"#F97583"},"children":"??"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" [])."}],["$","span",null,{"style":{"color":"#B392F0"},"children":"map"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"(({ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"articleSlug"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ({ slug: articleSlug }));"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"export"}],["$","span",null,{"style":{"color":"#F97583"},"children":" default"}],["$","span",null,{"style":{"color":"#F97583"},"children":" async"}],["$","span",null,{"style":{"color":"#F97583"},"children":" function"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" BlogContentPage"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"({ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"params"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" PageProps"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { "}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"slug"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#F97583"},"children":" await"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" params;"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" blogContentData"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#F97583"},"children":" await"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" getBlogBySlug"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"(slug);"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // 存在しなければ 404"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" if"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ("}],["$","span",null,{"style":{"color":"#F97583"},"children":"!"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"blogContentData) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"return"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" notFound"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"();"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // Markdown → MDX に変換しつつ、OGPも取得"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { "}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"ogpDataList"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#F97583"},"children":" await"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" fetchOgpDataFromMdx"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"(blogContentData.body);"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" components"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#B392F0"},"children":" MdxComponents"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"(ogpDataList);"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" return"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"BlogClientWrapper"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" blogContent"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{blogContentData}>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"MDXRemote"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" source"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{blogContentData.body}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" options"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{mdxOptions}"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" components"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{components}"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" />"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":" "}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" );"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"}"}]}],"\n",["$","span",null,{"data-line":"","children":" "}]]}]}]]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"getBlogBySlug(slug)"}]," で RSC側（サーバー）でデータ取得"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"fetchOgpDataFromMdx()"}]," で本文から OGPカードのURL を抽出 → ビルド/サーバーで OGPデータを取得（クライアントで fetch しない）"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"MdxComponents(ogpDataList)"}],"：取得したOGPデータのマップを差し込んだコンポーネント辞書"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"MDXRemote"}],"（RSC版）に ",["$","code",null,{"className":"_1oyqyhe8","children":"source"}],"（MDX文字列）・",["$","code",null,{"className":"_1oyqyhe8","children":"options"}],"・",["$","code",null,{"className":"_1oyqyhe8","children":"components"}]," を渡して描画"]}],"\n"]}],"\n",["$","h3",null,{"className":"_1oyqyhe2","id":"mdx-コンポーネント辞書","children":"MDX コンポーネント辞書"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":["上記の ",["$","code",null,{"className":"_1oyqyhe8","children":"components={components}"}]," には、下記のようにhtml変換後の各要素に対応するカスタムコンポーネントをマッピングしたオブジェクトを渡します。"]}],"\n",["$","$L1b",null,{"data-rehype-pretty-code-figure":"","children":[["$","figcaption",null,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"github-dark","children":"/src/components/MdxComponents/index.tsx"}],["$","pre",null,{"style":{"backgroundColor":"#24292e","color":"#e1e4e8"},"tabIndex":"0","data-language":"tsx","data-theme":"github-dark","children":["$","code",null,{"className":"$undefined","data-language":"tsx","data-theme":"github-dark","style":{"display":"grid"},"children":[["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" React "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"react\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#F97583"},"children":" type"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { MDXComponents } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"next-mdx-remote-client/rsc\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { OgpCard } "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"@/components/PortfolioAndBlog/ContentPage/MdxComponents/OgpCard\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"import"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" *"}],["$","span",null,{"style":{"color":"#F97583"},"children":" as"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" styles "}],["$","span",null,{"style":{"color":"#F97583"},"children":"from"}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":" \"./style.css\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"type"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" OgpCardProps"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#B392F0"},"children":" React"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"."}],["$","span",null,{"style":{"color":"#B392F0"},"children":"ComponentProps"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"<"}],["$","span",null,{"style":{"color":"#F97583"},"children":"typeof"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" OgpCard>;"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":"export"}],["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" MdxComponents"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ("}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#FFAB70"},"children":" ogpMap"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" Record"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"<"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"string"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":", "}],["$","span",null,{"style":{"color":"#B392F0"},"children":"OgpCardProps"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"["}],["$","span",null,{"style":{"color":"#9ECBFF"},"children":"\"ogp\""}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"]>"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#E1E4E8"},"children":")"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" MDXComponents"}],["$","span",null,{"style":{"color":"#F97583"},"children":" =>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ({"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // ---- MDX全体のラッパー ----"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" wrapper"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ({ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"children"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"div"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.wrapper}>{children},"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // ---- 見出し ----"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" h2"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ("}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"props"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"h2"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.h2} {"}],["$","span",null,{"style":{"color":"#F97583"},"children":"..."}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"props} />,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" h3"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ("}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"props"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"h3"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.h3} {"}],["$","span",null,{"style":{"color":"#F97583"},"children":"..."}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"props} />,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" h4"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ("}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"props"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"h3"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.h4} {"}],["$","span",null,{"style":{"color":"#F97583"},"children":"..."}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"props} />,"}]]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // ---- テキスト要素 ----"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" p"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ("}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"props"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"p"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.p} {"}],["$","span",null,{"style":{"color":"#F97583"},"children":"..."}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"props} />,"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" strong"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ("}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"props"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":") "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#85E89D"},"children":"strong"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" className"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{styles.strong} {"}],["$","span",null,{"style":{"color":"#F97583"},"children":"..."}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"props} />,"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" "}]}],"\n",["$","span",null,{"data-line":"","children":" "}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#6A737D"},"children":" // ---- OGPカード ----"}]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#B392F0"},"children":" OgpCard"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":": ({ "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"url"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" { "}],["$","span",null,{"style":{"color":"#FFAB70"},"children":"url"}],["$","span",null,{"style":{"color":"#F97583"},"children":":"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" string"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" }) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"=>"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" {"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" const"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" ogp"}],["$","span",null,{"style":{"color":"#F97583"},"children":" ="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ogpMap[url];"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" if"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" ("}],["$","span",null,{"style":{"color":"#F97583"},"children":"!"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"ogp) "}],["$","span",null,{"style":{"color":"#F97583"},"children":"return"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":" null"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":";"}]]}],"\n",["$","span",null,{"data-line":"","children":[["$","span",null,{"style":{"color":"#F97583"},"children":" return"}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":" <"}],["$","span",null,{"style":{"color":"#79B8FF"},"children":"OgpCard"}],["$","span",null,{"style":{"color":"#B392F0"},"children":" ogp"}],["$","span",null,{"style":{"color":"#F97583"},"children":"="}],["$","span",null,{"style":{"color":"#E1E4E8"},"children":"{ogp} />;"}]]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":" },"}]}],"\n",["$","span",null,{"data-line":"","children":["$","span",null,{"style":{"color":"#E1E4E8"},"children":"});"}]}]]}]}]]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"wrapper"}]," で本文全体のレイアウトや余白を統一"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":["MDX の標準タグ（",["$","code",null,{"className":"_1oyqyhe8","children":"h2"}],"/",["$","code",null,{"className":"_1oyqyhe8","children":"h3"}],"/",["$","code",null,{"className":"_1oyqyhe8","children":"p"}],"/...）やカスタムタグ（",["$","code",null,{"className":"_1oyqyhe8","children":""}],"）を、見た目/機能つきの React に差し替え"]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":[["$","code",null,{"className":"_1oyqyhe8","children":"\\"}]," は、事前収集した ",["$","code",null,{"className":"_1oyqyhe8","children":"ogpMap[url]"}]," を引き当てて描画"]}],"\n"]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"実装のポイント","children":"実装のポイント"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":["上記の実装により、ビルド時またはサーバーサイドでコンテンツの変換とOGP情報の取得が完結し、クライアントでは描画専用の軽量な処理だけを行えるため、パフォーマンス向上と安定した表示が両立できます。",["$","br",null,{}],"\n","また、以下のようなメリットもあります。"]}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":"MDX により記事中に UI 部品を安全に再利用できる"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"Server Component でパースし、Client Component で描画 → App Router の構造に沿った役割分離"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"OGP情報をビルド/サーバーで確定 → Hydrationエラー回避に強い"}],"\n",["$","li",null,{"className":"_1oyqyheb","children":"microCMS 側はプレーン Markdown 保持 → エンジニアフレンドリーなコンテンツ管理"}],"\n"]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"まとめ","children":"まとめ"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":[["$","code",null,{"className":"_1oyqyhe8","children":"next-mdx-remote-client"}]," は App Router 環境で Markdown を超える表現力を記事に与えつつ、SSG との相性も非常に良いライブラリだと思いました。Markdown に React の力を組み合わせたい方には特におすすめです。",["$","br",null,{}],"\n","もし同じように App Router 環境で MDX を導入したいと考えている方は、ぜひ今回の実装例を参考にしてみてください！"]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"最後に","children":"最後に"}],"\n",["$","p",null,{"className":"_1oyqyhe4","children":["ここまで読んでいただきありがとうございました！",["$","br",null,{}],"\n","本記事が、MDX で記事管理してみたいという方の参考になれば嬉しいです。",["$","br",null,{}],"\n","なお、本サイトのソースコードは以下で公開していますので、よければ覗いてみてください！"]}],"\n",["$","a",null,{"href":"https://github.com/miyazaki-dev01/my-profile","target":"_blank","rel":"noreferrer noopener","className":"_18tyvhj0","children":["$","div",null,{"className":"_18tyvhj1","children":[["$","div",null,{"className":"_18tyvhj2","children":[["$","div",null,{"children":[["$","p",null,{"className":"_18tyvhj3","children":"GitHub - miyazaki-dev01/my-profile: プロフィールサイト（React[Next.js]/TypeScript）"}],["$","p",null,{"className":"_18tyvhj4","children":"プロフィールサイト（React[Next.js]/TypeScript）. Contribute to miyazaki-dev01/my-profile development by creating an account on GitHub."}]]}],["$","div",null,{"className":"_18tyvhj5","children":[["$","$L19",null,{"tag":"img","src":"https://github.githubassets.com/favicons/favicon.svg","className":"_18tyvhj6"}],["$","span",null,{"className":"_18tyvhj7","children":"github.com"}]]}]]}],["$","div",null,{"className":"_18tyvhj8","children":["$","$L19",null,{"tag":"img","src":"https://opengraph.githubassets.com/3cc99eee965f002d63cb49f9c40f2dc58d298781823cc073683047d65355c916/miyazaki-dev01/my-profile","className":"_18tyvhj9"}]}]]}]}],"\n",["$","h2",null,{"className":"_1oyqyhe1","id":"参考サイト","children":"参考サイト"}],"\n",["$","ul",null,{"className":"_1oyqyhe9","children":["\n",["$","li",null,{"className":"_1oyqyheb","children":["$","a",null,{"href":"https://amateur-engineer-blog.com/build-blog-using-nextjs-with-mdx","target":"_blank","rel":"noreferrer noopener","className":"_1oyqyhe7","children":"【Typescript】Next.js + MDXでブログ開発"}]}],"\n",["$","li",null,{"className":"_1oyqyheb","children":["$","a",null,{"href":"https://zenn.dev/tkc310/articles/microcms-mdx","target":"_blank","rel":"noreferrer noopener","className":"_1oyqyhe7","children":"microCMS Markdownをパース時にコンポーネントに変換する方法 (≒MDX)"}]}],"\n"]}]]}]