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

2022/02/14

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;
      };
    }[];
  }
};

/以上