next-best-practices

Review Next.js App Router files for RSC boundaries and async API correctness.

Updated Apr 27, 2026
One-click install
npx skills add https://github.com/zooroy/appt-system --skill next-best-practices-zooroy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/zooroy/appt-system/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/zooroy/appt-system --skill next-best-practices-zooroy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents common Next.js App Router mistakes by giving consistent rules for RSC boundaries, async APIs, error handling, routing conventions, and performance/optimization practices.

Core Features & Use Cases

  • Enforces App Router file conventions: Clarifies where special files like page.tsx, layout.tsx, route.ts, and parallel/intercepting route files belong, reducing routing bugs.
  • Detects RSC boundary violations: Guards against invalid async client components and non-serializable server-to-client props that cause runtime failures.
  • Standardizes modern Next.js patterns: Covers async params/searchParams, server vs route handler responsibilities, navigation/error behavior, metadata/OG image setup, and optimization for images/fonts/scripts/bundling.

Quick Start

Ask an AI to review a specific Next.js file or folder for RSC boundary issues, async API correctness, and metadata/image optimization compliance, then return a prioritized list of fixes.

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 boundary violations in Next.js App Router?

Fix RSC boundary violations by ensuring client components are not async and server-to-client props remain serializable. This prevents runtime failures by guiding correct React Server Component boundaries in your Next.js App Router projects.

Why are my async params, cookies, or headers causing errors in Next.js route handlers?

Async request APIs in Next.js require applying specific rules for handling params, cookies, and headers. Standardizing these modern Next.js patterns ensures correct server and route handler responsibilities without runtime errors.

What is the correct way to set up metadata and OG images in Next.js App Router?

Next.js metadata and OG image setup requires proper file conventions and route handler usage. Standardizing these patterns ensures correct configuration for metadata generation and social sharing images within your App Router project.

How do I optimize images, fonts, and scripts for performance in Next.js?

Optimize Next.js performance by applying rules for images, fonts, scripts, and bundling. This Skill guides correct implementation of these performance optimizations to ensure faster loading and safer code execution.

Can I use this to check my Next.js file conventions for routing bugs?

Yes, it clarifies where special files like page.tsx, layout.tsx, and route.ts belong. Enforcing App Router file conventions reduces routing bugs by guiding correct placement of parallel and intercepting route files.

What are the limitations when handling navigation and error behavior in Next.js?

Limitations arise from improper error and navigation handling in Next.js App Router. Applying Next.js-specific rules for error boundaries and navigation behavior ensures compatible runtime and package usage while preventing production bugs.