この記事の概要
App Routerを使うNext.jsプロジェクトのセットアップ手順をまとめた記事です。アプリの種類に依らず共通して役立つ項目を中心に記しています。
- ESLintの設定
- Prettierの設定
Tailwind CSSを使った構成で説明しています。Tailwindを使わない場合は適宜読み替えてください。
この記事は次の環境で作業した内容を元にしています:
- macOS 15.2
- Node 20.15.1
- pnpm 10.19.1
- Next.js 16.0.0
- Tailwind CSS 4.1.16
Next.jsアプリケーションの作成
次のコマンドで新しいNext.jsアプリを作成します。my-app は任意の名前に置き換えてください。
npx create-next-app@latest my-app --ts --tailwind --eslint --app --turbopack --src-dir --import-alias '@/*' --use-pnpm --skip-install --react-compiler作成後、プロジェクトに移動して依存をインストールします:
cd my-app
pnpm installcreate-next-app のオプション
| オプション | 説明 |
|---|---|
--ts | TypeScript プロジェクトを生成します（tsconfig.json などを追加）。 |
--tailwind | Tailwind CSS の初期設定を追加します。 |
--eslint | ESLint の初期設定を追加します。 |
--app | App Router（app/ ディレクトリ）構成でテンプレートを作成します。 |
--turbopack | Turbopack をバンドラーとして有効化します（利用可能な場合）。 |
--src-dir | ソースを src/ 配下に配置する構成にします。 |
--import-alias '@/*' | @/* を src/* にマップする import エイリアスを設定します。 |
--use-pnpm | pnpm をパッケージマネージャに選択してプロジェクトを生成します。 |
--skip-install | 依存の自動インストールをスキップしテンプレートのみ生成します。 |
--react-compiler | React Compilerを有効にします。 |
詳しくは公式のドキュメントを参照してください。
.npmrc を設置
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*pnpm v10系では、この .npmrc がないとVS Code の ESLint 拡張が正しく動かないケースがあります。
npm 周辺ツールの設定
npm-check-updates や sort-package-json をローカルにインストールせずに使う方法です。package.json に次のスクリプトを追加すると便利です:
"scripts": {
"format:package": "pnpm dlx sort-package-json",
"ncu": "pnpm dlx npm-check-updates"
}これで次のコマンドが使えます:
pnpm ncu—package.jsonの依存を最新に更新（書き換え）pnpm format:package—package.jsonの項目を整列
コードフォーマットのための設定
pnpm format でプロジェクトのファイルをフォーマットできるように、Prettier を開発依存として追加します。
pnpm add -D -E prettier eslint-config-prettierこれで Prettier と eslint-config-prettier が追加されます。続けて設定ファイルを作成・編集します。
package.jsonを修正
下記のようにスクリプトを追加すると、pnpm format で整形と ESLint の自動修正が実行できます。
"scripts": {
"lint:fix": "eslint --fix",
"prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .",
"format": "pnpm prettier && pnpm lint:fix"
}eslint.config.mjs を修正
eslint-config-prettier をESLint設定に追加します。
// ...
import eslintConfigPrettier from "eslint-config-prettier";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
eslintConfigPrettier,
// ...
]);.prettierrc.yamlを作成
次のような Prettier 設定を用意します。
trailingComma: 'es5'
tabWidth: 2
semi: true
singleQuote: true
jsxSingleQuote: false
arrowParens: 'always'
printWidth: 100.prettierignoreを作成
Prettierの適用を除外するために .prettierignore を用意します。
.vercel .next pnpm-lock.yaml
.vscode/settings.jsonの修正
VS Code では次の設定を追加すると保存時に自動フォーマット・自動修正が動きます（拡張機能が必要）。
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.tabSize": 2
}Typescriptのimportを綺麗にするための設定
pnpm add -D -E eslint-plugin-import eslint-plugin-unused-importsこれらのプラグインを導入すると、importの並び替えや未使用importの検出が可能になります。eslint.config.mjs に次のように追加してください:
import eslintPluginImport from 'eslint-plugin-import'
import eslintPluginUnusedImports from 'eslint-plugin-unused-imports'
// ...
const eslintConfig = [
// ...
{
plugins: {
import: eslintPluginImport,
'unused-imports': eslintPluginUnusedImports,
},
rules: {
'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
'unused-imports/no-unused-imports': 'error',
'import/order': [
'error',
{
groups: [
'builtin',
'external',
'internal',
['parent', 'sibling'],
'object',
'type',
'index',
],
'newlines-between': 'always',
alphabetize: { order: 'asc', caseInsensitive: true },
},
],
},
settings: {
'better-tailwindcss': {
entryPoint: 'src/styles/globals.css',
},
},
},
// ...
]Tailwind CSSのためのESLintの設定
eslint-plugin-better-tailwindcss プラグインを使うと、次のような恩恵があります:
- Tailwindクラスの順序を自動で整える
- 存在しないクラス名や誤ったクラス名を検出
- 重複や競合するクラスを検出
eslint-plugin-better-tailwindcss をインストール
例として eslint-plugin-better-tailwindcss をインストールし、eslint.config.mjs に設定を追加する例です:
pnpm add -D -E eslint-plugin-better-tailwindcssimport eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss'
// ...
const eslintConfig = [
// ...
{
plugins: {
'better-tailwindcss': eslintPluginBetterTailwindcss,
},
rules: {
...eslintPluginBetterTailwindcss.configs['recommended-error'].rules,
'better-tailwindcss/no-unregistered-classes': ['error', { detectComponentClasses: true }],
},
settings: {
'better-tailwindcss': {
entryPoint: 'src/app/globals.css',
},
},
},
// ...
]VS Codeの拡張をインストール
- ESLint
ESLintのエラーを表示できるようになります。 - Prettier - Code formatter
Prettierによるコードフォーマットができるようになります。 - Tailwind CSS IntelliSense
Tailwind CSSのクラス名の自動補完などができるようになります。
コマンドラインから拡張機能をインストールする場合は次のようにします:
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss
