5分でできる! Next.jsアプリを無料で世界に公開する方法

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  output: 'export',  // この行を追加
  images: {
    unoptimized: true,  // この行を追加
  },
};

export default nextConfig;

なぜこの設定が必要?

output: 'export' → Next.jsを静的ファイルに変換するため
images: { unoptimized: true } → 画像の最適化機能を無効化するため(静的ファイルでは動かないため)

変更後、ビルドして確認

ターミナルを開き、以下のコマンドを実行します。

npm run build

エラーが出なければ成功です。プロジェクトにoutという新しいフォルダが作成されているはずです。このoutフォルダの中身が、これからアップロードするファイルです。

ステップ2: デプロイ方法を選ぶ(ここが分かれ道)

Netlifyへのアップロード方法は4つあります。あなたに合った方法を選んでください。

方法	難易度	向いている人	自動更新
GitHub連携	★★★	チーム開発をする。自動デプロイしたい	◎ 自動
CLI	★★☆	コマンド操作に抵抗がない	△ 手動
ドラッグ&ドロップ	★☆☆	コマンドは苦手。とにかく簡単	× 手動
ZIP上アップロード	★☆☆	ドラッグ&ドロップと同じ	× 手動

おすすめ:

本格的に開発するなら「GitHub連携」 - 一度設定すれば、コードを更新するだけで自動デプロイ
今すぐ試したいなら「ドラッグ&ドロップ」 - 最も簡単で即座にデプロイ可能

方法A: GitHub連携で自動デプロイ(最もプロフェッショナル)

GitHubと連携すると、コードを更新してGitHubにプッシュするだけで、自動的にNetlifyがデプロイしてくれます。チーム開発や継続的な開発に最適です。

GitHubとは?

GitHubは、コードを保存・管理するためのオンラインサービスです。以下のような機能があります:

コードのバージョン管理(過去の状態に戻せる)
チームでのコード共有
コードのバックアップ

GitHubアカウントがない場合は、https://github.com で無料登録できます。

A-1. Gitのインストール確認

まず、あなたのパソコンにGitがインストールされているか確認します。

git --version

バージョンが表示されればOKです。表示されない場合は、以下からインストールしてください:

Windows: https://git-scm.com/download/win
Mac: ターミナルでgitと入力すると、自動でインストールが始まります

A-2. GitHubリポジトリを作成

GitHubにログイン
右上の「+」アイコン → 「New repository」をクリック
以下を入力:
- Repository name: my-next-app(好きな名前でOK)
- Public/Private: Publicを選択(無料アカウントの場合)
- 他はそのまま
「Create repository」をクリック

A-3. ローカルのコードをGitHubにプッシュ

プロジェクトのフォルダで、ターミナルを開きます。

初回のみ: Gitの初期設定

# Gitユーザー名を設定(GitHubのユーザー名と同じにする)
git config --global user.name "あなたのユーザー名"

# Gitメールアドレスを設定(GitHubのメールアドレスと同じにする)
git config --global user.email "your.email@example.com"

Gitリポジトリを初期化

# Gitリポジトリとして初期化
git init

# すべてのファイルをステージングエリアに追加
git add .

# 最初のコミット
git commit -m "Initial commit"

# メインブランチの名前を設定
git branch -M main

# GitHubリポジトリと連携(URLは自分のリポジトリのURLに置き換える)
git remote add origin https://github.com/あなたのユーザー名/my-next-app.git

# GitHubにプッシュ
git push -u origin main

エラーが出た場合: GitHubのパスワード入力を求められることがあります。最近のGitHubでは、パスワードではなく「Personal Access Token」が必要です。

Personal Access Tokenの作成方法

GitHub → 右上のアイコン → 「Settings」
左下の「Developer settings」
「Personal access tokens」 → 「Tokens (classic)」
「Generate new token」 → 「Generate new token (classic)」
「Note」に「Netlify deploy」など任意の名前を入力
「repo」にチェックを入れる
「Generate token」をクリック
表示されたトークンをコピー(二度と表示されないので注意)

パスワードを求められたら、このトークンを貼り付けます。

A-4. NetlifyとGitHubを連携

https://app.netlify.com にアクセス
「Add new site」 → 「Import an existing project」をクリック
「Deploy with GitHub」を選択
GitHubへの連携を承認(初回のみ)
リポジトリ一覧からmy-next-appを選択
ビルド設定を入力:
- Build command: npm run build
- Publish directory: out
「Deploy site」をクリック

Base directoryは空欄のままでOKです。 Base directoryとは何か Base directoryは、Netlifyがビルドコマンド（npm run buildなど）を実行する際の「作業ディレクトリ」を指定する設定です。通常のNext.jsプロジェクトの場合あなたのプロジェクト（click-counter）は通常のNext.jsプロジェクトなので、Base directoryは空欄にしてください。なぜ空欄でいいのか？

