ServBayでNext.jsプロジェクトを作成して実行する

概要

Next.jsは、Vercelによって開発および管理されている強力なReactフレームワークで、現代的かつ高性能なWebアプリケーション構築に広く利用されています。Reactを基盤としており、多くの機能が標準で提供されているため、開発者は複雑なアプリケーションもシンプルに構築できます。

Next.jsとは？

Next.jsは人気のあるオープンソースのReactフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、さまざまなレンダリング手法をサポートしています。これらの機能により、アプリケーションのパフォーマンス向上・ユーザー体験の改善・SEO最適化を同時に実現できます。Next.jsにはファイルシステムベースのルーティング、APIルート、コード分割、CSS Modulesサポートなど、ワンストップ開発環境を実現する多彩な機能が内蔵されています。

Next.jsの主な特徴とメリット

多彩なレンダリング戦略： SSR、SSG、クライアントサイドレンダリング（CSR）、そしてこれらを組み合わせたハイブリッドレンダリングをサポート。開発要件に合わせて最適なモードを選択できます。
ファイルシステムルーティング： pagesまたはappディレクトリの構造から自動でルーティングを生成。直感的でシンプルです。
APIルートの提供： Next.jsプロジェクト内で簡単にAPIエンドポイントを作成可能。フロントエンドとバックエンドの統合開発に便利です。
自動コード分割： ページごとに必要なJavaScriptのみを読み込み、表示速度を最適化します。
画像コンポーネント(next/image)最適化： 画像サイズやフォーマット、読み込み戦略を自動で最適化し、パフォーマンスを向上。
CSS/Sassサポート内蔵： スタイルの管理や記述を簡単に行えます。
高速リフレッシュ（Fast Refresh）： コード変更の即時反映により、スムーズな開発体験を実現します。

Next.jsを使うことで、開発者は高パフォーマンスかつ拡張性と保守性の高いモダンWebアプリを効率良く構築できます。

ServBayでNext.jsプロジェクトを動かす

ServBayは、Node.jsなど多数の言語およびツールを内蔵した統合ローカルWeb開発環境です。ServBayのNode.js環境に加え、Webサイト管理機能（リバースプロキシや静的ファイル提供など）を使うことで、Next.jsプロジェクトの作成・開発・デプロイを簡単かつ強力に行えます。

このガイドでは、ServBay環境でのNext.jsプロジェクトの新規作成、開発モードでのリバースプロキシによる運用、そして本番モードでの静的サイトデプロイの方法までを順を追って解説します。

事前準備

開始前に以下をすでに実施していることを確認してください：

macOS上にServBayがインストールされている
ServBayのソフトウェアパッケージ管理画面から、必要なNode.jsパッケージをインストールし有効化している
※まだNode.jsをインストールしていない場合は、ServBayのNode.js環境の利用方法を参照してください。

手順

1. Next.jsプロジェクトの作成

まず、Next.jsプロジェクトを初期化します。

ターミナルを開いて、ServBayのデフォルトWebルートディレクトリに移動します：
bash
```
cd /Applications/ServBay/www
```
1
create-next-appでプロジェクト初期化： 以下コマンドで新しいプロジェクトを作成します。プロジェクト名は例として servbay-next-app を推奨します。これにより /Applications/ServBay/www 配下に同名ディレクトリが作成されます。
bash
```
npx create-next-app@latest servbay-next-app
```
1
npxはNode.jsパッケージコマンドの実行ツール、create-next-app@latestはNext.js最新版の初期化ユーティリティです。表示に従い、TypeScript・ESLint・Tailwind CSS・App Routerなどの使用有無を選択してください。
プロジェクトディレクトリ移動＆依存パッケージインストール：
bash
```
cd servbay-next-app
npm install
```
1
2
npm installコマンドで、package.jsonに記述されたすべての必要パッケージがインストールされます。

2. プロジェクト出力内容の編集（任意）

プロジェクトが正しく動作しているか確認するため、トップページの内容を簡単に編集してみます。

pages/index.js（Pages Router利用時）を開く。App Router選択時はapp/page.jsを編集してください。ここではPages Routerを例にします：
bash
```
# お好みのエディタでファイルを開きます。例：VS Code
code pages/index.js
```
1
2
ファイル内容を編集し、「Hello ServBay!」を表示： 以下のような形にファイル内容を変更してください。
javascript
```
// pages/index.js (Pages Router)
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
      <p>This page is running via ServBay.</p>
    </div>
  );
}
```
1
2
3
4
5
6
7
8
9
App Router（app/page.js）の場合も基本的な編集方法は同じで、<h1>タグの内容を変更します。

3. 開発モードでの起動

