基礎から始めるNext.js【２手動TypeScript化】

基礎から始めるNext.js【２手動TypeScript化】

YouTube: https://youtu.be/mhxvZWZDQHE

https://youtu.be/mhxvZWZDQHE

今回はjsのテンプレートを手動でTypeScriptに変更する部分を解説します。

Next.js: https://nextjs.org/docs/basic-features/typescript

こちらのやり方は空の「tsconfig.json」を作成して、
npm run dev でアプリを起動すると自動で
「@types/node」「@types/react」
こちらのライブラリのインストールが始まります。

_app.tsxのComponentに赤波線が出るのですが、
こちらは一度VSコードを閉じて再起動すると
赤波線は消えるかと思います。

package.json

{
  "name": "nextjs-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "13.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.11.7",
    "@types/react": "18.0.24",
    "eslint": "8.26.0",
    "eslint-config-next": "13.0.0"
  }
}

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"]
}

_app.tsx

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

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

export default MyApp