Next.js × Firebase Hosting でサイトを公開する【動的サイト編】
Reactを使ってWebアプリを公開してみたい！ というモチベーションでFirebase Hoistingを使ってデプロイまで行いました。
Firebase Hostingで公開する基本的な手順はこちら↓の記事をご参考ください。
今回の記事ではApp routerを使った動的パスをFirebase Hostingで公開していきます。
ちなみに作成したWebアプリはこちらです↓
はじめに
App routerでは次のようにフォルダ名を"[]"で囲んだ名前をつけることで、動的なURLでページを作成できます。
src/
├── app/
│ │
│ ├── sample/
│ │ └── [id]/
│ │ └── page.tsx
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
フォルダ構成がそのままURLに対応しているイメージです。
例えば、
- https://****.com/sample/SomeID/
というようなURLでアクセスすると、「id = "SomeID"」というパラメータに応じたページを動的に作成して表示することができます。
しかし、URLを解析して表示するデータを変更するには、「サーバー側がページを作成してクライアントに提供する必要がある」→ 静的サイトのホスティングでは不十分です。
ということで、今回はFirebase Hoistingでのサーバーサイドレンダリング(SSR)対応を実施しました。
前提
- Windows環境での解説です。
- firebase-tools：13.24.1
- Node.js：v20.17.0
- Node.js の導入などは完了しており、Next.js開発に必要な環境は整っている所からのスタートです。
- Firebaseのプロジェクト作成やHostingの基本設定は完了している前提です。
手順
- Firebaseのプランのアップグレード
firebaseのプランが無料プラン(Spark)の場合は有料プラン(Blaze)にアップグレードします。
既に有料プランの場合は不要です。
有料プランでも無料枠に収まる場合は請求は発生しません。
が、私の場合は毎日3円ほど請求が来ています……。
料金周りは仕様変更の可能性もあるので、詳細は公式サイトをチェック！ 2. Firebase CLI で、ウェブ フレームワークのプレビューを有効化
プレビュー機能なので、デフォルト無効になっていました。
firebase experiments:enable webframeworks
- Firebase Hostingの初期化
firebase init hosting
いくつか設定を聞かれるので答えていきます。
? Detected an existing Next.js codebase in the current directory, should we use this? (Y/n)
→ Next.jsのコードがあるけどこれを使う？ と聞かれています。
作成しているNext.jsのプロジェクトを使うので「Yes」でいきます。
? In which region would you like to host server-side content, if applicable?
> us-central1 (Iowa)
us-east1 (South Carolina)
us-west1 (Oregon)
asia-east1 (Taiwan)
europe-west1 (Belgium)
→ サーバーの場所を選べるようになっていました。前やった時はこんな親切じゃなかったような……。
どこでもいいですが、とりあえず日本に近い台湾(asia-east1)を選びます。
- firebaseのダウングレード
必要な人だけ。
自分の場合はエラーが発生したので、ダウングレードを実施しました。
おそらくサーバー側のNext.jsの依存関係の影響かと思います。
npm install firebase@10.14.1
- デプロイ
デプロイします。
サーバー側のFunctionもデプロイしているからか、静的サイトのデプロイに比べて少し時間がかかります。
firebase deploy
終わりに
簡単にサーバーサイドレンダリングの設定でホスティングすることができました！
ただ、動的サイトの場合はFirebaseが推奨する「App Hosting」へ移行したほうが良いかもです。
今は大丈夫でも、いつ梯子を外されるかわからないですしね……。
とにもかくにも、お手軽にホスティングができることは間違いないので、Firebase Hostingは便利でした。
Discussion