🏰

【簡単】Next.jsによるSSGの実装

2021/07/11に公開

Next.jsではAPIを叩くときにgetStaticPropsを使うことで、ビルド時にデータを取得して事前にHTMLファイルのレンダリングを行うことができます。ビルド時にデータを取得して事前にHTMLファイルのレンダリングを行うことをSSGと呼びます。
TypeScriptを使う場合はgetStaticPropsの型にGetStaticProps^[1]を指定します。

SSG(StaticSiteGeneration)とは

Static Generationと呼ばれることもあります。
ビルド時にデータを取得することでpre-renderされるため高速にデータを読むことができます。
リアルタイム性が要求される場面では、SSRを使ってリクエストがあるたびにデータを読み込むなど工夫が必要です。

WebDBVol123で学んだことでもSSR,SSG,CSRについて書いたのでよろしければお読みください。

使い方

import { GetStaticProps } from 'next'

export const getStaticProps: GetStaticProps = async() => {
// export async function getStaticProps() でも同じ
  const res = await fetch(`https://.../data`)
  const posts = await res.json()

  if (!posts) {
    return {
      notFound: true,
    }
  }

  return {
    props: { posts }, // will be passed to the page component as props
  }
}

getStaticPropsでreturnされたpropsを関数側の引数に渡すことができます。

import { GetStaticProps } from 'next'

// posts will be populated at build time by getStaticProps()
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export const getStaticProps: GetStaticProps = async() => {
    // 最初の例と同じなので省略

    return {
        props: { posts }, // will be passed to the page component as props
    }
}

getStaticPropsの注意点

オブジェクトを返すようにします。
notFoundを指定すると404を返すことを許可するか設定できます。
その他、リダイレクトの設定などできます。
"pages/*"からしかexportできません。
コンポーネントとして定義してはいけません。
開発環境(yarn devを行なったとき)ではリクエストがあるたびにgetStaticPropsが呼ばれます。

動作環境

ver 9.3.0以降
(notFoundOptionはver10.0.0以降)

参考

脚注

TypeScriptのときはGetStaticPropsをimportする必要がある ↩︎

GitHubで編集を提案

使い方

getStaticPropsの注意点

動作環境

参考

Discussion