🕌
【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