next-best-practices

Standardize Next.js App Router file conventions and React Server Component boundaries.

1|Updated May 12, 2026

Search Tags:#performance #caching #routing #next.js #server actions #app router #react server components

Ready to run

npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill next-best-practices-moxywolfllc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/MoxyWolfLLC/moxywolf-plugins/tree/main/plugins/dev-infrastructure-skills/skills/next-best-practices
Command: npx skills add https://github.com/MoxyWolfLLC/moxywolf-plugins --skill next-best-practices-moxywolfllc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js App Router projects often drift into inconsistent file layouts, incorrect React Server Component (RSC) boundaries, and broken patterns for data fetching and async APIs, causing routing bugs, hydration errors, and performance regressions.

Core Features & Use Cases

Route and file conventions: Establishes a consistent app/ structure for layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, and supporting route-handler files.
RSC boundary correctness: Detects when a component must be a Client Component and prevents invalid async behavior in client code.
Data, async, and directive patterns: Guides when to use Server Components vs Server Actions vs Route Handlers, and how to handle Next.js 15+ async APIs like params and searchParams.

Quick Start

Ask an AI to apply Next.js App Router file conventions and RSC boundaries to your desired route by reviewing your current app/ folder structure and recommending the correct layout.tsx, page.tsx, and directive usage.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema

How do I fix React Server Component boundaries and use client directives correctly in Next.js App Router?▼

To fix React Server Component boundaries, enforce valid 'use client', 'use server', and 'use cache' directives to prevent invalid async behavior in client code and resolve hydration errors.

How do I handle async params and searchParams in Next.js 15+ App Router?▼

Handle async params and searchParams in Next.js 15+ by processing them as Promise-based APIs within your server components. This approach satisfies async API requirements and prevents data fetching regressions during route rendering.

What is the correct Next.js App Router file structure for layouts, pages, and error boundaries?▼

The correct Next.js App Router file structure standardizes your app/ directory using layout.tsx, page.tsx, loading.tsx, error.tsx, and not-found.tsx files. Establishing this consistent route file convention prevents routing bugs and structural drift.

When should I use Server Components vs Server Actions vs Route Handlers in Next.js?▼

Use Server Components for data fetching and rendering, Server Actions for mutations, and Route Handlers for API endpoints. Choosing the correct directive pattern prevents broken data fetching and ensures valid non-serializable prop constraints.

Why does my Next.js App Router project have hydration errors and routing bugs?▼

Next.js App Router projects experience hydration errors and routing bugs due to inconsistent file layouts, incorrect React Server Component boundaries, and broken patterns for async APIs. Standardizing route conventions and directive usage resolves these issues.