Next.jsをTypescriptで書き始めるときに毎回探してるのでメモ程度に
公式はこちら
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
その他の型は冒頭で書いている公式を読み進めた最後のページで書いてるので、そのページを参考にするといいです