Next.js + TypeScriptでgetStaticPropsの型を定義する方法

Next+TypeScript.png

Next.js + TypeScript においてgetStaticPropsの型を定義する方法はいくつか存在します。

getStaticPropsの型を定義したいモチベーションとしてはNextPageのPropsとして受け取る値とgetStaticPropsが返すpropsの値を揃えたいという観点が一番でしょう。

import type { NextPage } from 'next'
  
type Props = {
  aaa:string
  bbb:string
}
  
const Home:NextPage<Props> = (props) => {
  const {aaa,bbb} = props
  return (
    <div>page</div>
  )
}
  
export const getStaticProps = async () => {
  return {
    props:{
      aaa:"aa",
      bbb:"bb",
    }
  }
}
  
export default Home

このままでは以下のようにPropsとしてbbbが欠落している状態を検出できません。

export const getStaticProps = async () => {
  return {
    props:{
      aaa:"aa",
    }
  }
}

必要な値の不足に関してはNext.jsが提供するGetStaticProps型にGenericsとしてPropsを渡して上げると型エラーの検出が可能になります。

import type { NextPage , GetStaticProps } from 'next'
  
type Props = {
  aaa:string
  bbb:string
}
  
const Home:NextPage<Props> = (props) => {
  const {aaa,bbb} = props
  return (
    <div>page</div>
  )
}
  
export const getStaticProps: GetStaticProps<Props> = async () => {
  return {
    props:{
      aaa:"aa",
    }
  }
}
  
export default Home

ただ、GetStaticProps<Props>では以下のように余剰にあるPropsの検出はできません。

export const getStaticProps = async () => {
  return {
    props:{
      aaa:"aa",
      bbb:"bb",
      ccc:"cc",
    }
  }
}

Propsの値を正確に精査したい場合には、返り値としてPromise<GetStaticPropsResult<Props>>を指定します。

import type { NextPage , GetStaticPropsResult } from 'next'
  
type Props = {
  aaa:string
  bbb:string
}
  
const Home:NextPage<Props> = (props) => {
  const {aaa,bbb} = props
  return (
    <div>page</div>
  )
}  
  
export const getStaticProps = async ():Promise<GetStaticPropsResult<Props>> => {
  return {
    props:{
      aaa:"aa",
      bbb:"bb",
      ccc:"cc",// エラー
    }
  }
}

ミニマムとしてはGetStaticPropsResultの定義のみで当初の目的は達成可能です。

また、Next.jsでは逆のアプローチでgetStaticPropsが返した値の型情報をPageのPropsとして利用する、InferGetStaticPropsTypeも用意されているので状況によって使い分けると良いでしょう。

スポンサードリンク

«株式会社トゥーアールの2021年を振り返る | メイン | Cloudflare PagesにSvelteKitをデプロイする際のNodeバージョン»