Next.jsアプリをデプロイする方法｜公開の手順とデプロイ先の選び方

AIツールと一緒に作ったNext.jsアプリも、ローカルのnpm run devで動くだけでは自分にしか見えません。デプロイの方式は2つあり、手順は専用のコマンドを数回打つだけです。とはいえ、いざやり方を調べてみると、記事によって書いてあるデプロイ先も手順もばらばらで、どれが自分のアプリに合うのか分からなくなりませんか。この記事では、Next.jsの2つの公開方式の違いと、公開URLが手に入るまでの具体的な手順、デプロイ先の選び方を解説します。アプリを作ったときと同じように、公開までAIエージェントに任せる方法にも触れます。

目次

• Next.jsアプリをデプロイする2つの方法【全体像】
• 【手順】Next.jsアプリをデプロイして公開する
• Next.jsのデプロイ先の選び方（比較）
• Next.jsのデプロイでつまずきやすいポイントと対処
• よくある質問（FAQ）
• Next.jsアプリの公開ならロリポップ！デプロイナウ
• まとめ

Next.jsアプリをデプロイする2つの方法【全体像】

デプロイとは、ビルドで生成した成果物をサーバーに配置して、URLでアクセスできる状態にする作業です。用語の意味やビルド・リリースとの違いはデプロイとは？意味・仕組みの記事で整理しています。

Next.jsの場合、この成果物のかたちが2つに分かれていて、どちらでビルドするかによって必要な設定もデプロイ先の候補まで変わる可能性があります。

静的エクスポート（output: ‘export’）

設定ファイルのnext.config（next.config.jsまたはnext.config.ts）にoutput: 'export'と書いてビルドすると、outフォルダにHTML・CSS・JavaScriptのファイル一式が書き出されます。Next.js公式の静的エクスポートガイドで書かれている通り、利点は静的ファイルを配信できるWebサーバーなら置き場所を選ばないことです。代わりに、Server Actionsやcookiesの読み取りといった、Node.jsサーバーを必要とする機能はサポートされないと同ガイドに明記されています。全ページが誰に対しても同じ表示でよい静的サイトのための方式です。

Node.jsサーバー

ビルドした成果物をNode.jsのサーバーとして動かし続ける方式です。アクセスのたびにHTMLを組み立てるSSRも、APIルートも、フォーム送信を受け取るServer Actionsも、この方式ならそのまま動きます。

この方式でよく使うのがoutput: 'standalone'で、サーバーとして実行するのに必要な一式をビルド時にまとめて出力する設定です。筆者の手元にあるNext.js 16.2.9のプロジェクトでこの設定を入れてビルドしたところ、.next/standaloneに38MBの実行用ファイル一式が生成されました。この設定を求めるかどうかはデプロイ先によって違うので、選んだサービスのドキュメントで確認してください。

では、どちらを選ぶか。分かれ目は、ページの内容が閲覧する人や時点によって変わるかどうかです。ログイン機能や問い合わせフォーム、自前のAPIがあるならNode.jsサーバー方式。プロフィールサイトのように全員へ同じページを返すだけなら、静的エクスポートで足ります。迷ったらNode.jsサーバー方式を選んでください。静的なページもそのまま扱えるうえ、あとからサーバー機能を追加しても方式を切り替えずに済みます。

【手順】Next.jsアプリをデプロイして公開する

ここからの手順は、Node.jsサーバー方式が前提です。サーバーの用意と運用をサービス側に任せられるホスティングサービスだけでも、候補は複数あります。Next.js公式のデプロイガイドにも載っている開発元Vercelのホスティングや、Netlifyなどの海外サービス、国内のサービスならロリポップ！デプロイナウがこの系統です。このほかに、自前のサーバーやクラウドに置く道もあります。

どこを選んでも、ビルドの設定を整え、ツールを用意してデプロイし、環境変数とドメインを設定するという流れは共通です。この記事では、作ったWebアプリやサイトをコマンドひとつで公開できて、画面もドキュメントも日本語で確認できる「ロリポップ！デプロイナウ」を例に進めます。

事前準備

next.configにoutput: 'standalone'の1行を追加します。デプロイナウへデプロイするためにはこの設定が必要となります。 詳細はロリポップ！デプロイナウのNext.js向けドキュメントをご覧ください。

// next.config.js
const nextConfig = {
  output: 'standalone',
}

ステップ1：CLIを用意する

ターミナルで次のコマンドを実行すると、デプロイの操作を文字入力で進めるCLIツールのlolipopコマンドがインストールされます。動作にはNode.js 22.12.0以上が必要なので、先にnode -vで手元のバージョンを見ておくと確実です。

npm i -g lolipop

続けてlolipop loginを実行し、案内に沿ってアカウント認証を済ませます。CLIと聞くと身構えるかもしれませんが、この手順で打つのは実質3つのコマンドだけで、残りは画面の案内に従うだけです。

ステップ2：デプロイする

事前準備とログインまで済んだら、アプリのディレクトリで次のコマンドを実行します。

lolipop deploy --name <プロジェクト名> --framework next

