nextjs-app-router-patterns
Apply Next.js App Router patterns
App Router features can be hard to structure and choose. This skill provides clear patterns and examples for Next.js 14+ routing, data fetching, and Server Components.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "nextjs-app-router-patterns". Show a simple plan for a product page with streaming and caching.
Expected outcome:
- Use a server component for the product header so it renders first
- Wrap reviews and recommendations in Suspense with loading UI
- Apply tag based revalidation on product fetches for controlled cache refresh
Security Audit
SafePure documentation skill containing only markdown explanations and TypeScript code examples. No executable scripts, network calls, filesystem access, or external commands are implemented. All code is illustrative documentation for Next.js App Router patterns.
Risk Factors
🌐 Network access (11)
⚙️ External commands (23)
🔑 Env variables (2)
Quality Score
What You Can Build
Start an App Router build
Get a clear structure for layouts, loading states, and data fetching in a new Next.js 14+ app.
Plan routing architecture
Design parallel and intercepting routes for dashboards and complex flows with consistent loading UI.
Optimize data fetching
Choose caching and revalidation strategies for product listings and detail pages.
Try These Prompts
Explain the core App Router file conventions and when to use Server Components versus Client Components.
Provide a Server Actions pattern for adding an item to a cart with revalidation and redirect.
Suggest a parallel routes structure with loading states for analytics and team panels.
Recommend caching and revalidation choices for product listings and detail pages with tag invalidation.
Best Practices
- Start with Server Components and add client only when needed
- Colocate data fetching with the component that uses it
- Use Suspense boundaries to enable streaming and clear loading states
Avoid
- Fetching critical data in Client Components without a server fallback
- Over nesting layouts that inflate render trees
- Skipping loading states for slow data sources