getStaticProps の 'props' にハマった時のメモ
getStaticProps
で戻り値にしたプロパティを Home
(ページ本体) コンポーネントで取得する際のやり方に苦戦したのでメモ。
getStaticProps
の戻り値には props
がついているけど、 props
からの指定ではなく、ページ本体で読み込む時はその配下にあるオブジェクトからの型指定で良さそう。
pages/index.tsx
type PageProps = {
allPostSlugs: {
params: {
slug: string;
};
}[];
};
export const Home: NextPage<PageProps> = ({ allPostSlugs }: PageProps) => (
<div className={styles.container}>
// Do something
{allPostSlugs}
</div>
);
export const getStaticProps = async () => {
// get slugs from library or REST API
const allPostSlugs = getAllPostSlugs();
return {
props: {
allPostSlugs,
},
};
};
export default Home;
誤り
これだとダメ
type PageProps = {
props: {
allPostSlugs: {
params: {
slug: string;
};
}[];
}
};
/以上