AgentSkillsCN

nextjs-app-router-data-fetching

在处理 Next.js 应用程序路由处理器、缓存、查询参数,或导航/重定向模式时使用。

SKILL.md
--- frontmatter
name: nextjs-app-router-data-fetching
description: Use when working on Next.js App Router route handlers, caching, search params, or navigation/redirect patterns.

Checklist

  • Route handlers live in app/api/**/route.ts.
  • Validate inputs (Zod) and enforce auth server-side.
  • Prefer minimal payloads; avoid over-fetching.

Search params rule

  • If using useSearchParams(), wrap it in a Suspense boundary (separate component + <Suspense fallback={...}>) to avoid build/runtime issues.

Caching / performance

  • Use code splitting (next/dynamic) for non-critical UI where it improves initial load.
  • Keep client components lean; move heavy work server-side when possible.

Repo references

  • Navigation utilities: lib/navigation.ts
  • Routes constants: lib/constants/routes.ts