nextjs-app-router-data-fetching
PassUse when working on Next.js App Router route handlers, caching, search params, or navigation/redirect patterns.
(0)
0stars
0downloads
3views
Install Skill
Skills are third-party code from public GitHub repositories. SkillHub scans for known malicious patterns but cannot guarantee safety. Review the source code before installing.
Install globally (user-level):
npx skillhub install Sherloock/LoopTimer/nextjs-app-router-data-fetchingInstall in current project:
npx skillhub install Sherloock/LoopTimer/nextjs-app-router-data-fetching --projectSuggested path: ~/.claude/skills/nextjs-app-router-data-fetching/
SKILL.md Content
---
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`