docs: Next.js / SPA 推奨ライブラリを拡充・統一 #527
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -128,6 +128,144 @@ npx @biomejs/biome migrate prettier | |
| - `prettier`, `eslint-config-prettier` | ||
| - `eslint.config.mjs` / `.eslintrc.*` / `.prettierrc*` | ||
|
|
||
| ## バリデーション & 型安全 | ||
|
|
||
| ### Zod（スキーマバリデーション） | ||
|
|
||
| ```bash | ||
| npm install zod | ||
| ``` | ||
|
|
||
| API レスポンス・フォーム入力・環境変数の検証を一元化する。Supabase の型と組み合わせて使う。 | ||
|
|
||
| **基本的な使い方**: | ||
|
|
||
| ```typescript | ||
| import { z } from 'zod'; | ||
|
|
||
| // スキーマ定義 | ||
| const UserSchema = z.object({ | ||
| id: z.string().uuid(), | ||
| email: z.string().email(), | ||
| name: z.string().min(1).max(100), | ||
| }); | ||
|
|
||
| type User = z.infer<typeof UserSchema>; | ||
|
|
||
| // API Route でのバリデーション | ||
| export async function POST(req: Request) { | ||
| const body = await req.json(); | ||
| const result = UserSchema.safeParse(body); | ||
|
|
||
| if (!result.success) { | ||
| return Response.json({ errors: result.error.flatten() }, { status: 400 }); | ||
| } | ||
|
|
||
| // result.data は型安全 | ||
| const user = result.data; | ||
| } | ||
| ``` | ||
|
|
||
| **Supabase の型と組み合わせる**: | ||
|
|
||
| ```typescript | ||
| import { z } from 'zod'; | ||
| import type { Database } from '@/lib/supabase/types'; | ||
|
|
||
| type Row = Database['public']['Tables']['users']['Row']; | ||
|
|
||
| // DB の型から Zod スキーマを構築 | ||
| const UserInsertSchema = z.object({ | ||
| email: z.string().email(), | ||
| name: z.string().min(1), | ||
| }) satisfies z.ZodType<Partial<Row>>; | ||
| ``` | ||
|
|
||
| ### @t3-oss/env-nextjs（環境変数の型安全化） | ||
|
|
||
| ```bash | ||
| npm install @t3-oss/env-nextjs zod | ||
| ``` | ||
|
|
||
| `.env` の未設定・型ミスをビルド時に検知する。`process.env.XXX` の生アクセスを禁止し、型付き `env` オブジェクト経由に統一する。 | ||
|
|
||
| **`src/env.ts`**: | ||
|
|
||
| ```typescript | ||
| import { createEnv } from '@t3-oss/env-nextjs'; | ||
| import { z } from 'zod'; | ||
|
|
||
| export const env = createEnv({ | ||
| server: { | ||
| SUPABASE_SERVICE_ROLE_KEY: z.string().min(1), | ||
| SENTRY_AUTH_TOKEN: z.string().optional(), | ||
| }, | ||
| client: { | ||
| NEXT_PUBLIC_SUPABASE_URL: z.string().url(), | ||
| NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1), | ||
| NEXT_PUBLIC_SENTRY_DSN: z.string().url().optional(), | ||
| }, | ||
| runtimeEnv: { | ||
| SUPABASE_SERVICE_ROLE_KEY: process.env.SUPABASE_SERVICE_ROLE_KEY, | ||
| SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN, | ||
| NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL, | ||
| NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, | ||
| NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| > `next.config.ts` で `import './src/env'` を追加するとビルド時に検証が走る。 | ||
|
|
||
| ## フォーム管理（react-hook-form + Zod） | ||
|
|
||
| ```bash | ||
| npm install react-hook-form @hookform/resolvers zod | ||
| ``` | ||
|
|
||
| フォームバリデーションを Zod スキーマで統一し、型安全なフォームを実装する。 | ||
|
|
||
| **基本的な使い方**: | ||
|
|
||
| ```typescript | ||
| 'use client'; | ||
|
|
||
| import { useForm } from 'react-hook-form'; | ||
| import { zodResolver } from '@hookform/resolvers/zod'; | ||
| import { z } from 'zod'; | ||
|
|
||
| const schema = z.object({ | ||
| email: z.string().email('有効なメールアドレスを入力してください'), | ||
| password: z.string().min(8, '8文字以上で入力してください'), | ||
| }); | ||
|
|
||
| type FormValues = z.infer<typeof schema>; | ||
|
|
||
| export function LoginForm() { | ||
| const { | ||
| register, | ||
| handleSubmit, | ||
| formState: { errors, isSubmitting }, | ||
| } = useForm<FormValues>({ resolver: zodResolver(schema) }); | ||
|
|
||
| const onSubmit = async (data: FormValues) => { | ||
| // data は型安全 | ||
| }; | ||
|
|
||
| return ( | ||
| <form onSubmit={handleSubmit(onSubmit)}> | ||
| <input {...register('email')} /> | ||
| {errors.email && <p>{errors.email.message}</p>} | ||
| <input type="password" {...register('password')} /> | ||
| {errors.password && <p>{errors.password.message}</p>} | ||
| <button type="submit" disabled={isSubmitting}> | ||
| ログイン | ||
| </button> | ||
| </form> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Knip（未使用コード検出） | ||
|
|
||
| 未使用の依存関係・ファイル・export を検出する **Knip を推奨**する。 | ||
|
|
@@ -464,6 +602,38 @@ export async function GET() { | |
|
|
||
| 詳細な設定は [Sentry セットアップガイド](../sentry-setup-guide.md) を参照。 | ||
|
|
||
| ### @vercel/analytics + @vercel/speed-insights（アナリティクス） | ||
|
|
||
| ```bash | ||
| npm install @vercel/analytics @vercel/speed-insights | ||
| ``` | ||
|
|
||
| Vercel デプロイなら追加コスト・設定なしで Core Web Vitals とページビューを収集できる。 | ||
|
|
||
| **`app/layout.tsx` に2行追加するだけ**: | ||
|
|
||
| ```typescript | ||
| import { Analytics } from '@vercel/analytics/react'; | ||
| import { SpeedInsights } from '@vercel/speed-insights/next'; | ||
|
|
||
| export default function RootLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <html lang="ja"> | ||
| <body> | ||
| {children} | ||
| <Analytics /> | ||
| <SpeedInsights /> | ||
| </body> | ||
| </html> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| | コンポーネント | 収集データ | | ||
| | ------------------- | ------------------------------------------ | | ||
| | `<Analytics />` | ページビュー・ユニークビジター・リファラー | | ||
| | `<SpeedInsights />` | LCP / FID / CLS 等の Core Web Vitals | | ||
|
|
||
|
Comment on lines
+632
to
+636
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:
💡 Result:
Citations:
Update Core Web Vitals metrics to current definition Line 529 references Reference: https://web.dev/blog/inp-cwv 🤖 Prompt for AI Agents |
||
| ### ロギング設計指針 | ||
|
|
||
| | ツール | 用途 | 環境 | | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
削除ガイダンスの適用スコープを明記してください
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