GitHubリポジトリのルート（最上位階層）にpackage.jsonがあるプロジェクトがサブディレクトリに分かれていない Netlifyはリポジトリのルートからビルドコマンドを実行すれば良い

Base directoryを設定する必要があるケース以下のような特殊な構成の場合のみ、Base directoryの設定が必要です：ケース1: モノレポ構成 my-repo/ ├── apps/ │ ├── web/ ← Next.jsアプリがここにある │ │ ├── package.json │ │ └── next.config.ts │ └── mobile/ └── package.json この場合、Base directoryに apps/web と入力します。ケース2: プロジェクトがサブディレクトリにある my-repo/ ├── docs/ ├── frontend/ ← Next.jsアプリがここにある │ ├── package.json │ └── next.config.ts └── README.md この場合、Base directoryに frontend と入力します。デプロイが開始されます。1〜2分で完了し、URLが表示されます。

A-5. 自動デプロイの仕組み

これで設定完了です。今後、コードを変更してGitHubにプッシュすると、自動的にNetlifyがデプロイしてくれます。

# コードを変更した後
git add .
git commit -m "Update: 機能を追加"
git push

これだけで、最新版が自動的に公開されます。

GitHub連携のメリット

自動デプロイ: コードをプッシュするだけで自動更新
バージョン管理: 過去のコードに戻せる
チーム開発: 複数人で同じコードを編集できる
プレビュー環境: プルリクエストごとにプレビューURLが作成される

GitHub連携のデメリット

学習コスト: Gitとコマンドの基礎知識が必要
初期設定: 最初の設定がやや複雑

方法B: コマンドで一発デプロイ(Netlify CLI)

コマンドライン操作に慣れている人向けです。一度設定すれば、次回からは1コマンドでデプロイできます。

B-1. Netlify CLIをインストール

ターミナルで以下を実行:

npm install -g netlify-cli

-gは「グローバルインストール」の意味で、どのフォルダからでもNetlifyコマンドを使えるようになります。

B-2. Netlifyにログイン

netlify login

ブラウザが自動で開き、Netlifyのログイン画面が表示されます。ログインすると、ターミナルに「You are now logged in」と表示されます。

B-3. 初期設定(初回のみ)

プロジェクトフォルダで以下を実行:

netlify init

いくつか質問されるので、以下のように答えます:

Create & configure a new site を選択
Team: 個人アカウントを選択
Site name: 好きな名前を入力(例: my-first-app)。空欄でもOK
Build command: npm run build
Directory to deploy: out
Functions folder: Enterでスキップ

B-4. デプロイ実行

netlify deploy --prod

完了すると、以下のようなURLが表示されます:

✔ Deploy is live!
Website URL: https://my-first-app.netlify.app

このURLをブラウザで開けば、あなたのアプリが表示されます。

2回目以降は超簡単

コードを変更した後:

npm run build
netlify deploy --prod

これだけで最新版が公開されます。

方法C: ドラッグ&ドロップで秒速デプロイ(最も簡単)

コマンド操作が苦手な人はこちら。マウスだけで完結します。

C-1. ビルドする

ターミナルで:

npm run build

これでoutフォルダが作成されます。

C-2. Netlify Dropを開く

ブラウザで以下にアクセス:

https://app.netlify.com/drop

ログインしていない場合は、Netlifyアカウントでログインします。

C-3. ファイルをドラッグ&ドロップ

outフォルダを開く
フォルダ内のすべてのファイルを選択
ブラウザのNetlify Dropエリアにドラッグ&ドロップ

アップロードが始まり、数秒で完了します。完了すると、以下のようなURLが表示されます:

https://random-name-12345.netlify.app

npm run build

outフォルダができたら、以下の手順でZIPにします:

Windows: outフォルダを右クリック → 「送る」 → 「圧縮(zip形式)フォルダー」
Mac: outフォルダを右クリック → 「"out"を圧縮」

D-2. Netlifyダッシュボードでアップロード

https://app.netlify.com にアクセス
「Add new site」 → 「Deploy manually」
作成したZIPファイルをドラッグ&ドロップ

自動で展開され、デプロイされます。

各デプロイ方法の比較表

項目	GitHub連携	CLI	ドラッグ&ドロップ	ZIP
初期設定の難易度	高	中	低	低
2回目以降の手間	最小	小	大	大
自動デプロイ	○	×	×	×
チーム開発	○	△	×	×
バージョン管理	○	×	×	×
プレビュー環境	○	×	×	×

結論:

継続的に開発するなら GitHub連携
今すぐ試したいだけなら ドラッグ&ドロップ

デプロイ後にやること

サイト名を変更する

Netlifyが自動生成した名前(例: random-name-12345)を変更できます。

Netlifyダッシュボードを開く
「Site settings」をクリック
「Site details」 → 「Change site name」
新しい名前を入力(例: my-counter-app)

変更後、URLはhttps://my-counter-app.netlify.appになります。

独自ドメインを設定する(オプション)