実行するとアップロードとビルドが自動で進み、完了するとアプリが公開されます。フレームワークにnextを指定すれば、standalone出力に必要なビルド設定が既定で入り、出力ディレクトリも.next/standaloneが既定になるため、追加の指定は通常不要です。アプリがリポジトリのサブディレクトリにあるモノレポ構成なら、--root apps/webのようにルートを合わせます。

公開されたアプリには、専用のサブドメインが割り当てられます。デモサイトのように「プロジェクト名.lolipop-now.app」のURLが発行されています。表示されたURLをブラウザで開いて、ローカルと同じ画面が出れば公開完了です。

コードを直したあとの反映も同じ流れで、lolipop project linkでディレクトリとプロジェクトを紐付けておけば、2回目からはlolipop deployだけで新しいバージョンが公開されます。

ここまでの操作は、AIエージェントに任せることもできます。公式ドキュメントのAIエージェントでデプロイするによると、対象はClaude Code、Codex、Cursor、AntigravityなどのAIエージェントです。lolipop skill installでCLIの使い方をエージェント側に追加しておき、「このアプリをlolipopにデプロイして」と頼むと、エージェントがlolipop deployを実行してプロジェクトの作成から公開まで進めてくれます。アプリの開発をClaude CodeなどのAIエージェントと行った場合、公開まで同じ会話の流れで完結します。

ステップ3：環境変数を設定する

外部APIのキーなど、コードに直接書きたくない値はプロジェクトの環境変数として登録します。ターミナルならlolipop env create API_URL https://api.example.comのような形で、ダッシュボードならプロジェクト詳細画面の「環境変数」タブから追加できます。

なお、ローカルの.envに書いた値は、そのままでは公開後のアプリへ引き継がれません。

ステップ4：独自ドメインを設定する（任意）

発行されたサブドメインのままでも運用できます。自分のドメインで公開したい場合は、ダッシュボードのプロジェクト詳細画面にある「ドメイン」タブからドメインを追加すると、設定すべきDNSレコードが表示されます。表示されたレコードをドメイン管理側のDNSに設定し、反映後に検証を実行すれば切り替え完了です。設定する値はプロジェクトごとに違うので、自分の画面に出たものをそのまま写してください。SSL証明書は自動で発行されます。ここまでの操作はCLIでも完結し、lolipop domain createでドメインを追加してDNSレコードを表示し、設定後にlolipop domain verifyで検証を開始します。

独自ドメインをこれから取るなら、ムームードメインのMCPサーバーを使う手があります。AIエージェントから外部のサービスをそのまま操作できるようにする仕組みで、ドメインの空き検索から取得、DNSレコードの設定までを任せられます。公式ページによると、AレコードやCNAMEレコードの作成・更新・削除もAIが実行します。使えるのはClaude Code・Claude Desktop・OpenAI Codex・Gemini CLIで、MCPサーバーそのものの利用は無料です（ドメインの取得・更新には通常の料金がかかります）。デプロイナウのCLIと合わせれば、ドメインを取ってDNSを整え、アプリを公開するまでの流れを、ぜんぶAIエージェントとの会話やターミナル上で進められます。

Next.jsのデプロイ先の選び方（比較）

Next.jsのデプロイは、公開方式（静的かサーバーか）と置き場所（どこで動かすか）の組み合わせで手順が決まるため、この2つを基準に決めると迷いません。Next.jsアプリの置き場所の選択肢は、大きく次の3系統です。

デプロイ先の系統	向いているケース	自分でやる作業
ホスティングサービス（デプロイナウ、Vercel、Netlifyなど）	とにかく早く公開したい・サーバー管理をしたくない	CLIでのデプロイ実行と環境変数の設定
自前のサーバー・VPS	OSやミドルウェアの構成を自分で決めたい	サーバー構築・DNS設定・Node.jsの導入・プロセスの常駐化
クラウド（AWS・Google Cloudなど）	すでにクラウドを業務で使っている・構成の自由度がほしい	コンテナの用意・アカウントや権限の設定・課金管理

個人開発ですぐに公開したいなら、選ぶのはホスティングサービスです。理由は表の右列、作業量の差です。自前のサーバーではドメインのDNS設定からNode.jsの導入、プロセスを常駐させる仕組みづくりまでが自分の担当になります。ホスティングサービスはこの部分をサービス側が受け持つので、手元に残る作業はコマンドの実行と環境変数の登録だけです。

ホスティングサービスには、手順の章でも触れたVercelやNetlifyなどの海外サービスがあり、国内のサービスではロリポップ！デプロイナウがここに入ります。選び分けのポイントは、画面やドキュメントの言語、料金の形、必要な機能が揃っているか、商用で使えるか、などです。

ロリポップ！デプロイナウのプランは執筆時点で、無料のFreeと月額980円のPersonalの2つ。どちらのプランでもカスタムドメインの設定、SSL証明書の自動発行、商用利用まで可能です。最新のプラン内容はデプロイナウのプランのページに載っています。

