Next.js + VercelでJAMstackなサイト作った話。

自粛中のGW工作？第二弾。

静的サイトジェネレーターをSSGって呼ぶのつい最近知った。知った翌日からSSGって呼ぶようにしてる。かっこいいので…

その日のコロナ感染者をスクレイピングして表示するだけの静的サイト作った。

技術スタック

# バックエンド

- Firebase Cloud Functions

- Firebase Firestore

- Puppeteer + TypeScript

# フロントエンド

- Next.js + TypeScript

- Material-UI

# ホスティング

- Vercel

やったこと

PuppeteerでYahoo様のニュースサイトから感染者の情報をスクレイピング。結果をFirestoreに保存。Cloud FunctionsのBatchで毎日0時に実行。本当はMicrosoftが作ってるPlaywrightでやりたかったんだけどCloud Functions上で動かなかったので断念。コードはほぼ同じもので動く。

 とても単純。

Next.jsで出力。getStaticPropsの処理ってビルド時に静的ファイルを生成してくれるんですよ！すごい！

export async function getStaticProps() {
 !firebase.apps.length
   ? firebase.initializeApp(firebaseConfig)
   : firebase.app()

 const db =  firebase.firestore()
 const hazardsDoc = await db
   .collection(collectionName.hazard)
   .get()
 const hazardData: ClientHazard[] = await hazardsDoc
   .docs.map(doc => {
     const hazardDoc = doc.data() as Hazard
     const { createdAt, updateAt } = hazardDoc
     return {
       ...hazardDoc,
       createdAt: createdAt.toDate().toDateString(),
       updateAt: updateAt.toDate().toDateString()
     }
   })

 return {
   props: {
     hazardData
   }
 }
}

参考にした記事様

Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita

大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita

Vercelにデプロイ。VercelはGitと連携することができ、しかも連携するとDeoloyHooksという、POSTすると任意のブランチで再ビルド→デプロイしてくれる機能が使えるようになる。

Deploy Hooks - Vercel Documentation

なのでスクレイピングのBatchの処理の最後でDeployHooksをPOSTする。すると…

毎日DBのデータが更新された後にビルドされてる！やったー！

サイトはこんな感じ

まとめ

静的サイトは早い。VercelとNext.js親和性高いしすごい。JAMstackって認識あってるかな…

あとnoteの見出し機能を使えるようになった。日々進化してる。