docs: Next.js / SPA 推奨ライブラリを拡充・統一 - #527
Conversation
## Next.js セットアップガイド (web-app-nextjs.md) - Zod セクションを追加（スキーマ定義・API バリデーション・Supabase 型との組み合わせ） - @t3-oss/env-nextjs セクションを追加（環境変数の型安全化・ビルド時検知） - react-hook-form + @hookform/resolvers セクションを追加（Zod 統合パターン） - @vercel/analytics + @vercel/speed-insights セクションを追加（layout.tsx に2行追加） ## SPA (React + Vite) セットアップガイド (spa-react-vite.md) - ESLint + Prettier を Biome に置き換え（Next.js ガイドと統一） - noConsole ルールを含む biome.json テンプレートを追加 - lint-staged 設定を Biome 用に更新 ## ツールカタログ (tool-catalog.md) - Next.js 依存リストに @vercel/analytics, @vercel/speed-insights, @t3-oss/env-nextjs, react-hook-form を追加 - SPA (React + Vite) 依存リストに Biome を追加 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughReplaces ESLint/Prettier with Biome in the React + Vite SPA docs, adds Zod-based validation, env-nextjs type-safe envs, react-hook-form examples, and Vercel analytics/speed-insights guidance in the Next.js docs, and updates the tool catalog to reflect these dependency and formatting changes. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 53d22ab7f5
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| } | ||
| ```js | ||
| // lint-staged.config.js | ||
| module.exports = { |
There was a problem hiding this comment.
The new snippet uses lint-staged.config.js with module.exports, but React+Vite projects commonly run with "type": "module"; in that setup this file is treated as ESM and throws ReferenceError: module is not defined, so npx lint-staged (and pre-commit hooks) fail immediately. Please either rename the sample file to lint-staged.config.cjs or use an ESM export form for .js.
Useful? React with 👍 / 👎.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/setup/spa-react-vite.md`:
- Around line 107-112: 本文が ESLint/Prettier 関連ファイルの削除を案内していますが、リポジトリ運用（例:
eslint.config.mjs / .prettierrc /
.husky/pre-commit）がある場合の扱いが不明瞭なので、該当箇所を「この手順はアプリケーション側リポジトリ向けのみ適用」と明記し、設定リポジトリや共有コンフィグを運用している場合は削除しない旨（例示:
eslint.config.mjs, .prettierrc, .husky/pre-commit
は残す/別途移行手順に従う）を追記してください。また「削除対象パッケージ一覧（eslint, eslint-plugin-*, prettier,
eslint-config-prettier, typescript-eslint 等）」を保持しつつ、config
リポジトリに対する例外とその判断基準を短く明示してください。
In `@docs/setup/web-app-nextjs.md`:
- Around line 526-530: Update the Core Web Vitals label in the docs: change the
`<SpeedInsights />` row’s collected data text from "LCP / FID / CLS 等の Core Web
Vitals" to "LCP / INP / CLS 等の Core Web Vitals" so the documentation reflects
the replacement of FID with INP per the current spec.
In `@docs/tool-catalog.md`:
- Around line 129-137: The SPA dependency list ("SPA (React + Vite)" row)
includes "Biome" but the 4.1 matrix still shows SPA's lint/format as "-" causing
an inconsistency; update the 4.1 マトリクス entry for the SPA column so the
lint/format cell reflects Biome (or alternatively remove Biome from the "SPA
(React + Vite)" row) to make the two places consistent—search for the "SPA
(React + Vite)" row and the "4.1 マトリクス" lint/format cell and align them so both
reference the same lint/format tool (Biome if you keep it).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: d122b3ce-5a9e-487c-837f-c7422e60d226
📒 Files selected for processing (3)
docs/setup/spa-react-vite.mddocs/setup/web-app-nextjs.mddocs/tool-catalog.md
| 移行後、不要になったパッケージと設定ファイルを削除する: | ||
|
|
||
| - `eslint`, `eslint-config-*`, `eslint-plugin-*`, `@eslint/*`, `typescript-eslint` | ||
| - `prettier`, `eslint-config-prettier` | ||
| - `eslint.config.mjs` / `.eslintrc.*` / `.prettierrc*` | ||
|
|
There was a problem hiding this comment.
削除ガイダンスの適用スコープを明記してください
Line 107-112 は ESLint/Prettier 関連ファイルの削除を案内していますが、現状のリポジトリ運用（eslint.config.mjs / .prettierrc / .husky/pre-commit）と衝突します。
この手順が「アプリ側リポジトリ向け」なのか「この config リポジトリにも適用」なのかを明記してください。
🧰 Tools
🪛 LanguageTool
[typographical] ~109-~109: ２つの連続するコンマ
Context: ..., eslint-config-*, eslint-plugin-*, @eslint/*, typescript-eslint - prettier, `es...
(DOUBLE_PUNCTUATION)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/setup/spa-react-vite.md` around lines 107 - 112, 本文が ESLint/Prettier
関連ファイルの削除を案内していますが、リポジトリ運用（例: eslint.config.mjs / .prettierrc /
.husky/pre-commit）がある場合の扱いが不明瞭なので、該当箇所を「この手順はアプリケーション側リポジトリ向けのみ適用」と明記し、設定リポジトリや共有コンフィグを運用している場合は削除しない旨（例示:
eslint.config.mjs, .prettierrc, .husky/pre-commit
は残す/別途移行手順に従う）を追記してください。また「削除対象パッケージ一覧（eslint, eslint-plugin-*, prettier,
eslint-config-prettier, typescript-eslint 等）」を保持しつつ、config
リポジトリに対する例外とその判断基準を短く明示してください。
| | コンポーネント | 収集データ | | ||
| | ------------------- | ------------------------------------------ | | ||
| | `<Analytics />` | ページビュー・ユニークビジター・リファラー | | ||
| | `<SpeedInsights />` | LCP / FID / CLS 等の Core Web Vitals | | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
cat -n docs/setup/web-app-nextjs.md | sed -n '520,535p'Repository: keito4/config
Length of output: 692
🌐 Web query:
Core Web Vitals metrics 2024 2025 INP FID replacement
💡 Result:
- FID → INP switch (Core Web Vitals): Interaction to Next Paint (INP) officially replaced First Input Delay (FID) as the Core Web Vitals “responsiveness” metric on March 12, 2024. (web.dev)
- What CWV are in 2024–2025: The Core Web Vitals set is LCP + CLS + INP (FID is no longer part of the CWV trio). (web.dev)
- INP thresholds (field guidance): A common target is “good” INP ≤ 200 ms (75th percentile). (web.dev)
- Deprecation/removal timeline: Chrome tools/APIs deprecated FID after the March 12, 2024 switch, with a transition deadline of September 9, 2024 for consumers to move off FID to avoid breakage. (web.dev)
- If you read CrUX / PSI / Lighthouse programmatically: Update from the old experimental INP fields to the stable ones (for example,
experimental_interaction_to_next_paint→interaction_to_next_paintin CrUX / PSI APIs). (web.dev)
Citations:
- 1: https://web.dev/blog/inp-cwv
- 2: https://web.dev/blog/inp-cwv-launch
- 3: https://web.dev/blog/inp-cwv-launch
- 4: https://web.dev/blog/inp-cwv-launch
- 5: https://web.dev/blog/inp-cwv
Update Core Web Vitals metrics to current definition
Line 529 references LCP / FID / CLS as Core Web Vitals, but FID (First Input Delay) was officially replaced by INP (Interaction to Next Paint) on March 12, 2024. Update to LCP / INP / CLS to align with the current Core Web Vitals specification.
Reference: https://web.dev/blog/inp-cwv
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/setup/web-app-nextjs.md` around lines 526 - 530, Update the Core Web
Vitals label in the docs: change the `<SpeedInsights />` row’s collected data
text from "LCP / FID / CLS 等の Core Web Vitals" to "LCP / INP / CLS 等の Core Web
Vitals" so the documentation reflects the replacement of FID with INP per the
current spec.
| | 種別 | 注目する依存 | | ||
| | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | 共通基盤 (config) | semantic-release, jest-junit, bats | | ||
| | Web アプリ (Next.js) | `@supabase/ssr`, `@vercel/logger`, `@sentry/nextjs`, `@vercel/analytics`, `@vercel/speed-insights`, Zod 4, `@t3-oss/env-nextjs`, react-hook-form, Tailwind CSS 4, Testing Library, Playwright, LangSmith | | ||
| | npm ライブラリ (CLI) | `@notionhq/client`, commander, ts-jest, semantic-release | | ||
| | SPA (React + Vite) | `@google/genai`, D3.js, React 19, Biome | | ||
| | デスクトップ拡張 (TS) | lint-staged, monorepo (pnpm workspaces) | | ||
| | モバイル (Flutter) | Riverpod, Drift (SQLite), Freezed, go_router | | ||
|
|
There was a problem hiding this comment.
SPA の依存表記とマトリクス表記を揃えてください
Line 134 で SPA に Biome を追加していますが、同ファイルの Line 121-122（4.1 マトリクス）は SPA の lint/format が - のままです。読者向けにどちらかへ統一してください。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/tool-catalog.md` around lines 129 - 137, The SPA dependency list ("SPA
(React + Vite)" row) includes "Biome" but the 4.1 matrix still shows SPA's
lint/format as "-" causing an inconsistency; update the 4.1 マトリクス entry for the
SPA column so the lint/format cell reflects Biome (or alternatively remove Biome
from the "SPA (React + Vite)" row) to make the two places consistent—search for
the "SPA (React + Vite)" row and the "4.1 マトリクス" lint/format cell and align them
so both reference the same lint/format tool (Biome if you keep it).
PR レビュー: docs: Next.js / SPA 推奨ライブラリを拡充・統一全体的に実用的なガイドの拡充で方向性は良好です。以下、気になった点を共有します。 バグ: format:check スクリプトが実際にはチェックではなくフォーマットを実行するファイル: 現状の記述:
修正案: CLAUDE.md の Quality Gates でも 注意: Biome 2.0 での organizeImports の設定構造ファイル: Biome 2.0 では {
"assist": {
"actions": {
"source": {
"organizeImports": "on"
}
}
}
}注意: satisfies z.ZodType パターンがコンパイルエラーになる可能性ファイル:
提案: SUPABASE_SERVICE_ROLE_KEY へのセキュリティ注記ファイル:
良い点
まとめ
Reviewed by Claude Sonnet 4.6 |
There was a problem hiding this comment.
♻️ Duplicate comments (1)
docs/tool-catalog.md (1)
121-122:⚠️ Potential issue | 🟡 Minorマトリクス表記を更新して Biome を反映してください
Line 134 で SPA (React + Vite) に
Biomeを追加していますが、この 4.1 マトリクスの SPA 列ではリンターとフォーマッターが依然として-のままです。SPA の lint/format ツールをBiomeに更新して整合性を保ってください。🔧 Proposed fix
-| **リンター** | ESLint | ESLint + next lint | ESLint | - | - | very_good_analysis | - | -| **フォーマッター** | Prettier | Prettier | Prettier | - | - | dart format | - | +| **リンター** | ESLint | ESLint + next lint | ESLint | Biome | - | very_good_analysis | - | +| **フォーマッター** | Prettier | Prettier | Prettier | Biome | - | dart format | - |🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/tool-catalog.md` around lines 121 - 122, Update the 4.1 matrix so the SPA (React + Vite) column reflects Biome for both linting and formatting: in the table rows labeled **リンター** and **フォーマッター** (the two rows shown in the diff), replace the `-` entries under the SPA column with `Biome` so the SPA column matches the SPA (React + Vite) note on line 134.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@docs/tool-catalog.md`:
- Around line 121-122: Update the 4.1 matrix so the SPA (React + Vite) column
reflects Biome for both linting and formatting: in the table rows labeled
**リンター** and **フォーマッター** (the two rows shown in the diff), replace the `-`
entries under the SPA column with `Biome` so the SPA column matches the SPA
(React + Vite) note on line 134.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 630dd763-ff20-47e7-9062-2c7191ee17ee
📒 Files selected for processing (2)
docs/setup/web-app-nextjs.mddocs/tool-catalog.md
🚧 Files skipped from review as they are similar to previous changes (1)
- docs/setup/web-app-nextjs.md
|
コードレビュー: ドキュメントの充実化という方向性は良いです。要修正点: (1) format:check で biome ci . の使用を推奨 (2) lint-staged.config.js の CJS/ESM 問題。検討事項: Partial の型安全性、インストールコマンドの重複、Vercel Analytics のコスト注記。良い点: Biome 統一、@t3-oss/env-nextjs 説明が明確、react-hook-form+Zod 実装例が実用的。Reviewed with Claude Code |
コードレビュードキュメントの充実化・統一化という方向性は良く、全体的に分かりやすい構成になっています。いくつか修正・検討を要する点を指摘します。 🔴 要修正1. format:check スクリプトが CI で機能しない可能性 (spa-react-vite.md)
CI で format チェックを行うには以下のいずれかを使用してください：
修正案： {
"check": "biome check .",
"check:fix": "biome check --write .",
"lint": "biome lint .",
"format": "biome format --write .",
"format:check": "biome ci ."
}2. lint-staged.config.js が Vite プロジェクトで動作しない可能性 (spa-react-vite.md)現在のサンプルは CommonJS 形式 ( 以下のいずれかを推奨します：
// lint-staged.config.js
export default {
'*.{ts,tsx,js,jsx,json,css}': ['biome check --write --no-errors-on-unmatched'],
'*.{md,yml,yaml}': ['biome format --write --no-errors-on-unmatched'],
};🟡 検討事項3. satisfies z.ZodType<Partial> パターンの正確性 (web-app-nextjs.md)Supabase の type Insert = Database['public']['Tables']['users']['Insert'];
const UserInsertSchema = z.object({
email: z.string().email(),
name: z.string().min(1),
}) satisfies z.ZodType<Partial<Insert>>;4. @t3-oss/env-nextjs インストールコマンドの重複 (web-app-nextjs.md)直前の Zod セクションで 5. @vercel/analytics のコスト注記 (web-app-nextjs.md)
Vercel Analytics は Free プランでは月間イベント数に上限があります。大規模プロダクションでは課金が発生しうるため、注記または公式プランページへのリンクを追記することを推奨します。 ✅ 良い点
まとめドキュメントの方向性・内容は概ね良質です。 🤖 Reviewed with Claude Code |
|
🎉 This PR is included in version 1.84.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
1 participant
概要
Next.js と SPA (React + Vite) のセットアップガイドに不足していたライブラリを追加し、Biome の推奨を両ガイドで統一します。
変更内容
Next.js セットアップガイド（
docs/setup/web-app-nextjs.md）src/env.tsテンプレートlayout.tsxに2行追加で Core Web Vitals を自動収集SPA (React + Vite) セットアップガイド（
docs/setup/spa-react-vite.md）noConsoleルールを含むbiome.jsonテンプレートを追加lint-staged設定を Biome 用に更新ツールカタログ（
docs/tool-catalog.md）テスト
🤖 Generated with Claude Code
Summary by CodeRabbit