Blog

Next.js(App Router) + Tailwind v4(CSS-first) + MDX のサイトで、ページ見出し・トップセクション・トークンを整理して「タイポの型」を完成させた作業ログ。

pnpm移行で出た警告（approve-builds）対応、frontmatterのsource必須化、PostsList向けの型統一、pretty-code（rehype-pretty-code）のUI改善までをまとめた作業ログ。

rehype-pretty-codeの行ハイライトを視認できる状態にし、tokens化・連続ハイライトの自然化・UI統一・行番号余白の最適化までをまとめた作業ログ。

rehype-pretty-codeの title / 行番号 / ハイライト の動作確認用

compileMDXの呼び出しを lib/render-mdx.ts に集約し、Blog/Works/MdxContentのMDX描画を単一ソース化。mdxOptions/components は lib/mdx.ts のまま共通利用。

compileMDX と MDXRemote が別々に持っていた mdxOptions/components を lib/mdx.ts に集約。readonly型エラーと SerializeOptions 未export問題も解決。

rehype-autolink-headings を append 方式に統一し、hover/focus で自然に表示される見出しアンカーを実装。クリック範囲とフォーカス可視化も調整。

Next.js(App Router) + MDX で、コードブロック上部に言語ラベルを表示し、角丸を上(ラベル)・下(コード)で自然に分ける実装メモ。

MDXでブログ記事を書くときの最低限の型（見出し・リンク・画像・コード・引用など）をまとめた備忘録。

MDXでブログを運用する最小構成のサンプルです。