KinstaでNext.jsを使って静的サイトをセットアップする

こちらのページでは、弊社静的サイトホスティングサービスで、GitHubリポジトリからNext.jsを使用して静的サイトをセットアップする方法の例をご紹介します。

Next.jsはウェブアプリケーションの構築に使用されるReactフレームワークです。詳細はNext.jsの公式サイトをご覧ください。

以下のテンプレートは、弊社アプリケーションホスティングでも追加設定なしでお使いいただけます。アプリケーションホスティングを使用する場合、弊社システムが必要なコマンドを自動検出するため、ウェブプロセスのstartコマンドは空白のままにしておいて問題ありません。

package.jsonファイルで定義された依存関係は、デプロイメントプロセス中に自動インストールされます。

1. GitHubにログイン後、「Kinsta – Hello World – Static Site With Next.js」テンプレートから、新規リポジトリを作成します（「Use this template」＞「Create a new repository」）。
2. MyKinstaで、「Hello World – Next.js」リポジトリを使用して静的サイトを追加します。「ビルド設定」が自動入力される場合は、以下の設定と一致していることを確認し、必要に応じて変更してください。
   • ビルドコマンド：npm run build
   • Nodeバージョン：16.20.0
   • 公開ディレクトリ：out
3. ビルドが終了するとすぐに静的サイトが利用可能になり、デフォルトのNext.jsページが静的サイトのURLを介して表示されます。

デプロイメントライフサイクル

デプロイメントを開始すると（静的サイトの作成、またはコミットの失敗による再デプロイ）、ビルドコマンドが実行され、Publish Directoryコンテンツがデプロイされます。