setting-up-nextjs-project

camoneart's avatarfrom camoneart

Configure Next.js projects with ESLint, Prettier, and recommended settings. Use when initializing Next.js projects, setting up linting, or when user mentions Next.js setup/Next.jsセットアップ.

⭐2stars🔀0forks📁View on GitHub🕐Updated Nov 4, 2025
[Developer Tools]

When & Why to Use This Skill

This Claude skill automates the professional configuration of Next.js projects by integrating essential development tools like ESLint and Prettier. It streamlines the environment setup for both new and existing projects, ensuring consistent code quality, standardized formatting, and optimized Tailwind CSS class ordering through automated configuration files and VS Code settings.

Use Cases

  • Initializing a new Next.js project with industry-standard linting and formatting configurations to ensure a clean codebase from day one.
  • Adding Prettier and ESLint to an existing Next.js repository to resolve code style inconsistencies and prevent formatting conflicts.
  • Automating the creation of .prettierrc, .eslintrc, and VS Code workspace settings to eliminate manual setup time and human error.
  • Integrating Tailwind CSS class sorting plugins to maintain readable and organized utility classes in React components.
  • Setting up automated 'Format on Save' and CI-ready linting scripts to improve developer productivity and code review efficiency.
nameSetting up Next.js Project
descriptionConfigure Next.js projects with ESLint, Prettier, and recommended settings. Use when initializing Next.js projects, setting up linting, or when user mentions Next.js setup/Next.jsセットアップ.
allowed-toolsBash, Write, Read, Edit

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 が作成されているか
  • .eslintrc.json に prettier が追加されているか
  • package.json に format スクリプトが追加されているか
  • pnpm run format が正常に動作するか
  • .vscode/settings.json の作成を検討したか

トラブルシューティング

フォーマットが効かない

  1. Prettier拡張がインストールされているか確認
  2. .prettierrc.json の構文エラーを確認
  3. ESLintとの競合を確認（eslint-config-prettier が必要）

Tailwind CSSのクラス順序が整わない

  1. prettier-plugin-tailwindcss がインストールされているか確認
  2. .prettierrc.json にプラグイン設定を追加

参考リンク