[Next] getStaticPropos의 유형에 대한 설치 방법, 유형 정의

Next.js를 공부하고 있어서 get Static Propos를 어떻게 정형하는지 몰라서 조사해 봤어요.
공식적으로도 정보가 있지만 동기는 파라미터에 대한 구체적인 정보를 쓰지 않았다는 것이다.
먼저 어떻게 사용하는지 열거한 다음에 어떻게 유형 정의를 찾았는지 총결해 보세요.

getStaticPropos의 유형 설치 방법

주석에 설치 절차가 쓰여 있다.

import { getItem, getItems } from 'src/lib/items'
import { GetStaticProps, GetStaticPaths } from 'next'
import { ParsedUrlQuery } from 'node:querystring'

export interface Item {
  userId: number
  id: number
  title: string
  body: string
}

interface Props {
  item: Item
}

// 1. Paramsの型を定義し、ParsedUrlQueryをextendsする
interface Params extends ParsedUrlQuery {
  id: string
}

// 3. VFCにもPropsを渡す
const Items: React.VFC<Props> = ({ item }) => {
  return <div>{ item }</div>
}

// 2. GetStaticPropsにPropsとParamsを渡す
export const getStaticProps: GetStaticProps<Props, Params> = async ({
  params,
}) => {
  const item = await getItem(params!.id)

  return {
    props: {
      item,
    },
  }
}

export const getStaticPaths: GetStaticPaths<Params> = async () => {
  const items = await getItems()
  const paths = items.map(({ id }) => ({
    params: {
      id: id.toString(),
    },
  }))

  return {
    paths,
    fallback: false,
  }
}

export default Items

GetStaticPropos의 정의

GetStaticPropos의 정의는 index입니다.d.ts를 통해 확인합니다.

export type GetStaticProps<
  P extends { [key: string]: any } = { [key: string]: any },
  Q extends ParsedUrlQuery = ParsedUrlQuery
> = (context: GetStaticPropsContext<Q>) => Promise<GetStaticPropsResult<P>>

는 상기GetStaticProps<P, Q>에서 사용할 수 있다.P는 대상형이고Q는ParsedUrlQuery를 계승한 유형이다.
또한 getStaticPropos는 반환값GetStaticPropsResult<P>(의 Promise)으로 사용됩니다.
GetStatic ProposResult의 매개변수에는 GetStatic Propos의 매개변수P가 있습니다.
매개 변수는 GetStaticPropsContext<Q>(context)입니다.
GetStatic ProposContext의 매개변수는 GetStatic Propos의 매개변수Q입니다.
그래서 이 두 가지 유형의 정의를 확인해 보겠습니다.
우선 되돌아오는 값을 보면

GetStaticProposResult<P>의 정의

export type GetStaticPropsResult<P> =
  | { props: P; revalidate?: number | boolean }
  | { redirect: Redirect; revalidate?: number | boolean }
  | { notFound: true }

에서 알 수 있듯이 getStaticPropos의 반환값은 props, redirect, notFound 중 임의의 대상을 포함한다.
확실히 getStaticPropos에서
proops가 포함된 대상

export const getStaticProps = () => {
  return {
    props: {
      item
    }
  }
}

을 되돌려줍니다.
또한 GetStaticPropos의 매개 변수P는 되돌아오는 값의 props 유형을 정의하는 데 사용됩니다.
즉, props의 유형을 지정하기 위해 GetStatic Propos에 매개변수P를 전달합니다.
다음은 파라미터를 봅시다.

GetStatic ProposContext<Q>의 정의

export type GetStaticPropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = {
  params?: Q
  preview?: boolean
  previewData?: any
  locale?: string
  locales?: string[]
  defaultLocale?: string
}

위에서 알 수 있듯이 get Static Propos의 매개 변수인 context에는 params, preview, previewData, locale, locales, defaultLocale 중 하나가 포함되어 있다.?이므로 포함하지 않아도 됩니다.옵션입니다.
확실히 getStaticPropos에서

export const getStaticProps = (context) => {
  const id = context.params.id 

  return {
    props: {
      item
    }
  }
}

export const getStatisPaths = () => {
  const paths = [
    { params: { id: 1 } },
    { params: { id: 2 } },
    ...
  ]

  return {
    paths,
    fallback: false,
  }
}

에서 보듯이 getStaticPaths에서 되돌아오는 paths의 대상을 매개 변수context에서 참조합니다.
GetStaticPropos의 매개 변수 Q 는 매개 변수 context의params 형식을 정의하는 데 사용됩니다.
즉, context.params의 유형을 지정하기 위해 GetStatic Propos에 매개변수Q를 전달합니다.

총결산

getStaticPropos의 유형 설치 방법, GetStaticProps<P, Q>의 유형 정의를 확인했습니다.

P -> getStaticPropsの返り値の型
Q -> getStaticPropsの引数contextの内部の型

의 정의.
P.S.getStaticPaths도 같은 요령으로 조사할 수 있다.
처음 게재된 예에 사용법이 적혀 있으니 참고하세요.