Next.jsとMDXで技術ブログを構築する

今回の記事では、Next.js 16とMDXを使用して技術ブログを構築する方法について説明します。

技術スタック

• Next.js 16: App Routerベース
• MDX: Markdown + JSX
• gray-matter: Frontmatter解析
• next-mdx-remote: サーバーサイドMDXレンダリング

プロジェクト構造

hafuture-app/
├── content/posts/       # MDX記事
│   ├── hello-world.mdx
│   └── vibe-coding-blog.mdx
├── src/
│   ├── app/[locale]/
│   │   └── blog/
│   │       ├── page.tsx           # ブログ一覧
│   │       └── [slug]/page.tsx    # 個別の記事
│   ├── components/mdx/
│   │   └── mdx-content.tsx       # MDXレンダラー
│   └── lib/
│       └── posts.ts             # 記事データローダー

記事データの読み込み

gray-matterを使用して、frontmatterとコンテンツを分離します：

import matter from "gray-matter";

const { data, content } = matter(fileContents);

// data: frontmatter (title, date, tagsなど)
// content: Markdown本文

MDXレンダリング

next-mdx-remoteを使用して、サーバーサイドでMDXをレンダリングします：

import { MDXRemote } from "next-mdx-remote/rsc";

<MDXRemote
  source={content}
  options={{
    mdxOptions: {
      rehypePlugins: [
        rehypeHighlight,   // コードハイライト
        rehypeSlug,       // 見出しスラッグ
        rehypeAutolinkHeadings, // 見出しリンク
      ],
    },
  }}
/>

SEO最適化

Next.jsのMetadata APIを使用して、各記事のメタデータを設定します：

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);

  return {
    title: post.title,
    description: post.description,
  };
}

結論

Next.jsとMDXを組み合わせることで、CMSなしでGitベースのシンプルかつ強力なブログシステムを構築できます。これにより、開発者に優しく、保守が容易なブログを運営できます。

次の記事では、ブログに追加する機能についてお話しします。お楽しみに！