Next.js 15でブログを構築する方法

はじめに

Next.js 15のApp Routerは、Reactのサーバーコンポーネントをフル活用できる強力なフレームワークです。今回は、MDXを使ったブログシステムの構築方法を紹介します。

技術スタック

• Next.js 15 — App Router + Server Components
• MDX — Markdownの中でReactコンポーネントを使用可能
• TypeScript — 型安全な開発
• rehype-pretty-code — シンタックスハイライト

セットアップ

まずは必要なパッケージをインストールします。

npm install next-mdx-remote gray-matter rehype-pretty-code shiki

MDXファイルの構造

各ブログ記事は content/blog/ ディレクトリにMDXファイルとして配置します。フロントマターにはタイトル、日付、説明、タグなどのメタデータを記述します。

interface BlogFrontmatter {
  title: string;
  date: string;
  description: string;
  tags: string[];
  published: boolean;
}

まとめ

MDXとNext.jsを組み合わせることで、高速でSEOにも強いブログを簡単に構築できます。シンタックスハイライトやカスタムコンポーネントも自由に追加でき、技術ブログに最適な環境が整います。