Closed5
個人開発用のテンプレートを作る
nextアプリの初期設定
こちらを参考に実施していく
nodeのバージョンを確認
System Requirements:
Node.js 18.17 or later.
とあるので、一応確認
node -v
v20.10.0
next.jsのインストール
npx create-next-app@latest
Need to install the following packages:
create-next-app@14.0.4
Ok to proceed? (y)
✔ What is your project named? … template-next
✔ 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? › @/*
今回は最新のNextの勉強も兼ねているためrecommendされているものは全てYes
で回答する。
また、? What import alias would you like configured? › @/*
については、
ファイルパスの先頭に@/
と指定するとプロジェクトディレクトリとなるようエイリアスの設定をしている
確認
template-next && code .
package.json
{
"name": "template-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"react-dom": "^18",
"next": "14.0.4"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.0.1",
"postcss": "^8",
"tailwindcss": "^3.3.0",
"eslint": "^8",
"eslint-config-next": "14.0.4"
}
}
動作確認
npm run dev
以下が表示されることを確認
git管理
ここまでの設定内容をコミットしておく。
また、リポジトリはすでに作成済とする
git init
git remote add origin [your remote repository]
git branch -M main
git push -u origin main
Prettier
npm install -D prettier
.prettierrc.json
{
"semi": false,
"singleQuote": true,
"trailingComma": "all"
}
ESLint
こちらを元に作成していく
-
.eslintrc.json
→.eslintrc.js
に変更 - 関連packageのinstall
npm install -D @typescript-eslint/eslint-plugin eslint-plugin-eslint-comments @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-react eslint-plugin-simple-import-sort
package.jsonは以下のようになります
package.json
{
"name": "template-next",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
+ "prepare": "husky install"
},
"dependencies": {
"next": "14.0.4",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
+ "@typescript-eslint/eslint-plugin": "^6.14.0",
+ "@typescript-eslint/parser": "^6.14.0",
"autoprefixer": "^10.0.1",
"eslint": "^8",
"eslint-config-next": "14.0.4",
+ "eslint-config-prettier": "^9.1.0",
+ "eslint-plugin-eslint-comments": "^3.2.0",
+ "eslint-plugin-import": "^2.29.1",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-simple-import-sort": "^10.0.0",
+ "husky": "^8.0.0",
+ "lint-staged": "^15.2.0",
"postcss": "^8",
"prettier": "^3.1.1",
"tailwindcss": "^3.3.0",
"typescript": "^5"
}
}
- 先ほどの記事の
.eslintrc.js
をコピーし貼り付け
storybookや、不要なoverrideは削除する
.eslintrc.js
module.exports = {
extends: [
'next/core-web-vitals',
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:react/jsx-runtime',
'plugin:eslint-comments/recommended',
'prettier',
],
env: { browser: true, node: true, es6: true },
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
project: './tsconfig.json',
tsconfigRootDir: __dirname,
},
plugins: ['@typescript-eslint', 'simple-import-sort', 'import'],
ignorePatterns: ['node_modules/', '.eslintrc.js'],
rules: {
'react/jsx-curly-brace-presence': 'warn',
'simple-import-sort/imports': 'error', //importとexportのソート
'simple-import-sort/exports': 'error',
'import/first': 'error',
'import/newline-after-import': 'error',
'import/no-duplicates': 'error',
'@typescript-eslint/consistent-type-definitions': ['warn', 'type'], //型定義はtypeを使う
'@typescript-eslint/no-explicit-any': 'error', //any禁止
'@typescript-eslint/no-unused-vars': 'error', //未使用の変数禁止
'react/self-closing-comp': ['error', { component: true, html: true }], //<Component />のように自己閉タグを使う
'no-control-regex': 'off', //正規表現中のASCII制御文字ok
'react/jsx-boolean-value': 'error', //attribute={true} → attribute
'react/jsx-pascal-case': 'error', //コンポーネント名はパスカルケース
'object-shorthand': ['warn', 'properties', { avoidQuotes: true }],
'eslint-comments/require-description': 'error', //eslint-disable-next-lineのコメントは必ず説明を書く。https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/require-description.html
'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }], //https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/disable-enable-pair.html
'import/no-default-export': 'error', //default export禁止
'no-nested-ternary': 'error', //三項演算子のネスト禁止
'react/function-component-definition': [
'error', //関数コンポーネントの定義はアロー関数を使う
{ namedComponents: 'arrow-function' },
],
'no-magic-numbers': [
'error',
{
ignore: [-1, 0, 1], //配列検索でindexOf === -1などは許容する
ignoreDefaultValues: true, //const { tax = 0.1 } = props
ignoreArrayIndexes: true, //data[100] ok
enforceConst: true, //マジックナンバーはconstで定義する
},
],
'@typescript-eslint/naming-convention': [
'error',
{
selector: ['variable', 'method', 'accessor'], //基本的に全てcamelCase
format: ['camelCase', 'snake_case'],
},
{
selector: ['property'], //APIリクエスト時にPascalCaseとなっている箇所がある
format: ['camelCase', 'snake_case', 'PascalCase'],
},
{
selector: 'variable', //exportされている定数やコンポーネント
modifiers: ['exported', 'const'],
format: ['PascalCase', 'strictCamelCase'],
},
{
selector: 'interface', //interfaceはIをつけない
format: ['PascalCase'],
custom: { regex: '^I[A-Z]', match: false },
},
{ selector: ['class', 'typeAlias', 'enum'], format: ['PascalCase'] },
{
selector: ['objectLiteralProperty'], //api requestのheadersの'Content-Type'などが対応するためnullで許容する
format: null,
modifiers: ['requiresQuotes'],
},
],
},
overrides: [
{
files: ['page.tsx', 'layout.tsx', 'tailwind.config.ts'],
rules: {
'import/no-default-export': 'off',
'import/prefer-default-export': 'error',
'@typescript-eslint/naming-convention': 'off',
},
},
],
}
huskyとlint-stagedでコミット前にlintを走らせる
以下の手順通りに実行していく
- huskyのインストール
npx husky-init && npm install
- lint-stagedのインストール
npm install -D lint-staged
-
.husky/pre-commit
にコマンドを追加する
npx husky set .husky/pre-commit "npx lint-staged"
以下のようになっていればok
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx lint-staged
- ステージングに上がっているファイルのみを対象とする設定を追加
.lintstagedrc.js
const path = require('path')
const buildEslintCommand = (filenames) =>
`next lint --file --fix ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`
module.exports = {
'*.@{js,jsx,ts,tsx}': [buildEslintCommand, 'prettier --write'],
}
この記事を参考にさせていただきました🙇♂️
pre-commitが動かない
タイポしてた🥲🥲🥲🥲🥲🥲
.lintstagedrc.js
const path = require('path')
const buildEslintCommand = (filenames) =>
`next lint --fix --file ${filenames
.map((f) => path.relative(process.cwd(), f))
.join(' --file ')}`
module.exports = {
- '*.@{js,jsx,ts,tsx}': [
+ '*.{js,jsx,ts,tsx}': [
() => 'tsc --incremental false --noEmit',
buildEslintCommand,
'prettier --write',
],
}
app routerに対応したeslintを設定する
app router
では/app
配下のpage.tsx
のみをroutingの対象とするようなので、default export の制限を/app配下の全てのpage.tsx
に変更する
.eslintrc.js
{
~~~
overrides: [
{
- files: ['page.tsx', 'layout.tsx', 'tailwind.config.ts'],
+ files: ['*/app/**/page.tsx', 'layout.tsx', 'tailwind.config.ts'],
rules: {
'import/no-default-export': 'off',
'import/prefer-default-export': 'error',
'@typescript-eslint/naming-convention': 'off',
},
},
],
}
このスクラップは2023/12/18にクローズされました