package.json の設定
package.jsonは、Node.js プロジェクトの設定ファイルです。プロジェクトの名前やバージョン、依存関係、スクリプトなどの情報が記載されています。後々、色々インストールするわけですが、その情報がジャンジャン書き込まれていくわけです。
では、package.jsonの設定を Next.js と TypeScript を使ったプロジェクトに適用させてみましょう。
package.json とは
package.jsonは、Node.js プロジェクトの設定ファイルで、プロジェクト全体の情報や依存関係、スクリプトなどが記載されています。
Next.js と TypeScript の設定
Next.js と TypeScript を組み合わせたプロジェクトのpackage.jsonでは、以下の項目を設定する必要があります。
- プロジェクト名とバージョン
- 依存関係（dependencies）
- 開発用の依存関係（devDependencies）
- スクリプト（scripts）
それぞれの項目について詳しく解説していきます。
1. プロジェクト名とバージョン
プロジェクト名は、nameフィールドで指定します。一意であり、小文字・英数字・ハイフン・アンダースコアのみを使用できます。また、バージョンはversionフィールドで指定します。通常、セマンティック・バージョニングに従って記載します。
例:
{
"name": "my-nextjs-typescript-project",
"version": "1.0.0"
}
2. 依存関係（dependencies）
プロジェクトで必要なパッケージは、dependenciesフィールドに記載します。ここでは、Next.js と React をインストールします。
例:
{
"dependencies": {
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
3. 開発用の依存関係（devDependencies）
開発時に必要なパッケージは、devDependenciesフィールドに記載します。TypeScript と型定義ファイル、および ESLint と Prettier（コード整形ツール）をインストールします。
例:
{
"devDependencies": {
"typescript": "^4.4.2",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.27.0",
"@typescript-eslint/parser": "^4.31.1",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"prettier": "^2.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9",
"@types/node": "^16.11.11"
}
}
4. スクリプト（scripts）
scriptsフィールドには、プロジェクトで使用するコマンドを記載します。通常、開発サーバーの起動、ビルド、テスト、Lint や整形などのタスクが含まれます。
例:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --ext .js,.jsx,.ts,.tsx --fix .",
"format": "prettier --write ."
}
}
これらの設定を全て組み合わせると、以下のようなpackage.jsonファイルが完成します。
{
"name": "my-nextjs-typescript-project",
"version": "1.0.0",
"dependencies": {
"next": "latest",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"typescript": "^4.4.2",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.27.0",
"@typescript-eslint/parser": "^4.31.1",
"@typescript-eslint/eslint-plugin": "^4.31.1",
"prettier": "^2.4.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"@types/react": "^17.0.21",
"@types/react-dom": "^17.0.9",
"@types/node": "^16.11.11"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint --ext .js,.jsx,.ts,.tsx --fix .",
"format": "prettier --write ."
}
}