MDXでブログを書き始めるためのガイド

なぜMDXなのか

MDXを採用すると、Markdownで記事を書きながらReactコンポーネントを差し込めるため、技術ブログでも表現力を損なわずに運用できます。Next.jsのApp Routerと組み合わせると、ファイルベースのルーティングと静的サイト生成を同時にこなせます。

必要な準備

1. pnpm dlx create-next-app で空のNext.jsプロジェクトを作成する
2. pnpm add next-mdx-remote gray-matter を実行してMDXを扱うための依存を追加する
3. content/articles/<locale> ディレクトリを作成し、記事ごとにMDXファイルを配置する

それぞれのファイルにはタイトル、スラッグ、公開日などのメタデータを frontmatter として記述します。

MDXローダーの実装

gray-matter を使うと frontmatter と本文を簡単に分離できます。プロジェクトでは getAllContent() や getContentBySlug() といったヘルパーを用意し、generateStaticParams() の中で使うことで全記事をSSGできます。

const content = files.map((file) => parseMDXFile(file));
return content.sort((a, b) => {
	return (
		new Date(b.frontmatter.publishedAt).getTime() -
		new Date(a.frontmatter.publishedAt).getTime()
	);
});

プレビューとデプロイ

pnpm dev でローカル確認を行い、pnpm build && pnpm start で本番の挙動を確認します。Cloudflare Pagesなどのホスティングへデプロイする際は、next export を利用するか、エッジ互換のアダプタを併用してください。

次のステップ

• 記事一覧やタグページのデザインを整える
• プレビュー向けにDraftモードを導入する
• コメントや「いいね」などのインタラクションAPIをCloudflare Workersで用意する

この手順を押さえておけば、MDXベースのブログを短時間でスムーズに立ち上げられます。