開発時はNext.js標準の開発サーバーを用います。これはホットモジュールリプレース（HMR）および高速リフレッシュ対応なので、コード変更結果をリアルタイムに確認可能です。ServBayのリバースプロキシ機能で、ローカルの開発サーバーポートに外部ドメインを割り当ててアクセスできます。

Next.js開発サーバーの起動： プロジェクトルート（/Applications/ServBay/www/servbay-next-app）で以下コマンドを実行します：
bash
```
npm run dev -- -p 8585
```
1
このコマンドでNext.js開発サーバーが起動し、-p 8585引数でローカルポート8585でリッスンします。ご都合に応じて他の未使用ポートでもOKです。
ServBay Webサイト（リバースプロキシ）の設定： ServBayアプリ画面からWebサイト管理に移動し、新しいWebサイトを追加、以下のように設定します：
- 名前: My first Next.js dev site（任意のお好きな名称でも可）
- ドメイン: servbay-next-dev.servbay.demo（ローカルテスト用に .servbay.demo 利用を推奨）
- Webサイトタイプ: リバースプロキシ (Reverse Proxy)を選択
- プロキシ先IP: 127.0.0.1（ローカルループバックアドレス）
- プロキシ先ポート: 8585（Next.js開発サーバーポート）
設定が終わったら「保存して適用」。ServBayはCaddyまたはNginx（ご利用の設定による）を自動設定し、servbay-next-dev.servbay.demo宛のリクエストを127.0.0.1:8585に転送します。
詳細手順はServBayにNode.js開発用サイトを追加するを参考にしてください。
開発モードサイトにアクセス： ブラウザで、設定したドメイン https://servbay-next-dev.servbay.demo へアクセスします。
ServBayは、標準でローカルドメインにSSL証明書（ServBay User CA利用）を自動発行・設定しているので、HTTPS経由で安全にアクセスでき、ブラウザ警告もありません。独自ドメインや無料SSL証明書対応なので、ローカル開発にも最適です。

4. 本番ビルドと静的Webサイトとしてデプロイ

Next.jsプロジェクトが完成し本番運用したい場合は、最適化済みの本番ビルドを作成します。静的出力プロジェクト（output: 'export' 設定または next exportコマンド使用時）は、ServBayの静的Webサイトサービスが理想的です。

Next.js本番ビルドおよび静的ファイル出力： プロジェクトルート（/Applications/ServBay/www/servbay-next-app）で以下コマンドを実行します：
bash
```
npm run build
npm run export
```
1
2
- npm run buildはプロジェクトコードの本番ビルドを作成し、多くの場合.nextディレクトリに出力します。
- npm run exportコマンド（Next.js設定が必要、バージョン差異あり）またはoutput: 'export'設定で、最終的に最適化された静的サイト（HTML、CSS、JavaScript）をoutディレクトリに生成します。
ServBay Webサイト（静的ファイル提供）の設定： ServBayアプリでWebサイト管理から新規追加し、次のように入力します：
- 名前: My first Next.js production site（好みの名称可）
- ドメイン: servbay-next-prod.servbay.demo（.servbay.demoを推奨）
- Webサイトタイプ: 静的 (Static)を選択
- Webサイトルート: Next.js静的出力outディレクトリのフルパス、例：/Applications/ServBay/www/servbay-next-app/out
設定保存後、ServBayがWebサーバーを自動構成し、/Applications/ServBay/www/servbay-next-app/outから静的コンテンツを提供します。
本番サイトにアクセス： ブラウザで設定したドメイン https://servbay-next-prod.servbay.demo を開きます。Next.jsでビルド・エクスポートされた静的サイトが表示されれば成功です。
こちらもServBayのカスタムドメイン・自動SSL対応により、ローカル本番環境でもHTTPSでセキュアに利用できます。

まとめ

ここまでのステップを通じて、ServBayローカル開発環境上にNext.jsプロジェクトを作成し、開発モードでのリバースプロキシによるリアルタイムプレビュー、本番ビルド後の静的ファイル提供によるデプロイ方法まで一連の流れを習得できました。ServBayの統合環境と使いやすいWebサイト管理機能で、Next.jsプロジェクトのローカル開発・検証がよりシンプルかつ効率的に行えます。

ServBayでNext.jsプロジェクトを作成して実行する ​

概要 ​

Next.jsとは？ ​

Next.jsの主な特徴とメリット ​

ServBayでNext.jsプロジェクトを動かす ​

事前準備 ​

手順 ​

1. Next.jsプロジェクトの作成 ​

2. プロジェクト出力内容の編集（任意） ​

3. 開発モードでの起動 ​

4. 本番ビルドと静的Webサイトとしてデプロイ ​

まとめ ​