こんにちは、ISSUEの寒河江です。
ISSUEではNext.jsを使ってCSRとSSRを分けてページを作成しています。

トップページは、CSRしています。
レビューやユーザーを毎回ロードして表示していますが、
ここは高頻度に変更を加える必要がなかったのでSSG化してみようと思います。

完成物

https://i-ssue.com/ にアクセスすると、すぐにページが表示されます。
若干遅れて、画像が表示されます。
以前のようにデータをロードするローディング画面は表示されせん。

GetStaticProps をインポート

型をインポートします。

ページの表示前にデータを取得する

getStaticProps関数を用意すれば、
ビルドした時にデータを読み込んでページに渡してくれます。

読み込んだデータをページに渡す

型を作って、propsで渡します。
変数として受け取れば、あとはこの変数を使ってページを表示すれば完了です！