Firebase HostingにNext.jsアプリをデプロイする

Firebase Hostingを利用して、Next.jsのアプリケーションをデプロイする方法について解説します。
この記事では、新しいNext.jsプロジェクトの作成、Firebase CLIのインストール、Firebase Hostingへのデプロイ設定の初期化、Next.jsの静的コンテンツとしてのエクスポート設定、そして最終的にビルドとデプロイをするところまでを解説します。

新規にNext.jsプロジェクトを作成する

新しいNext.jsアプリケーションを作成するには、以下のコマンドを実行します。このコマンドはTypeScriptを使うプロジェクトを作成しますが、必要に応じて異なる設定を選択できます。

% npx create-next-app@latest --typescript

firebase-toolsをインストールする

Firebase CLI（コマンドラインインターフェース）は、Firebase Hostingへのデプロイを含むさまざまなFirebaseサービスの管理を行うために必要です。以下のコマンドでインストールし、Firebaseにログインします。

インストール:

% npm install  -g firebase-tools

ログイン:

% firebase login

Firebase Hostingにデプロイするための設定を初期化

Firebase Hostingへデプロイするためのプロジェクト設定を初期化します。以下のコマンドを実行し、表示される指示に従って設定を完了します。

初期化:

% firebase init hosting

質問への回答例:

• プロジェクト選択: Use an existing project
• パブリックディレクトリの設定: out（Next.jsのビルド出力ディレクトリを指定）
• シングルページアプリケーションの設定: No（必要に応じてYesを選択）
• GitHubでの自動ビルドとデプロイの設定: No（CI/CDプロセスを利用する場合はYesを選択）
• 既存の404.htmlとindex.htmlの上書き: No

Next.jsを静的コンテンツとしてexportする設定

Next.jsアプリケーションを静的サイトとしてエクスポートするには、next.config.mjsファイルを編集して、ビルド設定を更新します。今回は静的サイトのエクスポートに関するoutput: 'export'とtrailingSlash: trueの設定をします。

const nextConfig = {
    ・・・
    output: 'export', 
    trailingSlash: true,
    ・・・
};

それぞれの設定について、詳しく解説します。

output: ‘export’

output: 'export'設定は、Next.jsのアプリケーションを静的サイトとしてエクスポートする際のビルド出力を指定します。通常、Next.jsはサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）など、動的なレンダリング機能を提供しますが、output: 'export'を使用することで、アプリケーションを完全な静的ファイルセットとして出力することができます。これにより、Firebase Hostingのような静的ファイルホスティングサービスにデプロイする際に最適な形式になります。

この設定は、ビルドプロセス中にNext.jsによって生成されるHTML、JavaScript、CSSファイルなどを、指定されたoutディレクトリにエクスポートします。その結果、サーバーの実行なしに直接ファイルを提供することが可能になり、Firebase Hostingで動かすことが可能になります。

trailingSlash: true

trailingSlash: true設定は、URLの末尾にスラッシュ(/)を追加するかどうかを制御します。この設定がtrueに設定されている場合、Next.jsはすべてのルーティングURLの末尾にスラッシュを自動的に追加します。たとえば、/aboutのようなURLは/about/として扱われます。

この挙動は、特に静的サイトとしてアプリケーションをエクスポートする際に有用です。なぜなら、多くの静的ファイルホスティングサービスでは、ディレクトリにアクセスする際にURLの末尾にスラッシュを期待するため、URLの標準化と互換性の向上に寄与します。また、SEOの観点からも、URLの統一性が重要であり、trailingSlash: trueはその一貫性を保証するのに役立ちます。

ビルドとFirebase Hostingへのデプロイ

アプリケーションをビルドし、Firebase Hostingにデプロイします。以下のコマンドを実行してください。

ビルド:

% npm run build

デプロイ:

% firebase deploy --only hosting  

これで、Firebase Hostingを使用してNext.jsアプリケーションをデプロイするプロセスが完了しました。Firebaseコンソールからデプロイされたアプリケーションへのリンクを確認し、ブラウザでアクセスしてみましょう。