Next.js(App Router)で個人ブログを作る完全ガイド

AIツクリラボは、Next.js(App Router)で構築しています。始める前の経験はWordPressで記事を書いたことがある程度で、Next.jsもApp Routerも今回が初めてでした。このページでは、その状態からブログを作り、今も運用を続けるまでの流れを一本の道筋として整理します。個々の実装の詳細は、各見出しからリンクしている記事にまとめているので、気になった部分から読み進めてください。

全体像と前提

作ったのはこのブログ自体です。データベースやCMSの管理画面は使わず、記事をfrontmatter付きのMarkdownファイルとしてリポジトリに直接置き、Next.jsのApp Routerでビルド時に静的なHTMLへ変換しています。カテゴリーは「AIツール」「レンタルサーバー・VPS」「ノーコード・ローコード」「Next.js制作Tips」の4つで、このNext.js制作Tipsカテゴリーには、この文章を書いている時点で8本の記事が公開されています(執筆・公開準備中のものを含めると10本)。

もともとの経験はWordPressで記事を書いたことがある程度で、Next.jsもReactのサーバーコンポーネントも初めて触りながら組み立てました。CMSに慣れていたはずなのに、なぜあえてコードで作るNext.jsを選んだのかという一番手前の判断は、Next.jsとWordPress、ブログを作るならどっちがいい?にまとめています。

技術選定の理由

技術選定は、大きく3段階で決めています。

1つ目は「Next.js自体を選ぶか」です。WordPressの管理画面から書ける手軽さより、コードで作る自由度と表示速度を優先したいという判断が先にありました。この比較はNext.jsとWordPress、ブログを作るならどっちがいい?の通りです。

2つ目は「App RouterかPages Routerか」です。今後の新機能がApp Router側に追加されていく方針であること、layout.tsxでヘッダー・フッターのような共通レイアウトをシンプルに書けることを理由に、App Routerを選びました。詳しい比較はNext.jsのApp RouterとPages Router、なぜApp Routerを選んだかで解説しています。

3つ目は「CMSを使うか、Markdownで管理するか」です。記事数がまだ少ない個人ブログの規模では、CMSの管理画面よりもGitでファイルごと管理するほうが、変更履歴が残り、実質的なバックアップも兼ねられると判断しました。この判断が、後述する記事管理の仕組み全体の土台になっています。

ディレクトリ構成

実際のディレクトリ構成は、主要な部分だけ抜き出すと次のようになっています。

src/
  app/
    blog/[slug]/page.tsx         # 記事詳細ページ
    blog/[slug]/opengraph-image.tsx
    category/[slug]/page.tsx     # カテゴリーページ(このページ)
    tags/[tag]/page.tsx
    sitemap.ts / robots.ts
    layout.tsx
  components/                     # UIコンポーネント
  lib/
    posts.ts                      # 記事の読み込み・公開判定
    categories.ts                 # カテゴリー本文の読み込み
    markdown.ts                   # Markdown→HTML変換
    site-config.ts                # サイト名・カテゴリー定義
  types/                          # frontmatterの型定義
content/
  posts/*.md                      # 記事本文
  categories/*.md                 # カテゴリーページの本文(このファイル)

app/配下のディレクトリ名がそのままURLになる、という規約は、Pages Routerのpages/ディレクトリとは感覚が異なりました。この違いはApp RouterとPages Routerの違いでも比較表として整理しています。

記事管理の仕組み

記事はすべてfrontmatter付きのMarkdownで管理していて、title・description・date・category・tagsが基本項目です。それ以外に、実際にどこまで確かめた記事かを示すexperienceLabel、アフィリエイトリンクの有無を示すhasAffiliate、構造化データ用のfaqなども任意で持たせています。

公開日を管理画面から設定するのではなく、dateに未来の日付を指定しておくだけで自動的に公開される「予約投稿」の仕組みも実装しています。CMSを使わない代わりに、frontmatterの日付だけで公開・非公開を切り替える具体的な実装はNext.jsブログに予約投稿機能を実装するにまとめています。

SEO実装

SEOまわりは、Next.jsのMetadata API・JSON-LD構造化データ・sitemap.tsによる自動生成・OGP画像の自動生成・記事同士の内部リンクという要素で構成しています。

タイトル・description・canonical URLをコードで管理する方法、ArticleとBreadcrumbListのJSON-LD、sitemap.ts/robots.tsによるサイトマップの自動生成はNext.jsブログを高速化する画像・フォント最適化Tipsにまとめています。

SNSシェア時の画像は記事ごとにnext/ogで自動生成していて、その実装はNext.jsでOGP画像を自動生成するで解説しています。

記事同士をどうつなげるかという内部リンクの設計方針はブログの内部リンク設計の考え方、検索エンジンへの登録とアクセス解析の導入手順はNext.jsブログにGoogle Search Console・Analyticsを導入する手順にまとめています。

デプロイと運用

ホスティングはVercelを使い、記事ページはgenerateStaticParamsでビルド時にすべて静的HTMLとして生成しています。公開後に内容が頻繁に変わらないアフィリエイトブログの性質上、静的生成を第一選択にするという考え方はNext.jsブログを高速化する画像・フォント最適化Tipsの通りです。

運用面ではrevalidate = 3600という設定で、1時間おきにページを再検証させています。これにより、予約投稿の記事が公開日を迎えたときも、手動で再デプロイしなくても自動的に反映されます。記事を追加・更新する作業は、Markdownファイルを編集してGitにpushするだけで完結していて、CMSの管理画面を開く工程はありません。

つまずいたところ一覧

実装しながら実際につまずいた点を、記事へのリンクつきで一覧にしておきます。

• サーバーコンポーネントとクライアントコンポーネントの境界、"use client"をどこに付けるかの判断基準で最初は混乱した → App RouterとPages Routerの違い
• ダークモード対応で、ページを開いた瞬間だけ一瞬違う色がちらつく問題(FOUC)への対策が想定より手間だった → Next.jsブログにライト/ダークモード切り替えを実装する方法
• Next.js 15でparamsがPromiseを返す仕様に変わったことを見落とし、値が取れずに動かなかった → Next.jsブログを高速化する画像・フォント最適化Tips

• OGP画像に記事タイトルをそのまま描画しようとしたら、日本語フォントの扱いで文字化けのリスクがあると分かり、テキストを描画しない方針に切り替えた → Next.jsでOGP画像を自動生成する
• 予約投稿の実装で、ホスティング環境のサーバー時刻がUTCで動いていることに気づかず、日本時間とのズレで公開判定が狂いかけた → Next.jsブログに予約投稿機能を実装する
• アクセス解析は公開直後に導入しないと、それ以前の期間のデータが一切残らないと後から気づいた → Next.jsブログにGoogle Search Console・Analyticsを導入する手順

記事数が少ないうちは気づきにくいものの、増えてから効いてくる工夫として、ブログの内部リンク設計の考え方もあわせて参考にしてください。