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

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で開発を進めていける。

参考


Related #next.js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

PWAアプリにクイックショートカットを追加する

manifest.jsonにshortcutsを追加

Next.js 10.0.1 + React 17.0の環境でTypeError: Object(...) is not a functionエラーが発生

一つ前のReact 16.13に下げてみたらエラーが解消された

Next.jsプロジェクトにTypescriptを導入する

チュートリアルが充実してる

Next.js + typescriptでpathsのエイリアスがModule not foundになる

next.config.jsに追記する必要があった