Next.js 15でブログを作る方法【完全ガイド】

Next.js 15のApp Routerを使えば、高速でSEOに強い技術ブログを構築できます。この記事では、MDXによる記事管理からTailwind CSSによるスタイリング、動的OGP画像の生成まで、実践的な構築手順を一通り解説します。

なぜNext.jsでブログを作るのか

WordPressなど既存のCMSを使う方法もありますが、エンジニアがブログを運営するならNext.js + MDXの構成がおすすめです。理由は次のとおりです。

パフォーマンス: SSGにより高速なページ表示が可能
柔軟性: Reactコンポーネントを記事内で自由に使える
型安全性: TypeScriptによる型チェックが効く
開発体験: ホットリロードで記事のプレビューが即座に反映される

前提知識

この記事ではReactとTypeScriptの基本的な知識があることを前提としています。Next.jsが初めての方は、まず公式チュートリアルを一読することをおすすめします。

プロジェクトのセットアップ

まずはNext.js 15のプロジェクトを作成します。

プロジェクト作成

npx create-next-app@latest tech-blog --typescript --tailwind --app --src-dir=false
cd tech-blog

続いて、MDXの処理に必要なパッケージをインストールします。

依存パッケージのインストール

npm install next-mdx-remote gray-matter rehype-pretty-code shiki remark-gfm
npm install rehype-slug rehype-autolink-headings

ディレクトリ構成

プロジェクトのディレクトリ構成は以下のようにします。

ディレクトリ構成

tech-blog/
  app/
    blog/
      [slug]/
        page.tsx
    layout.tsx
    page.tsx
  components/
    blog/
    ui/
  content/
    blog/
      my-first-post.mdx
  lib/
    types.ts
    constants.ts

MDXで記事を管理する

記事はMDXファイルとしてcontent/blog/ディレクトリに配置します。frontmatterでメタデータを管理し、gray-matterでパースします。

lib/posts.ts

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import type { Post, PostMeta } from "./types";
 
const postsDirectory = path.join(process.cwd(), "content/blog");
 
export function getAllPosts(): PostMeta[] {
  const files = fs.readdirSync(postsDirectory);
  return files
    .filter((file) => file.endsWith(".mdx"))
    .map((file) => {
      const slug = file.replace(/\.mdx$/, "");
      const fullPath = path.join(postsDirectory, file);
      const source = fs.readFileSync(fullPath, "utf-8");
      const { data } = matter(source);
      return { slug, ...data } as PostMeta;
    })
    .filter((post) => post.published)
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
}

パフォーマンスTip

記事数が多くなってきた場合は、ビルド時にキャッシュを活用すると高速化できます。unstable_cacheやISRの活用も検討しましょう。

フレームワーク比較

技術ブログの構築に使える主要フレームワークを比較してみましょう。

Next.jsはReact開発者にとって最も馴染みやすく、ブログ以外の機能拡張（APIルート、認証など）にも対応しやすい点が強みです。

シンタックスハイライトの設定

コードブロックの見た目を整えるために、rehype-pretty-codeを導入します。Shikiベースなので、VSCodeと同等のハイライトが実現できます。

lib/mdx.ts

import rehypePrettyCode from "rehype-pretty-code";
import type { Options } from "rehype-pretty-code";
 
const prettyCodeOptions: Options = {
  theme: "one-dark-pro",
  keepBackground: true,
};

注意

rehype-pretty-code v0.14以降はShiki v3が必要です。古いバージョンのShikiがインストールされている場合は、アップグレードしてからご利用ください。

OGP画像の動的生成

Next.jsのImageResponseを使えば、記事ごとに動的なOGP画像を生成できます。

app/blog/[slug]/opengraph-image.tsx

import { ImageResponse } from "next/og";
 
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
 
export default async function OGImage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
 
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          fontSize: 48,
          background: "linear-gradient(135deg, #1e40af, #3b82f6)",
          color: "white",
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          padding: 60,
        }}
      >
        {slug}
      </div>
    ),
    { ...size }
  );
}

まとめ

Next.js 15のApp Routerを使ったブログ構築のポイントを振り返ります。

MDXで記事管理: Reactコンポーネントを記事内で自由に使える
rehype-pretty-code: Shikiベースの美しいシンタックスハイライト
動的OGP: ImageResponseで記事ごとのOGP画像を自動生成
SSG対応: generateStaticParamsで全記事を静的生成

Next.jsとMDXの組み合わせは、エンジニアにとって最も自由度の高いブログ構築手段です。自分好みにカスタマイズしながら、記事を書いていきましょう。

Next.js 15でブログを作る方法【完全ガイド】

なぜNext.jsでブログを作るのか

プロジェクトのセットアップ

ディレクトリ構成

MDXで記事を管理する

フレームワーク比較

シンタックスハイライトの設定

OGP画像の動的生成

おすすめの学習リソース

Udemy - Next.js完全ガイド

まとめ