この記事の概要
App Routerを使うNext.jsプロジェクトのセットアップ手順をまとめた記事です。アプリの種類に依らず共通して役立つ項目を中心に記しています。
- ESLintの設定
- Prettierの設定
Tailwind CSSを使った構成で説明しています。Tailwindを使わない場合は適宜読み替えてください。
この記事は次の環境で作業した内容を元にしています:
- macOS 15.2
- Node 20.15.1
- pnpm 10.18.1
- Next.js 15.5.4
- Tailwind CSS 4.1.14
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作成後、プロジェクトに移動して依存をインストールします:
cd my-app
pnpm install.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": "next lint --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設定に追加して優先させます。
const eslintConfig = [
// ...
...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
// ...
];.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 eslintPluginBetterTailwindcss from 'eslint-plugin-better-tailwindcss'
import eslintPluginImport from 'eslint-plugin-import'
import eslintPluginUnusedImports from 'eslint-plugin-unused-imports'
// ...
const eslintConfig = [
// ...
{
plugins: {
'better-tailwindcss': eslintPluginBetterTailwindcss,
import: eslintPluginImport,
'unused-imports': eslintPluginUnusedImports,
},
rules: {
...eslintPluginBetterTailwindcss.configs['recommended-error'].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