また、Webアプリを公開できる場所をNext.js以外も含めて広く比べたい場合は、Webアプリを公開する方法の記事でも整理しています。

Next.jsのデプロイでつまずきやすいポイントと対処

デプロイしたのに動かないときは、次の2か所から見てください。

output: 'standalone'を書き忘れている

症状は、デプロイの途中で起きるビルド失敗や、公開に必要な成果物が見つからないというエラーです。ローカルのnpm run buildは設定なしでも成功してしまうため、「手元では動くのにデプロイで落ちる」という形で現れます。デプロイナウのようにこの設定を前提とするデプロイ先を選んでいるなら、まずnext.configにoutput: 'standalone'の行があるかを確認してください。

環境変数が反映されない

.envファイルに書いた値は、デプロイナウではビルド時にも公開時にも参照されません。ローカルで動いているのに公開後だけAPI呼び出しが失敗する場合、まずここを疑ってください。対処はステップ3のとおり、環境変数のドキュメントにある手順でプロジェクトの環境変数として登録し直すことです。登録済みの値はlolipop env listで一覧でき、値は伏字で表示されます。

よくある質問（FAQ）

Next.jsアプリは無料でデプロイできますか？

できます。デプロイナウには無料のFreeプランがあり、プランのページにあるとおり無料のまま商用利用も認められています。

Next.jsのデプロイ先はどこがおすすめですか？

サーバー管理に時間を使いたくない個人開発で、日本語のドキュメントやサポートがあると安心な場合、ホスティングサービスのロリポップ！デプロイナウをおすすめします。OSの構成から自分で決めたい場合は、VPSやクラウドが選択肢です。

GitHub PagesにNext.jsアプリを置けますか？

静的エクスポートで書き出したファイル一式なら置けます。Next.js公式もGitHub Pages向けのデプロイ用テンプレートを公開しています。サーバー側の機能を使うアプリの場合は、Node.jsサーバーを動かせるデプロイ先を選んでください。

AWSやGoogle CloudにNext.jsをデプロイできますか？

Node.jsサーバー方式のNext.jsは、Node.jsやコンテナを動かせる環境なら公開できます。AWSや、Google CloudのCloud Runなどを使う場合は、コンテナの用意、アカウントと権限の設定、課金の管理を自分で進める前提になります。

コードを更新したら、もう一度デプロイし直す必要がありますか？

はい、同じディレクトリでlolipop deployを再実行すると新しいバージョンが公開されます。lolipop project linkで紐付けておけば、2回目以降はオプションなしのlolipop deployだけで済みます。なお、Gitのpushに連動した自動デプロイと、プルリクエストごとのプレビューURLの発行は、ロリポップ！デプロイナウでは現在提供されておらず、公式のお知らせで順次提供が予定されています。

Reactで作ったアプリも同じ手順でデプロイできますか？

Next.jsを使っているReactアプリなら、この記事の手順がそのまま使えます。Next.jsを使っていない構成ではビルド成果物が静的ファイルになることが多く、静的エクスポートと同じ考え方でデプロイ先を選びます。

デプロイにDockerは必要ですか？

デプロイナウのCLI手順で必要なのはNode.js 22.12.0以上とnpmで、手順にDockerは登場しません。Cloud Runのようにコンテナを前提とするデプロイ先を選んだ場合に必要になります。

Next.jsアプリの公開ならロリポップ！デプロイナウ

手順の手間、費用の不安、英語のドキュメント。デプロイを後回しにする理由の多くは、デプロイ先の選び方で解消できます。ロリポップ！デプロイナウは、動的なNext.jsアプリの公開から独自ドメイン、SSLまでを一通りそろえたうえで、次の3つに特徴があります。

• コマンドひとつで公開できる：lolipop deployでビルドから公開まで自動で進みます。Claude CodeなどのAIエージェントに「デプロイして」と自然言語で頼む使い方にも対応しています
• 無料から始められる定額制：執筆時点で、Freeプランは無料、Personalプランは月額980円です。どちらのプランでも商用利用ができます
• 日本語でそのまま完結する：画面もドキュメントも日本語で読めて、Personalプランには有人メールサポートが付きます

Freeプランの上限は執筆時点で月間リクエスト1,000,000回、CPU実行時間4時間、メモリ512MiBです（最新値はプラン一覧を参照）。個人開発のアプリを公開して反応を見るには十分な枠なので、まず無料で出して、足りなくなったらPersonalへ切り替える使い方ができます。

まとめ

• Next.jsの公開方式は、静的エクスポートとNode.jsサーバーの2つ
• デプロイナウにNode.jsサーバー方式で出すなら、next.configへのoutput: 'standalone'の1行が必要
• デプロイ先選びの決め手は、自分でやる作業の量

ローカルで動くところまで作れたなら、公開までの残り作業はコマンド数回分です。あと少し手を動かせば、自分のアプリのURLが手に入ります。

→ ロリポップ！デプロイナウを見てみる

npm run devのターミナルを閉じたあともアプリはURLの先で動き続けて、リンクを送るだけで誰にでも見てもらえるようになります。