getStaticProps の 'props' にハマった時のメモ

getStaticProps で戻り値にしたプロパティを Home（ページ本体） コンポーネントで取得する際のやり方に苦戦したのでメモ。

getStaticProps の戻り値には props がついているけど、 propsからの指定ではなく、ページ本体で読み込む時はその配下にあるオブジェクトからの型指定で良さそう。

tsx: title=pages/index.tsx
1type PageProps = {
2  allPostSlugs: {
3    params: {
4      slug: string;
5    };
6  }[];
7};
8
9export const Home: NextPage<PageProps> = ({ allPostSlugs }: PageProps) => (
10  <div className={styles.container}>
11    // Do something
12    {allPostSlugs}
13  </div>
14);
15
16export const getStaticProps = async () => {
17  // get slugs from library or REST API
18  const allPostSlugs = getAllPostSlugs();
19
20  return {
21    props: {
22      allPostSlugs,
23    },
24  };
25};
26
27export default Home;
28
29

誤り

これだとダメ

ts
1type PageProps = {
2  props: {
3    allPostSlugs: {
4      params: {
5        slug: string;
6      };
7    }[];
8  }
9};
10

/以上