Next.jsをTypescriptではじめる覚書

Next.jsをTypescriptで書き始めるときに毎回探してるのでメモ程度に

公式はこちら

nextjs.org

tsconfigをつくる

touch tsconfig.json

中身はこんな感じに。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

必要なライブラリをインストール

yarnかnpmで

# If you’re using npm
npm install --save-dev typescript @types/react @types/node

# If you’re using Yarn
yarn add --dev typescript @types/react @types/node

_app.js

app.jsをapp.tsxに変換し、以下のように書き換える

import { AppProps } from 'next/app'

function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default App

その他の型は冒頭で書いている公式を読み進めた最後のページで書いてるので、そのページを参考にするといいです

nextjs.org