📝
基礎から始めるNext.js【2手動TypeScript化】
基礎から始めるNext.js【2手動TypeScript化】
YouTube: 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
Discussion