nextjs-best-practices

Review Next.js App Router routes for Server and Client component usage.

70|42|Updated Mar 27, 2026

Search Tags:#caching #routing #next.js #metadata #app-router #server-components #data-fetching

Ready to run

npx skills add https://github.com/tranhieutt/software_development_department --skill nextjs-best-practices-tranhieutt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/tranhieutt/software_development_department/tree/main/.claude/skills/nextjs-best-practices
Command: npx skills add https://github.com/tranhieutt/software_development_department --skill nextjs-best-practices-tranhieutt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear, referenceable guidance for using Next.js App Router features correctly so teams avoid mixing client/server responsibilities, misconfiguring data fetching, or missing metadata and caching requirements.

Core Features & Use Cases

Server vs Client Decisions: Walks through the decision tree for when to mark components as client-only versus keeping them server-default.
Data, Routing, and API Patterns: Summaries for fetching strategies, route conventions, API handlers, and caching layers that match Next.js recommendations.
Performance and Server Actions: Reinforces image optimization, metadata best practices, and typed server actions to keep builds fast and reliable.

Quick Start

Align the new page's Server vs Client component split, data fetching approach, and route layout with these Next.js best practices.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema

How do I decide between using Server Components and Client Components in the Next.js App Router?▼

Use a decision tree to differentiate Next.js App Router components: keep components server-default for data fetching, and mark them client-only when handling user interactivity dependencies.

What are the best practices for data fetching and caching in Next.js App Router?▼

Next.js App Router data fetching and caching best practices involve using appropriate fetching strategies, applying revalidation directives, and configuring caching layers to match Next.js recommendations for optimal route performance.

How should I structure route handlers and API endpoints in a Next.js app directory?▼

Structure Next.js app directory route handlers by following routing conventions, returning correct route handler status codes, and implementing Zod validation to ensure reliable API endpoint definitions.

What are common Next.js Server Action anti-patterns to avoid during development?▼

Common Next.js Server Action anti-patterns include misconfiguring typed server actions and ignoring metadata requirements, which can degrade performance and bypass established server-side validation boundaries.

How do I configure metadata and image optimization for Next.js marketing sites or dashboards?▼

Configure Next.js metadata and image optimization by following specific image metadata guidelines and performance optimization techniques to maintain fast, reliable builds across marketing sites and internal tooling.