Next.js はサーバー不要のサイトをビルドできます。output: "export" を設定すると、next build が各ページを HTML として out/ に書き出します。Lobsite はそのフォルダをホストします。npm run build を実行してから npx lobsite を実行すると、HTTPS 対応の *.lobsite.app アドレスでサイトが公開されます。最初に明確にしておくと、このページは静的エクスポートについて説明します。サーバーレンダリング、API ルート、ミドルウェアには Vercel のような Node.js ホストが必要です。
仕組み
next.config.jsでoutput: "export"を設定して静的エクスポートをオンにし（下記参照）、npm run buildを実行します。サイトはout/に出力されます。- プロジェクトで
npx lobsiteを実行します。デプロイされるのはout/で、public/や.next/ではありません。最初のデプロイにアカウントは不要で、6 時間有効です。 - 取得リンクから無料アカウントにサイトを残します。その後は
npm run build && npx lobsiteを実行するたびに同じアドレスが更新されます。
静的エクスポート用の next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "export",
images: { unoptimized: true },
};
module.exports = nextConfig;
output: "export"によりnext buildがout/を書き出します。古いnext exportコマンドは Next.js 14 で廃止され、この設定に置き換わりました。images: { unoptimized: true }はnext/imageを使う場合に必要です。デフォルトのローダーはリクエストごとにサーバーで画像をリサイズするためです。この設定では画像はそのまま配信されます。ビルド前にリサイズするか、カスタムローダーを使用してください。trailingSlashはオフのままでかまいません。ページはabout.htmlとして書き出され、Lobsite は/aboutで配信します。
静的エクスポートでできないこと
Next.js のドキュメントには、サーバーが必要な機能が記載されています。特によくあるものは次のとおりです。
- 静的な
GET以外の API ルートとルートハンドラー。フォームは代わりに/_lobsite/forms/contactに送信してください。フォームをご覧ください。 - next.config の
redirects、rewrites、headers。 リダイレクトとヘッダーはlobsite.tomlに移すと、すべてのリクエストに適用されます。リダイレクトジェネレーターでルールを作成できます。 - ページ内のミドルウェア、Server Actions、ISR、
cookies()やheaders()。 generateStaticParamsのない動的ルート。すべてのページをビルド時に把握している必要があります。
アプリがこれらに依存している場合は静的サイトではないので、サーバーで Next.js を実行するホストが適切です。
ファイルはハッシュで保存されます。変更のないサイトを再デプロイしてもアップロードは 0 バイトです。
公開前にプレビューできます。リダイレクトも含めてワンクリックでロールバックできます。
すべてのサイトに、最初のデプロイから HTTPS 対応の *.lobsite.app アドレスが付きます。
フォームの送信先を /_lobsite/forms/contact にするだけです。スパムフィルターも含まれます。
リダイレクト、ヘッダー、フォームは lobsite.toml に記述し、デプロイごとに一緒に反映されます。
すべての制限は公開されており、すべてのエラーが次にすべきことを教えてくれます。
Next.js ホストの比較
| Lobsite | Vercel | Netlify | GitHub Pages | |
|---|---|---|---|---|
静的エクスポート（output: "export"） |
はい | はい | はい | はい |
| サーバーレンダリング、API ルート、ミドルウェア | いいえ | はい | はい | いいえ |
| サーバーでのビルド | いいえ: out/ をデプロイ |
はい | はい | GitHub Actions で |
| 最初のデプロイ前のアカウント | 不要: 6 時間公開、その後無料で残せる | 必要 | 必要 | 必要（リポジトリも） |
| バックエンド不要のフォーム | はい（サイトをアカウントに残した後） | いいえ | はい | いいえ |
| カスタムドメイン | はい、無料 | はい | はい | はい |
Vercel は Next.js を開発しており、そのすべてを実行できます。静的エクスポートで作るマーケティングサイト、ブログ、ドキュメントなら、Lobsite のほうがシンプルなホストです。コマンド 1 つで、変更されたファイルのみをアップロードし、デプロイごとにプレビュー URL が付きます。
よくある質問
サーバーサイドレンダリングの Next.js アプリをここでホストできますか？
いいえ。Lobsite はファイルを配信するため、動作するのは静的エクスポートのみです。ページが getServerSideProps、Server Actions、動的レンダリングを使う場合は、サーバーで Next.js を実行できる場所でホストしてください。
エクスポート後に next/image の画像が壊れるのはなぜですか？
デフォルトの画像ローダーにはサーバーが必要です。next.config.js に images: { unoptimized: true } を追加するか、画像 CDN を指すカスタムローダーを設定して、再度ビルドしてください。
Next.js の 404 ページは動作しますか？
はい。next build は not-found ページ（App Router）または pages/404（Pages Router）から 404.html を書き出し、Lobsite は存在しないアドレスに配信します。
静的エクスポートで App Router を使えますか？
はい。サーバーコンポーネントはビルド時にレンダリングされ、クライアントコンポーネントは通常どおりブラウザで動作します。使えないのは実行時にリクエストが必要な機能のみです。