はじめに

こんにちわ！こんばんわ！ご観覧ありがとうございます。
定期的に雑色な記事を投稿します。(タイトルは記事のメインの内容にしてますが)
基本的には抱えている問題を改善し、改善方法を記事にしてアップしようと考えています。

お題と経緯

作成した静的サイトのパフォーマンスをチューニングします。
経緯ですが、話すと長いので箇条書きでまとめます。

案件をいただき静的サイトを作成した
一時的にデプロイし公開することが急務だった
静的サイトに紐づくプロジェクトがそろそろアクティブになる

やばい！チューニングしないと！
ということで徐々にパフォーマンスが良くなるよう修正していきます。

使用した技術

Category	Technology Stack
Frontend	Nextjs,React,Typescript
Backend	Typescript,Node,CloudFunction
Database	Firestore
Design	XD

前回の内容

前回記事

パフォーマンス無関心で作ったサイトのパフォーマンスチューニング② NextjsのImageタグが便利 - zare926のブログ

要点をまとめると、HTMLのimgタグでsrcsetなどをセッティングするより、Nextjsを使っているならImageコンポーネントに任せちゃおうって話でした。

今回の内容

色々と経緯はあるんですが、お題としてはFirebaseのHostingを使用してNextjsをSSGでデプロイする方法です。
今回の話はあくまで経験した限りの情報なので、ご留意を！
そんなに多くは無いですが、DBからデータをfetchを取得して表示する項目も存在するので、SSGにしてパフォーマンスを良くしようとしました。

最初に注意点

Nextjsのバージョンは"next": "12.2.5"でSSG（getStaticProps）とImageコンポーネントを使用しFirebase Hostingを行なっていました。
Nextjs13でImageコンポーネントの仕様が少し変わったので、12→13にバージョンをアップデートしました。
そして調整を終え、いつも通りデプロイしてみると...
画像が表示されなくなりました！！！
調べてみると、元々SSGとnextjsのImageコンポーネントは併用ができないそうです。
ですが、Firebaseのドキュメントにはサポートされていると書いてあるし、そして今までできていた。

ドキュメント

Next.js を統合する | Firebase Hosting

何通りか試しては見たものの、なかなかうまくいかず、調べてみた記事やライブラリについての情報だけ載せておきます。

next/imageとSSG | エビスコム - EBISUCOM

next/imageを使ってビルド時に画像を最適化する方法

NextのImageコンポーネントはオンデマンドで画像を最適化するので、それ用のサーバーを立てる必要があるようですね。

現状少なくとも"next": "12.2.5"はこれから説明するデプロイ方法でSSGとImageコンポーネントを併用できそうです。

デプロイ手順

まずはFirebaseCLIをインストールしてください

$ npm install -g firebase-tools

すでにインストールされていますが、Nextのホスティングに対応しているバージョンが、ドキュメントだと11.14.2 以降なので、updateしてください。

$ npm i -g firebase-tools to update

続いてFirebaseCLIのフレームワークプレビューを有効にします。

$ firebase experiments:enable webframeworks

次にホスティングの設定をします。

$ firebase init hosting

この後は対話形式です。
ドキュメントに一連が載ってますのでご参考にしてください。

Next.js を統合する | Firebase Hosting

基本的にこの設定が有効になっていれば、NextjsのソースコードからgetStaticPropsやgetStaticPathsを読み取ってくれて、必要なCloudFuntionsを自動でデプロイしてくれます。

最後に

やっぱりデプロイとか開発環境と本番環境の差異って出ますよね。
いつもびびってます。
この件でNextのImageコンポーネントについて少しは知れたので良かったとします。
ここまで見てくださった方、ありがとうございました！