Next.js GitHubデプロイ完全ガイド – Vercel・Netlify・GitHub Pagesで簡単公開

 

はじめに

Next.jsアプリケーションを開発した後、最も重要なステップがデプロイ（本番環境への公開）です。この記事では、GitHubを使ったNext.jsプロジェクトのデプロイ方法を、主要なホスティングサービス別に詳しく解説します。初心者でも迷わずにデプロイできるよう、手順を分かりやすくまとめました。

GitHubを使ったデプロイのメリット

なぜGitHubデプロイが推奨されるのか

• 自動デプロイ: コードをpushするだけで自動的にサイトが更新
• バージョン管理: 変更履歴の追跡と簡単なロールバック
• チーム開発: 複数人での共同作業が容易
• 無料利用: 多くのホスティングサービスが無料プランを提供

事前準備：GitHubリポジトリの作成

1. ローカルリポジトリの初期化

cd your-nextjs-project
git init
git add .
git commit -m "Initial commit"

2. GitHubリポジトリとの連携

git remote add origin https://github.com/username/repository-name.git
git branch -M main
git push -u origin main

3. 必要なファイルの確認

// package.json
{
  "scripts": {
    "build": "next build",
    "start": "next start",
    "export": "next export"
  }
}

Vercelでのデプロイ（推奨）

なぜVercelが最適なのか

Vercelは Next.js の開発元が提供するホスティングサービスで、最も簡単で高性能なデプロイが可能です。

1. Vercelへのデプロイ手順

# Vercel CLIのインストール
npm i -g vercel

# デプロイ実行
vercel

# 本番環境へのデプロイ
vercel --prod

2. GitHub連携の設定

1. Vercel Dashboardにアクセス
2. 「New Project」をクリック
3. GitHubリポジトリを選択
4. 「Deploy」をクリック

3. 環境変数の設定

// vercel.json
{
  "env": {
    "CUSTOM_KEY": "value"
  },
  "build": {
    "env": {
      "CUSTOM_KEY": "value"
    }
  }
}

Netlifyでのデプロイ

1. netlify.tomlの作成

[build]
  command = "npm run build"
  publish = ".next"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

2. GitHub連携でのデプロイ

1. Netlifyにログイン
2. 「New site from Git」を選択
3. GitHubリポジトリを接続
4. ビルド設定を確認してデプロイ

3. 環境変数の設定

# Netlify CLI使用
netlify env:set NEXT_PUBLIC_API_URL "https://api.example.com"

GitHub Pagesでのデプロイ

1. 静的エクスポートの設定

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

2. GitHub Actionsの設定

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
on:
  push:
    branches: [ main ]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: '18'
    - run: npm ci
    - run: npm run build
    - uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./out

3. リポジトリ設定

1. GitHubリポジトリの「Settings」タブ
2. 「Pages」セクションで「GitHub Actions」を選択
3. ワークフローが実行されるのを確認

カスタムドメインの設定

1. Vercelでのカスタムドメイン

# Vercel CLIでドメイン追加
vercel domains add example.com

2. DNSレコードの設定

# Aレコード
@ → 76.76.19.61

# CNAMEレコード
www → cname.vercel-dns.com

環境変数の管理

1. 開発・本番環境の分離

// .env.local
NEXT_PUBLIC_API_URL=http://localhost:3000/api
DATABASE_URL=postgresql://localhost/myapp_dev

// .env.production
NEXT_PUBLIC_API_URL=https://api.myapp.com
DATABASE_URL=postgresql://prod-server/myapp

2. セキュアな環境変数

// 公開される環境変数（NEXT_PUBLIC_プレフィックス）
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// サーバーサイドのみで使用される環境変数
const dbUrl = process.env.DATABASE_URL;

CI/CDパイプラインの構築

GitHub Actionsでの自動テスト・デプロイ

name: CI/CD Pipeline
on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
    - run: npm ci
    - run: npm test
    - run: npm run build

パフォーマンス最適化

1. ビルド最適化

// next.config.js
module.exports = {
  swcMinify: true,
  compiler: {
    removeConsole: process.env.NODE_ENV === 'production'
  }
}

2. 画像最適化

// 本番環境での画像最適化
import Image from 'next/image'

export default function MyImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero image"
      width={800}
      height={600}
      priority
    />
  )
}

デプロイ先比較表

サービス	料金	特徴	Next.js最適化
Vercel	無料〜	最高の Next.js サポート	⭐⭐⭐⭐⭐
Netlify	無料〜	豊富な機能	⭐⭐⭐⭐
GitHub Pages	無料	静的サイトのみ	⭐⭐⭐

トラブルシューティング

よくあるデプロイエラーと解決策

ビルドエラー

# 依存関係の問題
npm ci
npm run build

# Node.jsバージョンの確認
node --version

環境変数が読み込まれない

// 正しい環境変数の設定
console.log('API URL:', process.env.NEXT_PUBLIC_API_URL);

ページが404エラー

// next.config.js でトレイリングスラッシュを設定
module.exports = {
  trailingSlash: true
}

セキュリティ対策

1. シークレット情報の管理

# GitHub Secretsの使用
- name: Deploy
  env:
    API_KEY: ${{ secrets.API_KEY }}
  run: npm run deploy

2. セキュリティヘッダーの設定

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          }
        ]
      }
    ]
  }
}

監視とメンテナンス

1. パフォーマンス監視

// Vercel Analyticsの導入
import { Analytics } from '@vercel/analytics/react'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Analytics />
    </>
  )
}

2. エラー監視

// Sentryの設定例
import * as Sentry from '@sentry/nextjs'

Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN
})

まとめ

Next.jsアプリケーションのGitHubを使ったデプロイは、適切な手順を踏めば簡単に実現できます。Vercelが最も推奨されるホスティングサービスですが、プロジェクトの要件に応じてNetlifyやGitHub Pagesも選択肢となります。

継続的なデプロイメント、適切な環境変数管理、パフォーマンス最適化を組み合わせることで、本格的なWebアプリケーションの運用が可能になります。

定期的なメンテナンスと監視を行い、ユーザーに最高の体験を提供しましょう。

---

この記事は最新のNext.js 13+とGitHubの機能に基づいて作成されています。デプロイ前に最新のドキュメントもご確認ください。

■プロンプトだけでオリジナルアプリを開発・公開してみた！！

プロンプトだけでオリジナルアプリを開発・公開してみた！！

■AI時代の第一歩！「AI駆動開発コース」はじめました！

テックジム東京本校で先行開始。

AI駆動開発/生成AIエンジニアコース（初心者向け）

■テックジム東京本校

「武田塾」のプログラミング版といえば「テックジム」。
講義動画なし、教科書なし。「進捗管理とコーチング」で効率学習。
より早く、より安く、しかも対面型のプログラミングスクールです。

テックジム東京本校

＜短期講習＞5日で5万円の「Pythonミニキャンプ」開催中。

独学もオンラインも無理だから、有給とって「Pythonミニキャンプ」へ【5日間で5万円】

＜月1開催＞放送作家による映像ディレクター養成講座

現役放送作家が教える動画講座！『ＤＯＧＡ』

＜オンライン無料＞ゼロから始めるPython爆速講座

ゼロから始めるPython爆速講座（理系・プログラミング初心者向け）