HarioNote

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

タイトルの通り、Next.jsの公式Docを読みながらデプロイ方法、デプロイ先について公式Docではどのようなものが提案・紹介されているのか確認しながら考えてみようと思います。

本記事の内容は公式Docの内容に則っていますが私の意訳なので正しいことを保証するものではありません。正確な情報を知りたい場合は公式Docを参照してください。

公式Docを読む際の注意点

まずNext.jsの公式Docを読む際の注意点ですが、Next.jsはPages RouterとApp Routerがあり、DocもPages RouterとApp Routerで分かれているので注意してくだい。
なお本記事はApp Routerを前提としています。

スクリーンショット2023-07-045.39.34.png
PagesRouterに関するドキュメントかAppRouterに関するドキュメントかは左サイドのナビの一番上に表示されている。

スクリーンショット2023-07-045.41.35.png
表示するドキュメントはここで切り替えることができます。

スクリーンショット2023-07-045.42.13.png
ちなみにドキュメントを検索する場合もApp(AppRouter)かPages(PagesRouter)かターゲットを選択できます。

公式Docのデプロイに関する章を確認してみる

デプロイに関する内容はこちらに記載されています。

ビルドで生成されるもの

デプロイ先を考えるうえでまず、ビルドによって生成されるものを確認しましょう。
Next.jsでビルドすると

  • Automatic Static Optimizationされたページか(Pages Routerで)getStaticPropsを使ったページのHTMLファイル
  • CSSファイル
  • Next.jsサーバーで動的なコンテンツをプリレンダリングするためのJavaScript
  • クライアントサイドでインタラクティブなUIなどを提供するためのJavaScript

といったものが生成されるようです。（生成物は.nextフォルダに出力されるとのこと。）

※ Next.jsには静的エクスポート機能(Static Exports)もあるため、それを利用する場合はまた違ってくるようです。
※ ビルドコマンドに関するDocはこちらです。

Vercelかセルフホスト

ホスティング先を考える場合、まず最初の分かれ道としてVercelを使うかそれ以外にするか、だと思います。
VercelはNext.jsの開発元なだけあり、設定作業等は最小限でいいみたいです。ただVercelは開発元提供のスタンダードな方法なので本記事ではとくに掘り下げて触れることはしません。

セルフホストをする場合

Node.js

セルフホストするホスティング先(デプロイ先)の環境としては、Node.jsをサポートしているホスティングプロバイダーであればどれでもデプロイ可能なようです。（例えば、awsのEC2やDigitalOcean Dropletなど。）

Docker Image

また、Dockerコンテナをサポートしているホスティングプロバイダでもデプロイ可能とのことです。コンテナでNode.js環境を用意してあげるので、ホスティングプロバイダ自体がNode.jsをサポートする必要はないということですね。（手順の例もこちらに載っています。）

StaticなHTMLのエクスポート

Next.jsの静的エクスポート機能(Static Exports)を使用する場合は、Node.js環境やDockerコンテナサポートがないホスティング先にもデプロイできるようです。
ただ、Static Exportsには使用できる条件などがあるので注意が必要です。（Static ExportsについてのDocはこちら）

その他のサービスを利用したホスティング

Vercelやセルフホスト以外にマネージドなサーバーを提供しているサービスを利用する方法もある。今時はこれも多いのではないだろうか。
以下のサービスがNext.jsのデプロイ方法を紹介していたりする。

静的エクスポート(Static Exports)で、その他サービスを利用してホスティング

Static Exportsを利用するNext.jsアプリであっても、その他サービスを利用する方法という選択肢がある。
Static Exportsであれば静的ホスティングプロバイダを利用してホスティングができる。

GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure PipelinesなどのCI/CDパイプラインを通してデプロイすることも可能とのこと。

以下のホスティングプロバイダのサービスがNext.jsの静的ホスティングの方法を紹介したりしている。

所感

デプロイ方法ホスティング先としてはかなり多様な選択肢があるようですね。
Static Exportsであれば、ちょっとしたレンタルサーバーへのデプロイも可能で、シンプルなウェブサイト的なものであればそれもありかと思いました。

選択のポイントとしては、Static Exportsをするかどうかに大きく左右されそうですね。（Static ExportsだとNode.js環境が不要というのは大きいですね）

Next.jsで何かを作る際は、最初にStatic Exportsするかどうかを検討するのが良さそうです。

以上。

Share this post