nextjs-best-practices

Guide Next.js 13+ App Router projects in separating server and client components.

4|Updated Jan 23, 2026

Search Tags:#react #nextjs #app-router #server-components #data-fetching #routing-patterns

Ready to run

npx skills add https://github.com/marcusagm/Mundam --skill nextjs-best-practices-marcusagm

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers adopt Next.js App Router best practices, reducing ambiguity around server vs client components, data fetching strategies, and routing patterns, resulting in more maintainable and scalable apps.

Core Features & Use Cases

Server/Client Component guidance: decide when to use server components vs client components to optimize performance and UX.
Data Fetching & Routing Patterns: recommended patterns for layout and route organization, caching, and ISR.
Use Case: When starting a new Next.js project or refactoring an app with App Router, ensure consistent architecture and performance.

Quick Start

Start by auditing your app for server vs client components and apply the default rule: server components for data fetching and static content; client components for interactivity. Document your routing structure and data-fetching patterns following the guidance in this skill.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema

When should I use server components versus client components in Next.js App Router?▼

Use server components by default for data fetching and static content in Next.js App Router, and switch to client components only when user interactivity is required. This separation optimizes performance and user experience.

How do I organize routing and data fetching patterns in Next.js 13+?▼

Organize routing and data fetching in Next.js 13+ by applying recommended patterns for layout and route organization. Structure your architecture around server-side data fetching, caching, and ISR to ensure scalable apps.

What is the best way to start refactoring an app with Next.js App Router?▼

The best way to start refactoring with Next.js App Router is auditing your app for server versus client components. Apply the default server component rule, then document your routing structure and data-fetching patterns.

Does this Next.js App Router guidance apply to my existing project?▼

This guidance applies to projects using Next.js 13+ with App Router across routes, layouts, and data fetching scenarios. It suits both new projects and refactoring existing apps for consistent architecture.

Why does separating server and client concerns reduce ambiguity in Next.js?▼

Separating server and client concerns reduces ambiguity around data fetching strategies and routing patterns. It enforces clear component boundaries, resulting in more maintainable and scalable Next.js applications.