【NextJS】SSGしたページの「最後にSSGをした日時」を取得する

はじめに

こちらの記事では、SSGやISRでホスティングしているNext.jsアプリケーションで「最後にSSGをした日時」を取得するテクニックを紹介します。用途としてはブログサイトなどでたまーに見る、「このページは○日前に更新されました」などの文言を表示をしたい場合などに、今回のテクニックが使えるでしょう。

1. getStaticPropsでSSG実行時の日時を取得

getStaticProps関数内で日時を取得、そして取得した日時をReactコンポーネントへ渡します。
getStaticPropsはSSG実行時に走るので、その時点の日時を取得できるわけですね。

...

export const getStaticProps: GetStaticProps = async () => {

  const buildTimestamp = new Date().toISOString()

  return {
    props: {
      buildTimestamp,
    }
  }
}

...

2. Reactコンポーネントでpropsからビルド日時を取得

propsとして渡ってきたbuildTimestampを取得します。

const Component: NextPage<{ buildTimestamp: string }> = ({ buildTimestamp }) => {

console.log("最終更新日時 ->", buildTimestamp)

return (
... 

// 出力
// SSGした日時が取得できている!!
最終更新日時 -> 2023-04-22T12:07:27.923Z

以上です!