この記事の概要
App Routerを使用するNext.jsのインストールとその後の開発環境構築の手順を記録した記事です。作成するアプリケーションに関わらず共通して必要となるような内容を中心に書かれています。
- ESLintによるルールの設定
- Prettierによるコードフォーマットのための設定
また、CSSフレームワークにTailwind CSSを使用した内容になっています。使用しない場合、適宜読み替えが必要になります。
以下の環境での作業を元に作成した記事です:
- macOS 14.6.1
- Node 20.15.1
- pnpm 9.10.0
- Next.js 14.2.11
- Tailwind CSS 3.3.3
Next.jsアプリケーションの作成
次のコマンドで新しいNext.jsアプリケーションを作成します。my-app の部分は任意のプロジェクト名に変更します。
pnpm create next-app my-app --ts --tailwind --eslint --app --src-dir --import-alias '@/*'インストール後に次のコマンドでnpmのパッケージをアップデートしておきます。
cd my-app
pnpm updateコードフォーマットのための設定
pnpm format でプロジェクト内のTypescriptのファイルを自動でフォーマットできるようにするためにPrettierをインストールします。
pnpm add -D -E prettier eslint-config-prettier prettier-plugin-tailwindcss上記のコマンドでPrettierとeslint-config-prettierをインストールします。
続けて、以下のように各種ファイルを修正・作成していきます。
package.jsonを修正
下記のように修正することで pnpm format と実行することで、ソースコードのフォーマットができるようになります。
"scripts": {
"lint:fix": "next lint --fix",
"prettier": "prettier --write --ignore-unknown .",
"prettier:check": "prettier --check --ignore-unknown .",
"format": "pnpm prettier && pnpm lint:fix"
}.eslintrc.jsonを修正
eslint-config-prettierをESLintの設定に追加して有効にします。
{
"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
plugins: ['prettier-plugin-tailwindcss'].prettierignoreを作成
Prettierの適用を除外するためのファイルを作成します。
.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上記コマンドでESLintのプラグインをインストールします。eslint-plugin-importとeslint-plugin-unused-importsです。
次に、下記の設定を.eslintrc.jsonに追記することで、importを並び替えたり未使用のimportを削除するようになります。
また、no-restricted-imports で import xxx from '../../xxx' のような相対パスで親の階層からのimportを禁止するような設定も追加しています。
{
// ...
"plugins": ["import", "unused-imports"],
"rules": {
"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 }
}
],
"no-restricted-imports": ["error", { "patterns": ["../"] }]
}
// ...
}ESLintのセミコロンを省略したい場合の設定
Typescriptのコードでセミコロンを省略するための設定です。.eslintrc.jsonの rules に下記を追加します。
"rules": {
"semi": ["error", "never", { "beforeStatementContinuationChars": "never" }],
"semi-spacing": ["error", { "after": true, "before": false }],
"semi-style": ["error", "first"],
"no-extra-semi": "error",
"no-unexpected-multiline": "error",
"no-unreachable": "error"
}Tailwind CSSのためのESLintの設定
eslint-plugin-tailwindcssを使って以下のようなルールを追加します。
- Tailwind CSSのクラス名を特定の順序に自動的に並べ替えます。
- 存在しない、または間違ったTailwind CSSのクラス名を使用している場合、それを自動的に警告またはエラーとして検出します。
- 重複している、または互いに打ち消し合うようなクラス名が使用されている場合、それを検出します。
eslint-plugin-tailwindcss をインストール
コマンドを実行後、.eslintrc.json の extends に plugin:tailwindcss/recommended を追記します。
pnpm add -D -E eslint-plugin-tailwindcss{
"extends": [
"next/core-web-vitals",
"next/typescript",
"prettier",
"plugin:tailwindcss/recommended"
],
// ...
}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
