skills.rest
CAPJackie
CAPJackieCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Enforce Next.js App Router conventions and RSC boundaries in code reviews.

Updated Aug 8, 2024
Search Tags:#performance#routing#metadata#nextjs#code-review#app-router#rsc
One-click install
npx skills add https://github.com/CAPJackie/x --skill next-best-practices-capjackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/CAPJackie/x/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/CAPJackie/x --skill next-best-practices-capjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces bugs and performance regressions by codifying Next.js best practices across App Router conventions, Server/Client boundaries, async data patterns, and production-ready error and routing behavior.

Core Features & Use Cases

  • File conventions & routing correctness: Standardize App Router file roles (layout/page/route handling, parallel routes, intercepting routes) to prevent 404s and inconsistent renders.
  • RSC boundary validation: Detect invalid client patterns (async client components) and unsafe server-to-client prop serialization (non-serializable values).
  • Modern async API usage: Apply Next.js 15+ async request API changes (Promise-based params/searchParams and async cookies/headers) and the recommended migration codemod.
  • Production-grade patterns: Enforce async error handling, correct navigation semantics, and robust runtime selection (Node vs Edge), plus metadata and OG image conventions.
  • Performance hygiene: Prefer next/image and next/font optimizations, avoid hydration mismatches, and apply bundling fixes for server-incompatible packages.
  • API & integration discipline: Use route handlers appropriately (including conflicts with page.tsx) and choose Server Actions vs Route Handlers based on mutation vs public/external needs.

Quick Start

Ask an AI to review a specific Next.js file for App Router correctness using next-best-practices, for example: "Review my app route handler and page.tsx for conflicts, async params/searchParams correctness, RSC boundary issues, and proper error handling."

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 Next.js App Router async params and searchParams errors?▼

Next.js App Router async params and searchParams errors occur because Next.js 15+ requires Promise-based request APIs. You must await Promise params and searchParams in Server Components, applying the recommended migration codemod to enforce correct async-await Promise handling and prevent runtime crashes.

What is the correct way to handle Server and Client Component boundaries in Next.js?▼

Server and Client Component boundaries in Next.js require validating that client components are not async and that server-to-client props contain only serializable values. Enforcing correct directive usage prevents unsafe non-serializable values from crossing boundaries, avoiding hydration mismatches and inconsistent renders.

How do I resolve route handler conflicts with page.tsx in Next.js?▼

Route handler conflicts with page.tsx in Next.js occur when both files define overlapping routes. You must resolve these App Router file convention conflicts by using route handlers for public or external API needs and page.tsx for UI rendering, ensuring correct file roles and routing patterns.

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

Server Actions vs Route Handlers in Next.js depends on your mutation needs. Use Server Actions for internal form mutations and Route Handlers for public or external API endpoints, applying API integration discipline to choose the correct pattern based on whether the endpoint needs external access.

How do I prevent Next.js metadata and OG image generation mistakes?▼

Next.js metadata and OG image generation mistakes are prevented by enforcing production-grade conventions for metadata and OG image generation. Following rule-based guidance ensures correct API usage across App Router layouts and pages, providing deterministic error behaviors and robust runtime selection.

Related Skills

Explore More Software Engineering Skills→
hopeoverturehopeoverture

worldcrafter-route-creator

Scaffold Next.js App Router routes with page, API, loading, and error files.

Community
Basic
djankiesdjankies

migrating-async-request-apis

Migrate Next.js 15 request APIs to async in Next.js 16.

Community
Advanced
JaylaelikeJaylaelike

nextjs-patterns

Consolidate Next.js 15 App Router patterns for pages, routes, and middleware.

Community
Intermediate
daodaoleedaodaolee

next-best-practices

Enforce Next.js best practices for file conventions, RSC boundaries, and data patterns.

Community
Intermediate