yarn create next-app直後にTypescriptを導入する

Start a Next.js project with TypeScript, Eslint and Prettierを参考にTypescriptを導入。

create next-app後に生成される以下のjsファイルをts(tsx)に変更する。

• pages/_app.tsx

import React from 'react'
import { AppProps } from 'next/app'
import '../styles/globals.css'

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return <Component {...pageProps} />
}

export default MyApp

• pages/index.tsx

import React from 'react'
import Head from 'next/head'
import styles from '../styles/Home.module.css'

const Home: React.FunctionComponent = () => {
  return (
    <div className={styles.container}>
  )
}
export default Home

• pages/api/hello.ts

import { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

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

これで自動でLintを効かせつつTypescriptで開発を進めていける。

参考

• Basic Features: TypeScript | Next.js