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

はじめに

Next.js 16のApp Routerを使用して、Markdownベースの静的ブログを構築する方法を紹介します。

必要なパッケージ

まず、Markdown処理に必要なパッケージをインストールします：

npm install gray-matter remark remark-html

gray-matter: Markdownのフロントマター（YAML）をパース
remark: Markdownをパース
remark-html: MarkdownをHTMLに変換

ディレクトリ構造

app/frontend/
├── content/
│   └── blog/
│       ├── hello-world.md
│       └── another-post.md
├── app/
│   └── blog/
│       ├── page.tsx        # 一覧ページ
│       └── [slug]/
│           └── page.tsx    # 記事ページ
└── lib/
    └── blog.ts             # ユーティリティ関数

フロントマターの例

各Markdown記事の先頭に、SEO用のメタデータを記述します：

---
title: "記事タイトル"
description: "記事の説明（SEO用）"
date: "2024-12-05T09:00:00"
tags: ["Next.js", "React"]
image: "/images/blog/nextjs-ssg-guide.svg"
keywords: ["キーワード1", "キーワード2"]
---