Next.jsでtypescriptを導入したい

空のtsconfig.jsonをプロジェクトのルートに用意し、npm run devを実行するとNext.jsが検知してくれる

# You'll see instructions like these:
#
# Please install typescript, @types/react, and @types/node by running:
#
#         yarn add --dev typescript @types/react @types/node
#
# ...

ここに書かれている通りのモジュールたちをインストールしたら利用が可能になる

Next.jsが用意しているよく使われる型

import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

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

import { NextApiRequest, NextApiResponse } from 'next'

export default (req: NextApiRequest, res: NextApiResponse<Data>) => {
  res.status(200).json({ name: 'John Doe' })
}

他参考

https://tech.playground.style/javascript/next-js-typescript/