Setting up Next.js Project
Next.jsプロジェクトのセットアップ時に必要な設定を自動化するスキル。
いつ使うか
- Next.jsプロジェクトを新規作成する時
- 既存Next.jsプロジェクトにESLint/Prettierを追加する時
- コードフォーマット設定が必要な時
- ユーザーが「Next.jsセットアップ」について言及した時
セットアップ手順
1. ESLint + Prettier の必須インストール
Next.jsはESLintを自動インストールするが、Prettierも必ず追加：
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
パッケージの役割:
prettier: コードフォーマッターeslint-config-prettier: ESLintとPrettierの競合を防ぐprettier-plugin-tailwindcss: Tailwind CSSのクラス順序を整理（Tailwind使用時）
2. 設定ファイルの作成
.prettierrc.json
プロジェクトルートに作成：
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always"
}
.eslintrc.json の更新
既存の設定に eslint-config-prettier を追加：
{
"extends": ["next/core-web-vitals", "prettier"]
}
3. package.json スクリプトの追加
{
"scripts": {
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
使い方:
pnpm run format: 全ファイルをフォーマットpnpm run format:check: フォーマットチェック（CI用）
4. VS Code 設定の推奨
.vscode/settings.json を作成（任意）：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
完全なセットアップフロー
新規プロジェクト
# 1. Next.jsプロジェクト作成
pnpm dlx create-next-app@latest my-app
# 2. ディレクトリ移動
cd my-app
# 3. Prettier追加
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
# 4. 設定ファイル作成
# （このスキルが自動で作成）
# 5. フォーマット実行
pnpm run format
既存プロジェクト
# 1. Prettier追加
pnpm add -D prettier eslint-config-prettier prettier-plugin-tailwindcss
# 2. 設定ファイル追加
# （このスキルが自動で作成）
# 3. ESLint設定更新
# （このスキルが自動で更新）
# 4. フォーマット実行
pnpm run format
設定ファイルテンプレート
詳細なテンプレートは templates/ を参照。
チェックリスト
セットアップ完了前に確認：
トラブルシューティング
フォーマットが効かない
- Prettier拡張がインストールされているか確認
.prettierrc.json の構文エラーを確認- ESLintとの競合を確認（
eslint-config-prettier が必要）
Tailwind CSSのクラス順序が整わない
prettier-plugin-tailwindcss がインストールされているか確認.prettierrc.json にプラグイン設定を追加
参考リンク
