skills.rest
RobinMillford
RobinMillfordCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Applies Next.js App Router principles for components, data fetching, routing, and caching.

Updated Apr 5, 2026
Search Tags:#caching#react#routing#data fetching#nextjs#server components#app router
One-click install
npx skills add https://github.com/RobinMillford/GopherNotebook --skill nextjs-best-practices-robinmillford
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/RobinMillford/GopherNotebook/tree/main/.claude/skills/nextjs-best-practices
Command: npx skills add https://github.com/RobinMillford/GopherNotebook --skill nextjs-best-practices-robinmillford

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Next.js applications often misuse Client Components, mishandle data fetching and caching, or structure routes inconsistently, leading to bloated bundles and poor performance. This Skill provides a structured reference of App Router principles to guide correct architectural decisions. ## Core Features & Use Cases - Server vs Client Component Guidance: Decision trees and tables for choosing between Server Components and 'use client' boundaries. - Data Fetching & Caching Patterns: Covers static rendering, ISR revalidation, no-store dynamic fetching, and on-demand revalidation with revalidatePath/revalidateTag. - Routing & Project Structure: Documents file conventions (page.tsx, layout.tsx, loading.tsx, error.tsx), route groups, parallel routes, and intercepting routes. - Use Case: When building a new dashboard page in a Next.js app, use this Skill to decide where to fetch data, how to structure layouts, and which caching strategy to apply. ## Quick Start Review my Next.js App Router page and tell me whether it should be a Server or Client Component and how to fetch its data.

Frequently Asked Questions about nextjs-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between Server and Client Components in Next.js?▼

Use Server Components by default for data fetching, layouts, and static content. Add 'use client' only when you need useState, useEffect, or event handlers. If both are needed, split into a Server parent with a Client child.

How does data fetching and caching work in the Next.js App Router?▼

Fetch in Server Components with three strategies: static caching at build time by default, time-based ISR via the revalidate option, or no-store for dynamic per-request data. On-demand revalidation uses revalidatePath or revalidateTag.

What are route groups and parallel routes in Next.js?▼

Route groups use (name) folders to organize routes without affecting the URL. Parallel routes use @slot folders to render multiple pages in the same layout, and intercepting routes with (.) enable modal overlays.

When should I use Server Actions in Next.js?▼

Use Server Actions for form submissions, data mutations, and revalidation triggers. Mark functions with 'use server', validate all inputs with a library like Zod, return typed responses, and handle errors gracefully.

What are common Next.js App Router anti-patterns to avoid?▼

Avoid adding 'use client' everywhere, fetching data in client components, skipping loading.tsx and error.tsx boundaries, and shipping large client bundles. Prefer Server Components by default and dynamic imports for heavy components.

Related Skills

Explore More Software Engineering Skills→
wsimmondswsimmonds
109

nextjs-app-router-fundamentals

Migrate Next.js Pages Router projects to App Router conventions.

Community
Basic
giosuetedeschi-specgiosuetedeschi-spec

vercel-deployment

Configure environment variables and runtimes for Next.js deployments on Vercel.

Community
Intermediate
Vincri126Vincri126

seo

Run deterministic SEO audits for websites, blogs, and GitHub repositories.

Community
Advanced
TylerbryyTylerbryy
1

react-next-modern

Enforce React 19 and Next.js App Router server-first patterns during code reviews and migrations.

Community
Advanced