Next.js + TypeScriptでgetStaticPropsの型を定義する方法
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バージョン»