こちらは、アソビュー! 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
を取得するようにしています。)
3. getStaticPaths
で取得した params
を getStaticProps
に引数として渡し、その params
の中に入っている id
を条件に各 pages/question/[id]
ページに必要なデータを取得します。
4. getStaticProps
で return
した props
をページコンポーネントに渡します。
上記はサンプルのため簡易的に記述しましたが、基本的には上記のように getStaticPaths
➔ getStaticProps
➔ 「Reactコンポーネント」という流れでデータを渡していくので、あとはコンポーネント内で通常通り props
を使用していろいろな処理を実装していきます。
感想
今回Next.jsのSSG入門をして、「SSGすごくない!?」と思ったので、これを応用してブログサイトを作ったりしてNext.jsの可能性をもっと体感してみたい思います!
アソビューではエンジニアを大募集しております!これからますます成長するサービスをモダンな技術で作っていきたい方、まずは以下のWantedlyをご覧ください!