Next.js
Next.jsサイトを静的ページとして無料デプロイする方法
Next.jsは強力ですが、すべてのプロジェクトにサーバーサイドレンダリングが必要なわけではありません。主に静的ページで構成されるサイトなら通常のHTMLとして書き出し、HTML To Linkを含む任意の場所へデプロイして、1分以内に無料の公開URLを取得できます。
Next.jsで静的書き出しを有効にする
next.config.mjsにoutput: 'export'を追加します。これによりnext buildの実行時に、完全な静的サイトがout/ディレクトリへ生成されます。
API Routes、動的データを扱うServer Components、Middlewareは使わず、任意のブラウザーで動作する純粋なHTML、CSS、JavaScriptとして出力します。
- // next.config.mjs
- export default { output: 'export' }
- 次に実行：npx next build
- 静的ファイルはout/ディレクトリに生成される
out/ディレクトリをデプロイする
out/フォルダーをZIPにしてHTML To Linkへアップロードし、入口ファイルをindex.htmlに設定します。すぐに公開URLを取得できます。
または、MCPサーバーで--nextフラグを指定してnpx htmltolink-mcp deploy --nextを実行します。ビルドとアップロードが自動的に処理されます。
- 手動：out/をZIP化 → アップロード → index.htmlを選択 → 公開
- CLI：npx htmltolink-mcp deploy --next（自動ビルド + アップロード）
- Agent：Cursorに「このNext.jsプロジェクトをデプロイして」と指示
静的書き出しが適している場面
ランディングページ、ドキュメントサイト、ポートフォリオ、ブログのプレビュー、マーケティングページ、AI生成フロントエンドに適しています。
SSR、API Routes、リクエスト時のデータベースクエリが必要なら、VercelまたはNodeサーバーを利用してください。それ以外では、静的書き出しとHTML To Linkの組み合わせがすばやく無料で公開できる方法です。
FAQ
Next.jsのコードを変更する必要がありますか？
API Routes、getServerSideProps、Middlewareなどサーバー専用機能を使っている場合のみ変更が必要です。getStaticPropsまたは純粋なClient Componentsを使うページはそのまま動作します。
画像やフォントはどうなりますか？
out/ディレクトリへ自動的に含まれます。相対パスを使うか、静的書き出し用にnext/imageのloaderを設定してください。
後からサイトを更新できますか？
はい。再ビルドして同じリンクへ再アップロードすれば、更新後もURLは変わりません。