今更ですが、Next.jsのgetStaticPropsをつかってSSG入門してみた(TypeScriptを添えて)

こちらは、アソビュー！ Advent Calendar 2021の22日目の記事です。

アソビューでエンジニアをしているノグチです。昨今フロントエンド領域で何かと話題になっているSSGをNext.jsでどうやっているのか興味があり、いまさらですが入門してみたのでそれについて書きたいと思います。Next.jsの公式チュートリアルではTypescriptを使用しておらず、DBからデータを取得する例はなかったりでしたので、それらを使って書くのに少しでもお役に立てばと思います。

getStaticPropsとは

geStaticPropsとは、Next.jsのSSG*用のページコンポーネント内でexportする非同期関数です。この関数内にはサーバーサイドで実行される任意のコードを記述することができます。つまり、認証情報などをクライアントから見えない状態でDBや外部APIに接続してデータを取得してくることが可能になります。

*SSGとは: Static Site Generationの略称で、従来のClient Side Renderingではなくビルド時に静的ファイルをすべて生成してしまって、クライアントからリクエストをされたときに瞬時にページを描画できるようにできるすぐれた技術です。これにより、UXだけでなく、パフォーマンス、セキュリティの向上やSEO対策にもなると言われています。

実装してみる

1. Next.jsアプリケーションを作成し、pages/question/[id].tsx のように pages ディレクト配下に [] でファイル名を囲んで作成します。(動的ファイルにするため [] を使用)

├── pages
│   └── question
│       ├── [id].tsx

2. getStaticPaths メソッドでDBや外部APIを使って pages/question/[id] のパスの id に入るものをすべて params として取得します。(今回の例では questionIdを id にして画面を動的に切り替えるようにするため、以下のように今回はCloud FirestoreのDBに用意した questionsコレクションから questionId を取得するようにしています。)

gist.github.com

3. getStaticPaths で取得した params を getStaticProps に引数として渡し、その params の中に入っている idを条件に各 pages/question/[id] ページに必要なデータを取得します。

gist.github.com

4. getStaticProps で return した props をページコンポーネントに渡します。

gist.github.com

上記はサンプルのため簡易的に記述しましたが、基本的には上記のように getStaticPaths ➔ getStaticProps ➔ 「Reactコンポーネント」という流れでデータを渡していくので、あとはコンポーネント内で通常通り props を使用していろいろな処理を実装していきます。