この記事の概要
App Routerを使用するNext.jsのインストールとその後の開発環境構築の手順を記録した記事です。作成するアプリケーションに関わらず共通して必要となるような内容を中心に書かれています。
- ESLintによるルールの設定
- Prettierによるコードフォーマットのための設定
また、CSSフレームワークにTailwind CSSを使用した内容になっています。使用しない場合、適宜読み替えが必要になります。
以下の環境での作業を元に作成した記事です:
- macOS 13.5.1
- Node 18.18.0
- pnpm 8.7.6
- Next.js 13.4.19
- Tailwind CSS 3.3.3
インストール
pnpm create next-app
上記のコマンドでインストールします。オプションは下記のようになります。
- srcディレクトリを作成するようにしています。階層が深くなるのが嫌な場合は作成しなくても良いです。
- Import aliasを設定して
import hoge from '@/hoge'のように独自のコンポーネントをインポートできるようにしています。
Need to install the following packages:
create-next-app@13.4.19
Ok to proceed? (y)
✔ What is your project named? … blog
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … Yes
✔ What import alias would you like configured? … @/*
Creating a new Next.js app in /your/path/blog
コードフォーマットのための設定
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", "prettier"]
}
.prettierrc.yamlを作成
Prettierの設定ファイルを作成します。
trailingComma: 'es5'
tabWidth: 2
semi: false
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": true
}
}
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 をインストール
pnpm add -D -E eslint-plugin-tailwindcss
{
"extends": ["next/core-web-vitals", "prettier", "plugin:tailwindcss/recommended"],
}
コマンドを実行後、.eslintrc.json の extends に 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
