🕌

【Next.js】TypescriptのgetStaticPropsとgetStaticPaths型定義を理解する

2022/09/22に公開

はじめに

Next.jsで動的ページを作成する時などにgetStaticPropsgetStaticPathsを扱うのですが、Typescriptではどうやって型定義するのか理解できていないかったのでまとめていきます。

getStaticProps

ここではgetStaticPropsで[id]から取得したデータを作成し表示する、という動的ページを作成していきます。

[id].tsx
import {
  GetStaticProps,
  GetStaticPropsContext,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import getUser from "services";
import { User } from "types";

type TestPageProps = InferGetStaticPropsType<typeof getStaticProps>;

const TestPage: NextPage<TestPageProps> = (props: TestPageProps) => {
  const { id, name, email } = props;

  return (
    <>
      <div>ID{id}</div>
      <div>ユーザー名:{name}</div>
      <div>メールアドレス:{email}</div>
    </>
  );
};

export const getStaticProps: GetStaticProps = async ({
  params,
}: GetStaticPropsContext) => {
  const user: User = getUser(params!.id);

  return {
    props: {
      id: user.id,
      name: user.username,
      email: user.email,
    },
  };
};

export default TestPage;

getStaticPropsで返却した型GetStaticPropsを Page コンポーネントで受け取るためにInferGetStaticPropsTypeを利用しています。

type TestPageProps = InferGetStaticPropsType<typeof getStaticProps>;

これによってgetStaticPropsの返却型によって動的に型定義してくれるので事前に型定義を用意する必要がないので便利です。

getStaticPaths

先程の Page にgetStaticPathsを追加していきます。
動的ページ用のパスを作成し、getStaticPropsparamsを渡します。

[id].tsx
import {
  GetStaticPaths,
  GetStaticProps,
  GetStaticPropsContext,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import getUser from "services";
import getAllUsers from "services";
import { User } from "types";

type TestPageProps = InferGetStaticPropsType<typeof getStaticProps>;

const TestPage: NextPage<TestPageProps> = (props: TestPageProps) => {
  const { id, name, email } = props;

  return (
    <>
      <div>ID{id}</div>
      <div>ユーザー名:{name}</div>
      <div>メールアドレス:{email}</div>
    </>
  );
};

export const getStaticProps: GetStaticProps = async ({
  params,
}: GetStaticPropsContext) => {
  const user: User = getUser(params!.id);

  return {
    props: {
      id: user.id,
      name: user.username,
      email: user.email,
    },
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const users: User[] = await getAllUsers();
  const paths = users.map((user) => `/users/${user.id}`);

  return {
    paths,
    fallback: false,
  };
};

export default TestPage;

動的ページなので getStaticPaths でパス配列を取得して返却する型をGetStaticPathsにすることで実装できます。

まとめ

今回はgetStaticPropsgetStaticPathsの型定義についてまとめました。
型定義についてなかなか情報も少なかったことから Typescript で書くことが難しいと感じていましたが Next.js では必須の機能であるので Typescript での書き方を理解するべきかと思っています。

Next.js をこれから学習しようという方も多いともいますのでこの情報が少しでも参考になれば嬉しいです。

参考資料

https://www.gaji.jp/blog/2021/11/08/8476/
https://zenn.dev/eitches/articles/2021-0424-getstaticprops-type

GitHubで編集を提案

Discussion