InferGetStaticPropsTypeを使ってnextjsをよりラクラクに

環境

• nextjs 12.3

InferGetStaticPropsTypeってなに

getStaticPropsの返却値をもとにNextPageに渡されるPropsの型を推論してくれる機能

よくあるgetStaticPropsの例

例えばこんな感じにあったとして

import type { NextPage } from 'next';
import { GetStaticProps } from 'next';

type Repository = {
  id: number
  name: string
  full_name: string,
  description: string
  stargazers_count: number
} & Record<string, unknown>

type Props = { repos: Repository[] };

const Home: NextPage<Props> = ({repos}) => {
  return (
    <>
      { repos.map((repo) => {
        return (
          <p key={repo.id}>{repo.name} / {repo.description}</p>
        );
      })}
    </>
  );
};

export const getStaticProps: GetStaticProps<Props> = async (context) => {
  const res = await fetch('https://api.github.com/users/rails/repos');
  const repos: Repository[] = await res.json();
  return {
    props: {
      repos
    },
  };
};

export default Home;

ただ橋渡し用のPropsである、

type Props = { repos: Repository[] };

ってのが冗長だなと

そこでInferGetStaticPropsTypeを使ってみる　変更点は以下のみ

-type Props = { repos: Repository[] };
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
 
-export const getStaticProps: GetStaticProps<Props> = async (context) => {
+export const getStaticProps = async (context: GetStaticPropsContext) => {

そうすると getStaticProps()は async (context: GetStaticPropsContext) だけのコードになるので 返却するProps変えるごとに橋渡し用のPropsも修正する必要がなくなった。便利

GetStaticPropsContextに置き換えたバージョンの全コード

import type { InferGetStaticPropsType, NextPage, GetStaticPropsContext } from 'next';

type Repository = {
  id: number
  name: string
  full_name: string,
  description: string
  stargazers_count: number
} & Record<string, unknown>

type Props = InferGetStaticPropsType<typeof getStaticProps>;

const Home: NextPage<Props> = ({repos}) => {
  return (
    <>
      { repos.map((repo) => {
        return (
          <p key={repo.id}>{repo.name} / {repo.description}</p>
        );
      })}
    </>
  );
};

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const res = await fetch('https://api.github.com/users/rails/repos');
  const repos: Repository[] = await res.json();
  return {
    props: {
      repos
    },
  };
};

export default Home;

公式ドキュメントよこせ

Data Fetching: getStaticProps | Next.js

サーバーサイド版はないの？

あったわ

InferGetServerSidePropsType

公式のサンプルコードをよこせ

next.js/github.d.ts at canary · vercel/next.js

参考リンク

• Next.js の InferGetStaticPropsType が便利