Next.js getServerSideProps 타입스크립트 적용

getServerSideProps 함수를 타입스크립트에서 사용하라면 어떻게 해야 하는지 공식문서에 나와있다.
https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

getServerSideProps함수의 타입을 지정하려면

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

GetServerSideProps 타입을 import 해오며 그 다음 우리가 사용할 데이터의 type을 사용하려면

import { InferGetServerSidePropsType } from 'next'

type Data = { ... }

export const getServerSideProps = async () => {
  const res = await fetch('https://.../data')
  const data: Data = await res.json()

  return {
    props: {
      data,
    },
  }
}

function Page({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  // will resolve posts to type Data
}

export default Page

InferGetServerSidePropsType 타입을 import 해오며 제네릭을 통해 타입을 지정해주면 된다.
다행이 공식문서에도 타입스크립트 타입 지정 방법이 나와있다.