Next.js プロジェクトの作成と実行

Next.jsとは？

Next.jsは、Vercelによって開発されたReactフレームワークで、静的およびサーバーサイドレンダリングのReactアプリケーションを構築するために使用されます。SSR（サーバーサイドレンダリング）、SSG（静的サイト生成）、APIルーティング、組み込みのCSSおよびSassサポートなど、多くの即時使用可能な機能を提供し、開発者がモダンなWebアプリケーションをより効率的に構築できるようにします。

Next.jsの主な機能と利点

• サーバーサイドレンダリング（SSR）：ページの読み込み速度とSEOパフォーマンスを向上。
• 静的サイト生成（SSG）：静的ページを事前レンダリングし、パフォーマンスとユーザーエクスペリエンスを向上。
• 自動コード分割：現在のページに必要なJavaScriptコードのみを読み込み、パフォーマンスを最適化。
• 組み込みルーティング：ファイルシステムに基づくルーティング、追加の設定は不要。
• APIルーティング：同じプロジェクト内でAPIエンドポイントを作成可能。
• 組み込みのCSSおよびSassサポート：スタイルの管理が簡単。

Next.jsを使用すると、開発者がモダンで応答性の高いWebアプリケーションをより効率的に構築できます。

ServBayを使用してNext.jsプロジェクトを作成および実行

この記事では、ServBayが提供するNode.js環境を使用してNext.jsプロジェクトを作成および実行します。ServBayの「ホスト」機能を使用してWebサーバーを設定し、リバースプロキシおよび静的ファイルサービスを通じてプロジェクトにアクセスします。

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

1. プロジェクトの初期化

   まず、ServBayが提供するNode.js環境をインストールしていることを確認します。その後、以下のコマンドを使用して新しいNext.jsプロジェクトを初期化します：

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   プロンプトに従ってプロジェクト名（servbay-next-appを推奨）を入力し、その他のオプションを選択します。

2. 依存関係のインストール

   プロジェクトディレクトリに移動し、依存関係をインストールします：

   cd servbay-next-app
   npm install

Next.jsプロジェクト出力内容の修正

1. pages/index.jsファイルの修正

   pages/index.jsファイルを開き、ページが「Hello ServBay!」と出力するように内容を変更します：

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

開発モードに入る

1. 開発サーバーの実行

   開発サーバーを起動し、ポートを指定（例：8585）します：

   npm run dev -- -p 8585

   これにより、ローカルで開発サーバーが起動され、ポート8585が公開されます。

2. ServBayホストリバースプロキシの設定

   ServBayの「ホスト」機能を使用して、リバースプロキシを通じて開発サーバーにアクセスします。ServBayの「ホスト」設定で新しいリバースプロキシを追加します：

   • 名前：My first Next.js dev site
   • ドメイン：servbay-next-test.dev
   • ホストタイプ：リバースプロキシ
   • IP：127.0.0.1
   • ポート：8585

   詳細な設定手順については、Nodejs開発用サイトの追加を参照してください。

3. 開発モードにアクセス

   ブラウザーを開き、https://servbay-next-test.devにアクセスしてプロジェクトをリアルタイムで確認します。ServBayはカスタムドメインおよび無料のSSL証明書をサポートしており、より高いセキュリティを享受できます。

本番バージョンのビルド

1. 本番バージョンのビルド

   開発が完了したら、以下のコマンドを使用して本番バージョンをビルドします：

   npm run build
   npm run export

   ビルドが完了すると、生成された静的ファイルはoutディレクトリに配置されます。

2. 静的ファイルサービスの設定

   ServBayの「ホスト」機能を使用して、本番バージョンに静的ファイルサービスを通じてアクセスします。ServBayの「ホスト」設定で、新しい静的サイトを追加します：

   • 名前：My first Next.js production site
   • ドメイン：servbay-next-test.prod
   • ホストタイプ：静的
   • ウェブサイトルートディレクトリ：/Applications/ServBay/www/servbay-next-app/out

3. 本番モードにアクセス

   ブラウザーを開き、https://servbay-next-test.prodにアクセスしてビルド後の本番バージョンを確認します。ServBayのカスタムドメインと無料のSSL証明書により、ウェブサイトはより高いセキュリティと信頼性を持ちます。

以上の手順を通じて、Next.jsプロジェクトを作成し、ServBayの機能を使用してプロジェクトを管理およびアクセスすることに成功しました。