ToolNote
🔍 レビュー

ConoHa WINGにNext.js App Router SSGをデプロイする方法と料金比較【副業エンジニア向け】

結論：副業エンジニアのSSGサイトにConoHa WINGはアリか？

結論から言うと、Next.js App RouterのSSG（静的サイト生成）であればConoHa WINGは十分実用的な選択肢です。

ただし「何でも最適」ではありません。SSR（サーバーサイドレンダリング）やAPI Routesを多用するなら、VPS/PaaSを選ぶべきです。本記事では以下を解説します。

  1. ConoHa WINGへのNext.js App Router SSGデプロイ手順
  2. XServer・さくらインターネットとの料金・速度比較
  3. 副業エンジニアへの使い分けガイドライン

Next.js App Router SSGとは何か（前提整理）

Next.js 13以降のApp Routerでは、generateStaticParams と export const dynamic = 'force-static' を使うことでページを静的HTMLとして書き出せます。

// app/blog/[slug]/page.tsx
export const dynamic = 'force-static';

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

next build 実行後に生成される out/ ディレクトリ（next.config.js で output: 'export' を指定）は、純粋な静的ファイル群になります。これはApacheやNginxで配信できるため、レンタルサーバーで動かせます。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true, // .htaccessなしでサブページへアクセスするため推奨
};

module.exports = nextConfig;

⚠️ output: 'export' では Image Optimization・API Routes・Middleware は使えません。これらが必要な場合はVercel/Renderなどを検討してください。

ConoHa WINGへのSSGデプロイ手順

1. ローカルでビルドしてoutディレクトリを生成

npm run build
# → out/ ディレクトリが生成される

2. FTP/SFTPクライアントでアップロード

ConoHa WINGのコントロールパネルから「サーバー管理 → FTP」でFTPアカウントを確認します。FTPクライアント（FileZillaなど）で out/ の中身を public_html/ 直下にアップロードします。

public_html/
├── index.html
├── _next/
│   └── static/
├── blog/
│   ├── my-first-post/
│   │   └── index.html
│   └── ...
└── 404.html

3. .htaccess の設定（404ページ対応）

App RouterのSSGではNext.jsの404.htmlを正しく返すために .htaccess を追加します。

# public_html/.htaccess
Options -Indexes
ErrorDocument 404 /404.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # _next/static は直接配信
  RewriteRule ^_next/static/ - [L]

  # 既存ファイル・ディレクトリはそのまま
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # index.html にフォールバック（trailingSlash: true 時はほぼ不要だが念のため）
  RewriteRule ^(.*)$ /$1/index.html [L]
</IfModule>

4. GitHub Actionsで自動デプロイ（任意）

手動FTPは面倒なので、lftp を使ったCI/CDを組むのがおすすめです。

# .github/workflows/deploy.yml
name: Deploy to ConoHa WING

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - name: Upload via FTP
        run: |
          sudo apt-get install -y lftp
          lftp -e "
            set ssl:verify-certificate false;
            open ftp://${{ secrets.FTP_HOST }};
            user ${{ secrets.FTP_USER }} ${{ secrets.FTP_PASS }};
            mirror -R --delete out/ public_html/;
            bye
          "

Secrets（FTP_HOST / FTP_USER / FTP_PASS）はGitHubリポジトリの Settings → Secrets で設定します。

料金・速度の競合比較

月額料金比較（2024年時点・税込）

サービスプラン実質月額無料独自ドメイン転送量上限
ConoHa WINGWINGパック ベーシック（36ヶ月）約643円2個無制限
XServerスタンダード（36ヶ月）約693円1個無制限
さくらインターネットスタンダード（36ヶ月）約425円なし無制限
VercelHobby無料なし（.vercel.app）100GB/月
Cloudflare PagesFree無料なし（.pages.dev）無制限

料金は変動するため、必ず公式サイトで最新情報を確認してください。

表示速度の傾向

実際にGTmetrixでSSG化したNext.jsブログ（日本リージョン向け）を測定した際の傾向です。

サービスLCP（目安）TTFB（目安）備考
ConoHa WING0.8〜1.2s80〜150ms国内CDN標準装備が効く
XServer0.9〜1.3s90〜160ms同等水準
さくら スタンダード1.5〜2.5s200〜400ms共有リソースの影響あり
Vercel（Hobby）0.6〜1.0s50〜100msエッジCDNが優秀
Cloudflare Pages0.5〜0.9s40〜80ms純粋な静的配信では最速クラス

速度だけ求めるなら Cloudflare Pages/Vercel が最強です。 ただし商用サイトではCloudflare PagesもVercel Hobbyも商用利用の制限に注意が必要です。

副業エンジニアへの使い分けガイドライン

ConoHa WINGがおすすめなケース ✅

  • クライアントのWordPressと同居させてSSGサイトをサブディレクトリに置きたい
  • 独自ドメイン・SSL・メールをワンストップで管理したい
  • 月額固定費を明確にしてクライアントに請求したい
  • PHPのバックエンドと静的フロントエンドを混在させたい
🔗 おすすめサービス 1時間2円から、国内最速・高性能レンタルサーバー【ConoHa WING】

Vercel / Cloudflare Pagesがおすすめなケース ✅

  • 個人ポートフォリオ・OSSのドキュメントサイトなど商用利用でないもの
  • Next.jsのImage OptimizationやAPI Routesも使いたい
  • デプロイをGit pushだけで完結させたい（GitHub連携が強力）

XServerがおすすめなケース ✅

  • 既存のXServerユーザーがSSGサイトを追加したい
  • ConoHaより歴史・実績のある国内サーバーを求めている

よくあるトラブルと対処法

_next/static/ へのアクセスが403になる

Options -Indexes を設定すると _next/static/ のディレクトリ一覧は非表示になりますが、ファイルへの直接アクセスは問題ありません。403が出る場合はパーミッションを確認（ファイル644・ディレクトリ755が基本）。

画像が表示されない

next.config.js に output: 'export' を指定した場合、next/image の最適化機能は無効化されます。unoptimized: true を追加するか、Cloudinary等の外部画像CDNを利用してください。

const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
};

サブページで404になる

trailingSlash: true を設定してビルドし直し、各ページが blog/my-post/index.html の形式で出力されているか確認してください。

Next.jsのApp RouterやSSGについてより深く学びたい方には、公式ドキュメントに加えて書籍での体系学習もおすすめです。

📚 おすすめ書籍

Next.js超入門

App RouterからSSGまで基礎を体系的に学べる一冊

Amazonで見る →

まとめ

観点ConoHa WINGの評価
SSGデプロイのしやすさ◎（FTPまたはCI/CDで簡単）
料金コスパ○（月643円〜、WP同居ならお得）
表示速度○（国内CDN込み、Vercelには劣る）
SSR/API Routes対応✕（静的サイトのみ）
副業クライアント案件との相性◎（ドメイン・メール・WPを一元管理）

Next.js App Router SSGをConoHa WINGで動かすことは技術的に問題なく、副業での受託案件（WordPressと共存する静的フロントエンドなど）には特に向いています。 一方、純粋な個人サイト・ポートフォリオなら無料のCloudflare PagesやVercelのほうが速くて手軽です。

用途と要件に応じて使い分けるのが、副業エンジニアとしての賢いコスト管理につながります。

#ConoHa WING #Next.js #App Router #SSG #レンタルサーバー #デプロイ