Next.jsのgetStaticPropsでnotFoundを返却するときは単体でreturnしない

nextjs

SSGやISRをNext.jsで行う際に使用するgetStaticProps。

ここでnotFoundをtrueにしてreturnすることで意図的に404にすることができます。

例えばAPIで取得したデータが見つからない時にでSSGでも404にできて便利ですが、TypeScriptを合わせて使用している場合に注意が必要。

notFoundを単体で返却する弊害

if (!data) { // dataはAPIで取得したデータ
return {
notFound: true
}
}

getStaticProps内でこのようなコードを書くと404にすることができるのですが、TypeScriptを使用している場合はnotFoundを単体でreturnするとNextPageにわたすPropsがneverになってしまいます。

type Props = InferGetStaticPropsType<typeof getStaticProps>

このコードはgetStaticPropsのpropsで返却した型を定義しているものです。

Propsがneverになってしまうとページコンポーネントでpropsを使用するとエラーが発生してしまう。

解決方法

そのためnotFoundは単体で返すのではなく下記のようにpropsと合わせreturnすることでPropsの型を正しく取得できるようになる。

{
notFound: !data,
props: {
// ページに渡すデータ
}
}