Next.jsプロジェクトに追加したい設定11個

2023年12月に投稿したQiita記事の内容を、Netadashi Meetup #12で発表しました。その発表スライドです。

Transcript

1. Next.jsプロジェクトに追加したい設定11個
2. 自己紹介 1 佐藤 高志 • 株式会社野村総合研究所 • 認証・IGA(ID管理)関連に従事 • 趣味はOSS活動? • 大学生の頃から(濃淡は激しい) • いろんな分野に手を出した • Apache HTTP Serverのコミッターやっ て(た) https://www.tks.st/ Twitter: @_tksst GitHub: @tksst 1997 JavaScriptに初めて触れる 2019 Node.js/TypeScript/Reactを触る 2023 Next.jsを触る (当時パソコンが家になく、学校で) 20年の空白… フロントエンドエンジニアとしての軌跡 → フロントエンドエンジニアとは言えない
3. 今日話すこと 2 2023年アドベントカレンダーで書いた記事 Next.jsプロジェクトに追加したい設定11個 について語ります Next.jsプロジェクトはcreate-next-app でほとんど必要十分 だが、ちょっとアレンジを加えると、以下のようなメリットが。 • 開発者体験向上 • セキュリティ向上 • プロジェクト内メンバーの意思統一 • プロジェクトの不安定さの排除
4. おことわり 3 時間の関係もあり、11個のうち一部取捨選択しています Qiita記事も当発表も、「広く浅く」重視です。 皆様の何かのきっかけを提供できるといいなと。 深掘りは、他にもっと素晴らしい記事がたくさんあります。 特に今日の発表は、設定や手順を網羅したような説明はできないので、 当資料だけでなく元になったQiita記事を是非ご覧ください。
5. 記事のURLはこちら 4 https://qiita.com/tksst/items/bf62d5 0b25af69505e8e
6. 一覧 5 Qiitaに挙げた設定は以下の通り 1. パッケージのバージョン固定 (推奨度:3) 2. 秘匿情報チェック(Secretlint) (推奨度:5) 3. フォーマッタ追加(Prettier) (推奨度:5) 4. ESLint強化 (推奨度:4) 5. package.jsonのスクリプトの整理・並列実行 (推奨度:5) 6. CIツールによるチェック(推奨度:5) 7. 依存パッケージ更新チェック自動化(Renovate/Dependabot) (推奨度:3) 8. Node.jsのバージョン固定 (推奨度:3) 9. TypeScriptの設定変更(推奨度:3) 10.TypeScriptの型を強化する(better-typescript-lib) (推奨度:2) 11.gitの自動改行コード変更機能を無効にする (推奨度:1)
7. create-next-app 6 なにはともあれ、create-next-appをします。 TypeScript(--ts)、ESLint(--eslint)は有 効にしましょう。 { "name": "netadashi-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, $ npx create-next-app –ts --eslint プロジェクトのpackage.jsonを見てみると、スクリ プトに以下が定義されています。 スクリプト 内容 dev 開発用サーバの起動 build 本番用ビルドの作成 start 本番用サーバの起動 lint ESLintによる静的チェック もうこれで十分ですが、もっと設定を追加して いきましょう。
8. 1. パッケージのバージョン固定 (推奨度:3) 7 "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.1.0" }, "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.1.0" } 対応前 依存パッケージがメジャーバージョンのみ指定 された状態 タイミングや環境次第でバージョンが変わる プロジェクトの状態が*不安定* "dependencies": { "next": "14.1.0", "react": "18.2.0", "react-dom": "18.2.0" }, "devDependencies": { "@types/node": "20.11.16", "@types/react": "18.2.51", "@types/react-dom": "18.2.18", "autoprefixer": "10.4.17", "eslint": "8.56.0", "eslint-config-next": "14.1.0", "postcss": "8.4.33", "tailwindcss": "3.4.1", "typescript": "5.3.3" } 対応前 結果 対応 .npmrcに`save-exact = true`を設定 全てのパッケージを一度アンインストールして から再インストール 結果 全てのパッケージのバージョンが固定 プロジェクトの状態が安定
9. 2. 秘匿情報チェック(Secretlint) (推奨度:5) 8 対応前 APIキーを「とりあえず」ソースコードにべた書 き。そのままGitHubに公開してしまう事故があ りがち。 $ npx secretlint > nextjs-secretlint-demo@0.1.0 secretlint /workspaces/dev/nextjs- secretlint-demo > secretlint --maskSecrets --secretlintignore .gitignore '**/*' /workspaces/dev/nextjs-secretlint-demo/tmp-secret.mjs 1:25 error [GITHUB_TOKEN] found GitHub Token(*****************************): **************************************** @secretlint/secretlint- rule-preset-recommend > @secretlint/secretlint-rule-github ✖ 1 problem (1 error, 0 warnings)  ELIFECYCLE  Command failed with exit code 1. 対応 secretlintをインストールし、スクリプトに設定 結果 リポジトリ内の秘匿情報をチェックして警告し てくれる GitHubのトークンが検出されエラーになる様子 デモやります
10. 3. フォーマッタ追加(Prettier) (推奨度:5) 9 対応前 • コーディング規約でコードスタイルを定義 • 人によって解釈が異なり、ズレる • そもそもルールを守るのも面倒くさい、動作 に影響ないだろ 対応 Prettierをインストールし、スクリプトに設定 VSCodeに自動フォーマットを設定 結果 保存するたびに自動でスタイルを整えてくれる デモやります
11. 4. ESLint強化 (推奨度:4) 10 対応前 Next.jsによってESLintが設定されていて、そ れなりにコード品質が確保されている状態 対応 ESLintのプラグインを追加 ESLintの自動修正機能をスクリプトに追加 結果 さらなるコード品質向上！ プラグイン 説明 eslint-plugin-simple- import-sort import文の自動ソート typescript-eslint ESLintのTypeScript向けデファクトスタン ダードプラグイン eslint-plugin-redos 正規表現のReDoS脆弱性をチェック おすすめプラグイン デモやります
12. 5. package.jsonのスクリプトの整理・並列実行 (推奨度:5) 11 対応前 Secretlint、ESLint、Prettierをそれぞれ 別々にスクリプト実行する必要がある 対応 npm-run-all2をインストール ワンコマンドで全チェックを行うように修正 結果 ワンコマンドで全チェックを行えるようになる "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "prettier-check": "prettier --cache --check .", "prettier-fix": "prettier --cache --write .", "lint-fix": "next lint --fix", "secretlint": "secretlint '**/*'" }, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "run-p --continue-on-error --print-label lint:*", "lint:eslint": "next lint", "lint:prettier": "prettier --cache --check .", "lint:secretlint": "secretlint '**/*'", "fix": "run-s --continue-on-error fix:*", "fix:eslint": "next lint --fix", "fix:prettier": "prettier --cache --write ." }, 対応前 結果 「npm run lint」でESLint、Secretlint、Prettierをまとめてチェックする 「npm run fix」でESLintとPrettierの自動修正をまとめて実施する
13. 6. CIツールによるチェック(推奨度:5) 12 今や当たり前。このセッションで説明するまでもないことかと思います。 Next.jsデフォルトで存在するビルドとLintチェックの他、追加したSecretlintやPrettierによる チェックをしましょう。
14. 7. 依存パッケージ更新チェック自動化(Renovate/Dependabot) (推奨度:3) 13 対応前 • バージョンアップを放置し、いざ上げるとき 大変になる • 特に、パッケージ脆弱性が大変 • それが嫌で、バージョンを固定しない 対応 RenovateかDependabotをプロジェクトに 設定 結果 自動でバージョンアップのプルリクエストを 作ってくれる Renovateが作成したバージョンアップのプルリク
15. 8. Node.jsのバージョン固定 (推奨度:3) 14 対応前 • Node.jsのバージョンは適当に決める • プロジェクト内ルールで周知する 対応 Node.jsバージョン管理ツールを導入する バージョンを設定ファイルに書く 結果 プロジェクト内でバージョンが機械的に決まる CIツールなどもバージョンを検知してくれる nvmでNode.jsバージョンを固定する package.jsonに定義する Vercelはこれを読み取ってくれる(マイナーバージョン以下は無視される)
16. 9. TypeScriptの設定変更(推奨度:3) 15 対応前 • あらかじめtsconfig.jsonが設定されてお り、概ね問題無い • TypeScriptデフォルトに寄せられており、 良くも悪くも無難 対応 tsconfig.jsonにチェック追加設定をする (右の4つを推奨) 結果 さらなるコード品質向上！ 設定 意味(ざっくり) noImplicitOverride クラス構文でオーバーライドする場 合は明示しないとエラーにする noImplicitReturns return文書き忘れをエラーにする noUncheckedIndexedAccess 配列へインデックスでアクセスする 場合、undefinedでないことの確認 が必須になる exactOptionalPropertyTypes オプションプロパティにundefined の代入することを禁止する
17. 10. TypeScriptの型を強化する(better-typescript-lib) (推奨度:2) 16 対応前 • 標準ライブラリの型が緩い(JSON.parse とか) 対応 better-typescript-libをインストール 結果 標準ライブラリの型がより型安全になる 時間があれば、better- typescript-libのWebサイトを見る https://zenn.dev/uhyo/articles /better-typescript-lib-v2
18. コミット時チェック(husky) 17 対応前 • 開発者がSecretlint/ESLint/Prettierの チェックを忘れたままコミット&プッシュして CIがエラーになる 対応 husky/lint-stagedをインストールして設定 結果 Gitコミット時にチェックが自動で走り、チェック 通過しないとコミットできなくなる ※この項目は、Qiita記事では「設定しなかったこ と」で紹介しました。 最近気が変わり、やってもいいのではないかと思 い始めました。 なので具体的な設定はまだご紹介出来ません。
19. おさらいとまとめ 18 • 開発者体験向上 • セキュリティ向上 • プロジェクト内メンバーの意思統一 • プロジェクトの不安定さの排除 Next.jsに設定を追加するのは、以下が大きな目的でした ここまでご紹介した設定に限らず、上記を意識したプロジェクト整備を心がけましょう