example.comのような独自ドメインを持っている場合:

「Site settings」 → 「Domain management」
「Add custom domain」
ドメイン名を入力
DNS設定の指示に従う

DNS設定は、ドメインを購入したサービス(お名前.comなど)で行います。

うまくいかない時のチェックリスト

ビルドが失敗する

症状: npm run buildでエラーが出る

解決策:

# 1. node_modulesを削除して再インストール
rm -rf node_modules package-lock.json
npm install

# 2. キャッシュを削除
rm -rf .next out

# 3. npmのキャッシュをクリア
npm cache clean --force

デプロイ後に真っ白なページが表示される

症状: URLにアクセスしても404エラーまたは真っ白

確認すること:

outフォルダにindex.htmlが存在するか
デプロイしたフォルダ名がoutになっているか
next.config.tsの設定が正しいか

画像が表示されない

症状: テキストは表示されるが、画像だけ表示されない

確認すること:

next.config.tsにimages: { unoptimized: true }があるか
画像のパスが/images/photo.jpgのように/から始まっているか

GitHubへのプッシュが失敗する

症状: git pushでエラーが出る

よくある原因と解決策:

認証エラー: Personal Access Tokenを使用する(上記参照)
リモートリポジトリが設定されていない:

   git remote -v  # 設定を確認
   git remote add origin https://github.com/ユーザー名/リポジトリ名.git

ブランチ名が違う:

   git branch -M main  # ブランチ名をmainに統一

Netlifyのビルドが失敗する(GitHub連携時)

症状: GitHubにプッシュしたがNetlifyでビルドエラー

確認すること:

Netlifyダッシュボード → 「Deploys」タブでエラーログを確認
Build commandがnpm run buildになっているか
Publish directoryがoutになっているか
ローカルでnpm run buildが成功するか

Netlify CLIのログインができない

症状: netlify loginを実行してもログインできない

解決策:

ブラウザのポップアップブロッカーを無効化
以下のコマンドを試す:

netlify login --browser

更新する時はどうする?

アプリを修正した後、再度デプロイする方法です。

GitHub連携を使った場合

# コードを変更後
git add .
git commit -m "Update: 変更内容の説明"
git push

これだけで自動的にNetlifyがデプロイしてくれます。デプロイの進行状況は、Netlifyダッシュボードの「Deploys」タブで確認できます。

Netlify CLIを使った場合

npm run build
netlify deploy --prod

ドラッグ&ドロップを使った場合

コードを変更
npm run buildを実行
新しいoutフォルダの中身を再度ドラッグ&ドロップ

ZIP上アップロードを使った場合

コードを変更
npm run buildを実行
outフォルダを再度ZIP化
Netlifyダッシュボードからアップロード

最終確認: デプロイ成功のチェックリスト

デプロイが完了したら、以下を確認します。

URLにアクセスして、アプリが表示される
ボタンやフォームなど、すべての機能が動作する
スマートフォンでも正常に表示される
URLがhttps://から始まっている(Netlifyは自動でHTTPSを有効化)
画像やスタイルが正しく表示される
(GitHub連携の場合)コードをプッシュすると自動デプロイされる

すべてチェックできれば、デプロイ完了です。

まとめ: あなたに合ったデプロイ方法

GitHub連携がおすすめな人

チームで開発する
継続的にアプリを更新する予定
バージョン管理をしたい
自動デプロイしたい

手順: Git設定 → GitHubリポジトリ作成 → コードをプッシュ → Netlify連携

Netlify CLIがおすすめな人

コマンド操作に抵抗がない
個人開発
手動デプロイでも問題ない

手順: CLI インストール → ログイン → 初期設定 → デプロイ

ドラッグ&ドロップがおすすめな人

コマンド操作が苦手
とにかく今すぐ試したい
一度だけデプロイできればOK

手順: ビルド → Netlify Dropにアクセス → ファイルをドラッグ&ドロップ

参考になるWeb記事

デプロイについてさらに詳しく知りたい方は、以下の公式ドキュメントを参照してください。

Netlify公式

Netlify公式ドキュメント - Netlifyの全機能を網羅
Netlify CLIリファレンス - CLIコマンドの詳細
Netlify Drop - ドラッグ&ドロップデプロイ
NetlifyとGitHubの連携ガイド - GitHub連携の詳細

Next.js公式

Next.js静的エクスポート公式ガイド - output: 'export'の詳細説明
Next.jsデプロイドキュメント - 各種プラットフォームへのデプロイ方法

Git/GitHub

GitHub公式ドキュメント - GitHubの使い方
Git入門 - Gitの基礎から応用まで
GitHub Personal Access Tokenの作成方法 - 認証トークンの作成手順

トラブルシューティング

Netlifyコミュニティフォーラム - エラー解決のQ&A
NetlifyステータスページPage - サービス障害情報

これらのリソースを活用すれば、より高度なデプロイ設定やカスタマイズが可能になります。