Next.js + TypeScript + ESLint + Prettier 環境構築手順
Next.js プロジェクトにおけるベーシックな環境として、表題の内容での構築手順をまとめる。
これをベースとして、プロジェクトに応じて Emotion や Chakra-UI、Tailwind CSS などを導入する。
前提
- Node.js
- Yarn
- VSCode、および以下の拡張機能
- editorconfig
- Prettier
- ESLint
Next.js のセットアップ
公式のコマンド通りに Next.js のプロジェクトをセットアップする。
yarn create next-app
2023 年 2 月 28 日時点では、上記のコマンドを実行すると以下の内容が対話型で展開される（create-next-app@13.2.1）
? What is your project named? › my-app
# プロジェクト名を入力
? Would you like to use TypeScript with this project? › No / Yes
# Yes を選択
? Would you like to use ESLint with this project? › No / Yes
# Yes を選択
? Would you like to use `src/` directory with this project? › No / Yes
# Yes を選択
? Would you like to use experimental `app/` directory with this project? › No / Yes
# No を選択
? What import alias would you like configured? › @/*
# そのまま選択か @/* を入力
セットアップが完了すると、以下のディレクトリ構成でプロジェクトが作成される。 src/ ディレクトリの使用について Yes と回答しているので、 pages と styles ディレクトリが最初から src ディレクトリ以下に配置されている。
.
├── public
│ ├── favicon.ico
│ ├── next.svg
│ ├── thirteen.svg
│ └── vercel.svg
├── src
│ ├── pages
│ │ ├── api
│ │ │ └── hello.ts
│ │ ├── _app.tsx
│ │ ├── _document.tsx
│ │ └── index.tsx
│ └── styles
│ ├── globals.css
│ └── Home.module.css
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── next.config.js
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock
npm scripts の追加
package.json の scripts に Next.js のビルドとエクスポートを実行する export コマンドを追加する。出力先のディレクトリは dist とする。
"scripts": {
"dev": "next dev",
"build": "next build",
+ "export": "next build && next export -o dist",
"start": "next start",
"lint": "next lint"
},
パスエイリアスの設定
ファイルのインポート時に @/ と絶対パスを指定できるように tsconfig.json にパスエイリアスを設定する。 create-next-app によるセットアップ時にパスエイリアスの設定をおこなっていれば途中までは自動的に記述されている。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ "@@/*": ["./*"]
+ }
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
これにより ESModules で下記のような記述でのインポートができる。
import moduleA from '@/components/A'
.editorconfig の追加
.editorconfig を追加する。
# http://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
insert_final_newline = true
[*.{md,markdown}]
trim_trailing_whitespace = false
[*.pug]
indent_size = 4
trim_trailing_whitespace = false
Prettier の設定
Prettier をインストールしてコードフォーマットの環境を整える。また VSCode の設定をプロジェクト内に設置することで、保存時の自動フォーマットを有効化する。
まずは Prettier をプロジェクトにインストールする。
yarn add -D prettier
次に Prettier の設定ファイルである .prettierrc.toml をプロジェクトのルートに配置する。TOML 形式としたのは個人的に JS や JSON 形式などより扱いやすかっただけなので、設定ファイルの形式は自由で構わない。
trailingComma = "es5"
tabWidth = 2
useTabs = false
semi = false
singleQuote = true
jsxSingleQuote = false
arrowParens = "always"
printWidth = 80
bracketSpacing = true
htmlWhitespaceSensitivity = "ignore"
[[overrides]]
files = [ "*.html" ]
[overrides.options]
printWidth = 360
[[overrides]]
files = [ "*.css", "*.scss" ]
[overrides.options]
singleQuote = false
[[overrides]]
files = [ "*.pug" ]
[overrides.options]
tabWidth = 4
printWidth = 360
singleQuote = false
フォーマットの対象外を定義した .prettierignore も合わせて配置する。
node_modules/
.next/
.nuxt/
build/
dist/
out/
public/
package-lock.json
yarn.lock
vite.config.ts
next.config.js
tsconfig.json
ESLint の設定
ESLint では以下のパッケージをインストールして使用することにしている。
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- eslint-config-standard-with-typescript
- eslint-plugin-import
- eslint-plugin-n
- eslint-plugin-promise
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-unused-imports
- eslint-config-prettier
以下のコマンドで上記パッケージをまとめてインストールする。
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-standard-with-typescript eslint-plugin-import eslint-plugin-n eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unused-imports eslint-config-prettier
Next.js セットアップ時に作成された .eslintrc.json を更新して ESLint の設定を反映する。
以下は自分が Next.js プロジェクトの基本形として使っている設定ファイルで、これをベースにプロジェクトごとに微調整をかけるようにしている。
Prettier 同様、リントの対象外を定義した .eslintignore も合わせて配置する。
node_modules/
.next/
.nuxt/
build/
dist/
out/
public/
package-lock.json
yarn.lock
vite.config.ts
next.config.js
tsconfig.json
VSCode の設定
プロジェクトのルートに .vscode ディレクトリを作成し、そこに各種の設定を記述した settings.json を配置することで、そのプロジェクト内だけで有効な VSCode の設定を管理でき、プロジェクトのチームメンバーでその設定を共有することができる。
また、 extensions.json を作成しておくと、推奨する拡張機能もプロジェクトのチームメンバーで共有することができる。
参考
Discussion