Next.js12 構築メモ
モノNext.js インストール
npx create-next-app@latest --typescript
prettier インストール
npm install --save-dev prettier eslint-config-prettier
prettier の設定ファイル .prettierrc 作成して下記記載
{
"trailingComma": "all",
"tabWidth": 2,
"singleQuote": true,
"endOfLine": "lf"
}
package.json の scripts の中身を変更
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint \"src/**/*.{ts,tsx}\"",
"fix:prettier": "prettier --write \"src/**/*.{ts,tsx}\""
},
}
tsconfig.json で絶対パスで指定できるように baseUrl を追記
{
"compilerOptions": {
"baseUrl": "./src",
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
...
未使用変数怒ってくれないのが嫌なので airbnb も入れる
npm install --save-dev eslint-config-airbnb
.eslintrc.json も変更
{
"extends": ["airbnb", "next", "next/core-web-vitals", "prettier"]
}
そしてここまでやって気づいたけど、もしかして元々入ってた Linter の設定って TypeScript 関連のヤツ入ってない？
それとも airbnb が素だと対応してないだけか……
モノというわけで怒られた分だけ eslint の拡張を入れていく
npm install --save-dev eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser
あと設定ファイルも色々追記
{
"extends": [
"airbnb",
"airbnb-typescript",
"next",
"next/core-web-vitals",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
}
}
ちゃんと動いてくれてるっぽいけど、サンプルコードしかない状態なのに Linter が怒ってるので、無視したほうがよさげなルールは無視するようにルール追記
{
"extends": [
"airbnb",
"airbnb-typescript",
"next",
"next/core-web-vitals",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"rules": {
"react/jsx-props-no-spreading": "off",
"react/function-component-definition": "off",
"arrow-body-style": "off"
}
}
react/function-component-definitionは丸ごと off にするのは微妙な気がするけど、コンポーネント関数の書き方に対して何が正解か自分の中で決まってないから諦めの off……
モノスタイル書くのはまだ CSS Module 推しなのかな？
CSS 書くの嫌いじゃないので CSS Modules で書くのは決定として Scss 使いたいので Sass のヤツをインストール
npm install sass
storybook もインストール。
webpack5 でインストールして欲しいからオプション付けてインストール
npx sb init --builder webpack5
途中で eslintPlugin を入れるかと聞かれるが、入れようとしたらエラーが出てしまったので今回はキャンセル。
If you change your mind, run 'npx sb@next automigrate' て言ってきたから、あとで入れなおすことはできそう。
モノeslintPlugin 入れるかどうかの確認が出た後 yes だろうが no だろうがインストールが固まって、 Ctrl C で強制終了後に storybook 動かそうとしてもエラー吐いて動かない……
というわけで webpack を入れてから storybook を入れたら動いた
npm install --save-dev webpack
でも相変わらず storybook のインストールの画面は止まる。
まぁ、強制終了させてから npm run storybook で動かしたら動いたから大丈夫やろ
モノあと何かインストールするべきものあるかなぁって思ったけど、husky と stylelint があったな……
モノとりあえず stylelint 公式ドキュメントに書いてあるヤツと、プロパティの並び順をいい感じにしてくれるヤツをインストール
npm install --save-dev stylelint stylelint-config-standard-scss stylelint-config-property-sort-order-smacss
prittier と stylelint を連携
npm install --save-dev stylelint-prettier stylelint-config-prettier postcss
あと設定ファイルを作成
{
"plugins": ["stylelint-prettier"],
"extends": [
"stylelint-config-property-sort-order-smacss",
"stylelint-config-standard-scss",
"stylelint-prettier/recommended"
],
"rules": {
"string-quotes": "single"
}
}
husky をインストール
npx husky-init && npm install
.husky/pre-commit が自動で作成されるのでコミット時にフォーマット系のコマンドを実行するように書き換える。
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npm run fix:prettier && npm run fix:style-lint && git add .