App Routerを使うNext.jsプロジェクトのセットアップ手順をまとめた記事です。アプリの種類に依らず共通して役立つ項目を中心に記しています。
Tailwind CSSを使った構成で説明しています。Tailwindを使わない場合は適宜読み替えてください。
この記事は次の環境で作業した内容を元にしています:
次のコマンドで新しい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
public-hoist-pattern[]=*eslint*
public-hoist-pattern[]=*prettier*
pnpm v10系では、この .npmrc
がないとVS Code の ESLint 拡張が正しく動かないケースがあります。
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 が追加されます。続けて設定ファイルを作成・編集します。
下記のようにスクリプトを追加すると、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-prettier
をESLint設定に追加して優先させます。
const eslintConfig = [
// ...
...compat.extends("next/core-web-vitals", "next/typescript", "prettier"),
// ...
];
次のような Prettier 設定を用意します。
trailingComma: 'es5'
tabWidth: 2
semi: true
singleQuote: true
jsxSingleQuote: false
arrowParens: 'always'
printWidth: 100
Prettierの適用を除外するために .prettierignore
を用意します。
.vercel .next pnpm-lock.yaml
VS Code では次の設定を追加すると保存時に自動フォーマット・自動修正が動きます(拡張機能が必要)。
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"editor.tabSize": 2
}
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',
},
},
},
// ...
]
eslint-plugin-better-tailwindcss
プラグインを使うと、次のような恩恵があります:
例として eslint-plugin-better-tailwindcss
をインストールし、eslint.config.mjs
に設定を追加する例です:
pnpm add -D -E eslint-plugin-better-tailwindcss
import 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',
},
},
},
// ...
]
コマンドラインから拡張機能をインストールする場合は次のようにします:
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension bradlc.vscode-tailwindcss