fumadocs を使用した Next.js アプリケーションは、Vercel と非常に相性が良く、ほぼ設定なしでデプロイできます。このガイドでは、デプロイの手順を詳しく解説します。
前提条件
デプロイを始める前に、以下を準備してください:
- GitHub / GitLab / Bitbucket アカウント: コードをホストするリポジトリが必要です
- Vercel アカウント: vercel.com で無料アカウントを作成できます
- ローカルで動作確認済みのプロジェクト:
npm run buildが成功することを確認しておきましょう
ステップ1: プロジェクトの準備
ビルドの確認
デプロイ前に、ローカルでビルドが成功することを確認します:
npm run buildfumadocs を使用している場合、next.config.ts が以下のように設定されていることを確認してください:
import { createMDX } from "fumadocs-mdx/next";
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
reactStrictMode: true,
};
const withMDX = createMDX();
export default withMDX(nextConfig);.gitignore の確認
以下のディレクトリが .gitignore に含まれていることを確認します:
# dependencies
node_modules
# next.js
.next/
out/
# fumadocs generated
.source/
# environment
.env*.localfumadocs が生成する .source ディレクトリは、ビルド時に自動生成されるため、Git にコミットする必要はありません。
ステップ2: Git リポジトリの準備
リポジトリの作成とプッシュ
GitHub を例に説明します:
# Git リポジトリの初期化(まだの場合)
git init
# すべての変更をステージング
git add .
# コミット
git commit -m "Initial commit"
# リモートリポジトリを追加
git remote add origin https://github.com/your-username/your-repo.git
# プッシュ
git push -u origin mainステップ3: Vercel でプロジェクトをインポート
3.1 Vercel ダッシュボードにアクセス
- vercel.com/new にアクセス
- GitHub / GitLab / Bitbucket でログイン(初回の場合)
3.2 リポジトリのインポート
- 「Import Git Repository」 セクションで、デプロイしたいリポジトリを探します
- リポジトリ名の横にある 「Import」 ボタンをクリック
3.3 プロジェクト設定
Vercel は Next.js プロジェクトを自動検出し、適切な設定を行います:
| 設定項目 | 値 |
|---|---|
| Framework Preset | Next.js(自動検出) |
| Root Directory | .(デフォルト) |
| Build Command | npm run build または next build |
| Output Directory | .next(自動設定) |
| Install Command | npm install(自動検出) |
fumadocs を使用している場合、追加の設定は不要です。Vercel は fumadocs-mdx を含むすべての依存関係を自動的にインストールし、ビルドを実行します。
ステップ4: 環境変数の設定(必要な場合)
プロジェクトで環境変数を使用している場合は、デプロイ前に設定します:
4.1 環境変数の追加
- プロジェクト設定画面で 「Environment Variables」 セクションを展開
- 必要な環境変数を追加
例:
NEXT_PUBLIC_SITE_URL = https://your-domain.vercel.app4.2 環境変数のスコープ
Vercel では環境変数にスコープを設定できます:
- Production: 本番環境のみ
- Preview: プレビューデプロイのみ
- Development:
vercel dev使用時
機密情報は「Sensitive」オプションを有効にすることで、設定後に値を確認できなくなります。
ステップ5: デプロイの実行
5.1 初回デプロイ
- すべての設定を確認
- 「Deploy」 ボタンをクリック
- ビルドログをリアルタイムで確認できます
5.2 デプロイの流れ
Vercel は以下のステップを自動実行します:
1. Cloning repository...
2. Installing dependencies...
→ npm install
3. Building application...
→ npm run build
→ fumadocs-mdx が MDX ファイルを処理
→ Next.js がページを生成
4. Deploying to edge network...
5. Assigning domain...5.3 デプロイ完了
成功すると、以下のような URL が発行されます:
- Production URL:
https://your-project.vercel.app - Preview URL:
https://your-project-git-branch-username.vercel.app
ステップ6: 自動デプロイの設定
Vercel は Git 連携により、自動デプロイが有効になっています:
本番デプロイ
main(または master)ブランチにプッシュすると、自動的に本番環境にデプロイされます:
git push origin mainプレビューデプロイ
Pull Request を作成すると、自動的にプレビュー環境が作成されます。PR のコメントにプレビュー URL が投稿されます。
ステップ7: カスタムドメインの設定
7.1 ドメインの追加
- Vercel ダッシュボードでプロジェクトを選択
- 「Settings」 → 「Domains」 に移動
- カスタムドメインを入力して 「Add」 をクリック
7.2 DNS 設定
Vercel が提示する DNS レコードを、ドメインレジストラで設定します:
CNAME レコードの場合(サブドメイン):
Type: CNAME
Name: docs(または任意のサブドメイン)
Value: cname.vercel-dns.comA レコードの場合(ルートドメイン):
Type: A
Name: @
Value: 76.76.21.217.3 SSL 証明書
Vercel は Let's Encrypt を使用して、自動的に SSL 証明書を発行・更新します。設定は不要です。
高度な設定
vercel.json による設定
プロジェクトルートに vercel.json を作成することで、詳細な設定が可能です:
{
"buildCommand": "npm run build",
"framework": "nextjs",
"regions": ["hnd1"],
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
}
]
}
]
}リージョンの指定
日本からのアクセスが多い場合、東京リージョン(hnd1)を指定できます:
{
"regions": ["hnd1"]
}リダイレクトの設定
{
"redirects": [
{
"source": "/old-path",
"destination": "/new-path",
"permanent": true
}
]
}トラブルシューティング
ビルドエラー: Module not found
依存関係が正しくインストールされていない可能性があります:
# ローカルで再現確認
rm -rf node_modules .next
npm install
npm run buildfumadocs 関連のエラー
.source ディレクトリの生成に問題がある場合:
- ローカルで
npm run devを実行し、.sourceが生成されることを確認 .gitignoreに.source/が含まれていることを確認- Vercel のビルドログで詳細なエラーメッセージを確認
環境変数が読み込まれない
- クライアントサイドで使用する変数には
NEXT_PUBLIC_プレフィックスが必要です - デプロイ後に環境変数を変更した場合は、再デプロイが必要です
メモリ不足エラー
大量の MDX ファイルがある場合、ビルド時にメモリ不足になることがあります:
{
"build": {
"env": {
"NODE_OPTIONS": "--max-old-space-size=4096"
}
}
}Vercel CLI を使用したデプロイ
GUI を使わず、CLI からデプロイすることも可能です:
CLI のインストール
npm install -g vercelログイン
vercel loginデプロイ
# プレビューデプロイ
vercel
# 本番デプロイ
vercel --prod環境変数の取得
vercel env pull .env.localGitHub Actions との連携
CI/CD パイプラインで Vercel にデプロイする場合:
name: Deploy to Vercel
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install Vercel CLI
run: npm install -g vercel@latest
- name: Pull Vercel Environment
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}必要なシークレット:
VERCEL_TOKEN: Vercel のアカウント設定から取得
まとめ
fumadocs を使用した Next.js アプリケーションの Vercel へのデプロイは、以下の特徴があります:
- ゼロコンフィグ: fumadocs は Vercel で追加設定なしで動作します
- 自動デプロイ: Git プッシュで自動的にデプロイされます
- プレビュー環境: PR ごとにプレビュー URL が自動生成されます
- グローバル CDN: 世界中のエッジネットワークで高速配信されます
- 無料枠が充実: 個人プロジェクトなら無料で運用可能です
デプロイ後は、Vercel ダッシュボードでアナリティクスやパフォーマンスメトリクスを確認できます。