skills.rest
MaiconGambini
MaiconGambiniCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Guides Next.js App Router development with Server Components, data fetching, and routing patterns.

Updated Jul 29, 2026
Search Tags:#caching#react#routing#data fetching#nextjs#server components#app router
One-click install
npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-best-practices-maicongambini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/MaiconGambini/opencode-harness-guide/tree/main/skills/nextjs-best-practices
Command: npx skills add https://github.com/MaiconGambini/opencode-harness-guide --skill nextjs-best-practices-maicongambini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Next.js applications often struggle with deciding between Server and Client Components, choosing the right data fetching strategy, and structuring routes correctly, leading to bloated client bundles and poor performance. ## Core Features & Use Cases - Component Architecture Guidance: Decision trees and tables for choosing Server vs Client Components, with rules for splitting interactive UI from data-fetching logic. - Data Fetching & Caching Patterns: Reference tables covering static rendering, ISR revalidation, no-store dynamic fetching, and on-demand revalidation with revalidatePath/revalidateTag. - Routing & Project Structure: Conventions for page.tsx, layout.tsx, loading.tsx, error.tsx, route groups, parallel routes, intercepting routes, and API route handlers. - Use Case: When building a dashboard page, use this Skill to structure a Server Component that fetches data directly, wrap interactive widgets in Client Components, add loading.tsx and error.tsx boundaries, and configure time-based revalidation. ## Quick Start Ask the AI to review your Next.js App Router page and recommend whether each component should be a Server or Client Component with the appropriate data fetching strategy.

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 the component needs useState, useEffect, or event handlers. For mixed needs, split into a Server parent with a Client child.

What data fetching strategy should I use in Next.js App Router?▼

Next.js defaults to static fetching cached at build time. Use the revalidate option for time-based ISR, or no-store for dynamic per-request data. On-demand revalidation is available via revalidatePath and revalidateTag.

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

Server Actions fit 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 explicitly.

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.

How do route groups and parallel routes work in Next.js?▼

Route groups using (name) organize files without affecting the URL path. Parallel routes using @slot render multiple pages at the same level, and intercepting routes with (.) enable modal overlays.

Related Skills

Explore More Software Engineering Skills→
kirillshilinkirillshilin

shai-scaffold-nextjs-app

Automate Next.js App Router project scaffolding with TypeScript and Tailwind.

Community
Advanced
auldsyababuaauldsyababua
6

cicd-pipeline-generator

Generate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.

Community
Advanced
MakisuoMakisuo
1.6k

react-doctor

Detect React codebase quality regressions and return a numeric health score.

Community
Advanced
crewrigcrewrig
20

astro

Review Astro framework code and project configuration for correctness.

Official
Advanced