🕌
【Next.js】TypescriptのgetStaticPropsとgetStaticPaths型定義を理解する
はじめに
Next.jsで動的ページを作成する時などにgetStaticPropsやgetStaticPathsを扱うのですが、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を追加していきます。
動的ページ用のパスを作成し、getStaticPropsにparamsを渡します。
[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にすることで実装できます。
まとめ
今回はgetStaticPropsとgetStaticPathsの型定義についてまとめました。
型定義についてなかなか情報も少なかったことから Typescript で書くことが難しいと感じていましたが Next.js では必須の機能であるので Typescript での書き方を理解するべきかと思っています。
Next.js をこれから学習しようという方も多いともいますのでこの情報が少しでも参考になれば嬉しいです。
参考資料
Discussion