VercelとNext.js静的エクスポートで実現する、サーバーコスト0の個人サイト運用術

はじめに

個人開発者や技術ブロガーにとって、ポートフォリオサイトやブログの運用コストは悩みの種です。「できるだけ費用をかけずに、でも表示速度や開発体験は妥協したくない…」そう考える方は多いのではないでしょうか。
この記事では、VercelのHobbyプランとNext.js 14の静的エクスポート機能（SSG）を組み合わせることで、サーバーコスト0円で高機能かつ高速な個人サイトを運用する方法を解説します。
実際にこの構成で運用している学習サイト StudyForge の知見を元に、具体的な技術スタックからデプロイ手順までを紹介します。

対象読者

• 無料で自分のブログやポートフォリオサイトを持ちたい方
• Next.jsやVercelを使ったモダンなWeb開発に興味がある方
• Markdown/MDXでコンテンツを管理したい方

なぜ「コスト0円」が可能なのか？

VercelのHobbyプランは、非商用の個人プロジェクトに対して非常に寛大な無料枠を提供しています。

• デプロイ: 無制限
• 帯域幅: 100GB/月
• ビルド時間: 6,000分/月

公式サイトにてHobbyプランが「Free forever.」と強調されています。

Next.jsの静的エクスポート（output: 'export'）機能を使うと、サイト全体がHTML/CSS/JSファイルとして出力されます。これはサーバーサイドで動的な処理を必要としないため、VercelのCDNに配置するだけで超高速に配信できます。
この構成なら、個人のブログやポートフォリオサイト程度のアクセス数であれば、無料枠を超えることはほとんどありません

技術スタック

この構成の要となる技術スタックです。

• フレームワーク: Next.js 14 (App Router)
• 言語: TypeScript
• スタイリング: Tailwind CSS
• コンテンツ管理: MDX (Markdown with JSX)
• Markdownパース:
  • gray-matter: frontmatter（記事のメタデータ）を解析
  • unified, remark-, rehype-: Markdown本文をHTMLに変換

構築手順

Step 1: Next.jsプロジェクトのセットアップ

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

npx create-next-app@latest my-static-site

npx create-next-app@latest my-static-site
次に、静的サイトとして出力するために next.config.mjs を編集します

/** @type {import('next').NextConfig} */
const nextConfig = {
  // この一行を追加！
  output: 'export',

  // 必要に応じて他の設定も追加
  // 例: trailingSlash: true,
};

export default nextConfig;

output: 'export' を指定することで、next build を実行した際に、Node.jsサーバーを必要としない完全に静的なファイル群が out ディレクトリに生成されるようになります。

Step 2: Markdown/MDXによるコンテンツ管理

記事やブログのコンテンツは、content/posts/ のようなディレクトリに .mdx ファイルとして管理するのがおすすめです。

---
title: "はじめての投稿"
categorySlug: "sample"
order: 1
publishedAt: "2026-03-22"
---

## こんにちは、世界！

これはMarkdownで書かれた最初の投稿です。
Next.jsとVercelで快適なブログ生活を始めましょう。

これらのファイルを読み込んでページを生成するために、サーバーサイドで動作するユーティリティ関数を用意します。
gray-matter でファイルの先頭にあるメタデータ（frontmatter）を、unified と remark/rehype プラグインを使ってMarkdown本文をHTMLに変換します。

import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const postsDirectory = path.join(process.cwd(), 'content/posts');

export async function getPostData(slug) {
  const fullPath = path.join(postsDirectory, `${slug}.mdx`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // gray-matterでメタデータをパース
  const matterResult = matter(fileContents);

  // remark/rehypeでMarkdownをHTMLに変換
  const processedContent = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeStringify)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  return {
    slug,
    contentHtml,
    ...matterResult.data,
  };
}

この関数を、Next.jsの動的セグメントページ（例: src/app/blog/[slug]/page.tsx）で使うことで、Markdownファイルに基づいた静的なページを生成できます。

下記サイトぐらいの記事毎のカテゴリや、カテゴリ毎の記事一覧（おすすめ学習順、サービス別、試験ドメイン別）であれば、DBを持たずともfrontmatterで十分対応できます。

Step 3: ビルド

プロジェクトが完成したら、ビルドコマンドを実行します。

npm run build

これにより、out ディレクトリに静的なHTML、CSS、JavaScriptファイルが生成されます。このディレクトリをWebサーバーに置くだけでサイトが公開できる状態です

Step 4: Vercelにデプロイ

いよいよデプロイです。手順は驚くほど簡単です。
1 . GitHubにリポジトリをプッシュ: 作成したプロジェクトをGitHubにプッシュします。
2 . Vercelにサインアップ: GitHubアカウントでVercelにサインアップします。
3 . プロジェクトをインポート:

• Vercelのダッシュボードで「Add New...」->「Project」を選択。
• 先ほどプッシュしたGitHubリポジトリをインポートします。

4 . デプロイ設定:

• Framework Preset: Next.js が自動で選択されます。
• Build and Output Settings: output: 'export' を設定している場合、Vercelが自動で検知し、出力ディレクトリを out に設定してくれます。

設定を確認して「Deploy」ボタンをクリックすれば、数分でビルドとデプロイが完了し、https://.vercel.app のようなURLでサイトが公開されます。
以降は、GitHubのmainブランチにプッシュするたびに、自動でビルドとデプロイが実行されます

まとめ

VercelとNext.jsの静的エクスポート機能を組み合わせることで、開発体験を損なうことなく、無料で高速な個人サイトを運用できます。

• コスト: 0円（Hobbyプランの範囲内）
• パフォーマンス: VercelのEdge Networkにより世界中から高速アクセス
• 開発体験: Next.jsによるモダンな開発と、Git-pushによる簡単なデプロイフロー
  サーバー管理の手間から解放され、コンテンツ制作に集中できるこの構成を、ぜひ試してみてはいかがでしょうか。