contextには以下の要素が含まれています。

params
- getStaticPathを使った時に参照できるパスパラメータの情報
preview
- プレビューモードを使っているかどうか
previewData
- プレビューモードのデータ
locale（可能な場合）
- 有効なロケール（地域とか言語とかの情報）情報
locales（可能な場合）
- サポートしているロケール情報
defaultLocale（可能な場合）
- デフォルトのロケール情報

GetStaticPropsの型引数に最終的にページに渡したいpropsの型を渡しておくと、returnの型チェックができます。

import type { GetStaticProps } from 'next'

type SSGResponse = {
  response: blogResponse
  // test: stringを追加すると下の関数をビルドした時に型エラーが発生する
  // returnするpropsはresponseの他にtestが必要になるため
}

export const getStaticProps: GetStaticProps<SSGResponse> = async (context) => {
  const response: blogResponse = await fetcher(`${baseUrl}/api/v1/blogs`)
  return {
    props: {
      response
    }
  }
}

SSGで取得したデータをレンダリングしたいページにpropsで引き渡すことができます。

import type { GetStaticProps } from 'next'

type SSGResponse = {
  response: blogResponse
  // test: stringを追加すると下の関数をビルドした時に型エラーが発生する
  // returnするpropsはresponseの他にtestが必要になるため
}

export const getStaticProps: GetStaticProps<SSGResponse> = async (context) => {
  const response: blogResponse = await fetcher(`${baseUrl}/api/v1/blogs`)
  return {
    props: {
      response
    }
  }
}
const Home: NextPage<SSGResponse> = (props) => {
  const { response } = props;
  return (
    <>
      <Top articles={response} />
    </>
  )
}


export default Home

これでSSGに実装は完了です。

一部コンポーネントと型のインポートは省略しています。

さいごに

今回は、SSGの概要と実装方法について解説しました。

次回はSSGでの動的なページ生成について解説します。

Next.jsのSSGとは？概要を理解して設定する

目次