skills.rest
ENG-BXI
ENG-BXICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

Enforce Next.js 15+ conventions for Server/Client boundaries, async APIs, and routing.

1|Updated Jan 28, 2026
Search Tags:#performance#metadata#nextjs#code-review#hydration#route-handlers#rsc-boundaries
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill next-best-practices-eng-bxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill next-best-practices-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents common Next.js implementation mistakes that cause broken routing, hydration issues, inefficient bundling, SEO regressions, and incorrect Server/Client usage.

Core Features & Use Cases

  • React Server Component (RSC) boundary validation: Identify invalid async Client Components and detect non-serializable props crossing Server → Client.
  • Next.js 15+ async API correctness: Ensure correct handling of async params, searchParams, cookies(), and headers() with the right typings and awaits.
  • Performance and quality guardrails: Enforce best practices for metadata/OG images, next/image and next/font optimization, bundling pitfalls, and hydration-safe patterns.
  • Routing and handler correctness: Confirm file conventions, route handler rules, runtime selection, error handling files, and correct parallel/intercepting route modal behavior.

Quick Start

Apply the next-best-practices ruleset while reviewing a Next.js code change so you catch RSC boundary errors, async API misuse, and routing/SEO regressions before they reach production.

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 async params and cookies errors in Next.js 15?▼

Next.js 15 async APIs require proper awaiting for params, searchParams, cookies, and headers. You must validate that async request APIs use the correct typings and await syntax to prevent runtime errors and data fetching issues.

Why does my Next.js hydration mismatch error occur in Client Components?▼

Hydration mismatches often occur when invalid async Client Components or non-serializable props cross Server to Client boundaries. Diagnose by checking RSC boundaries and ensuring props passed from Server Components are fully serializable.

What's the best way to validate Server and Client Component boundaries in Next.js?▼

Validate RSC boundaries by detecting invalid async Client Components and preventing non-serializable props from crossing Server to Client. This ensures correct rendering behavior and avoids broken component trees.

Can I use parallel and intercepting route modal patterns without routing conflicts in Next.js?▼

Parallel and intercepting route modal patterns require strict validation of file conventions and route handler rules. Ensure correct file structures and handler configurations to prevent routing conflicts and broken modal behavior.

How do I optimize metadata and OG image generation for Next.js SEO?▼

Optimize Next.js metadata and OG images by following supported patterns for generation. Validate implementation to prevent SEO regressions and ensure proper social sharing metadata and image delivery.

What are the limitations of using 'use client' with async components in Next.js?▼

Invalid 'use client' async components break Server/Client boundaries and cause rendering failures. You must check for invalid async Client Components and ensure non-serializable props do not cross RSC boundaries.

Related Skills

Explore More Software Engineering Skills→
baotoqbaotoq
98

nextjs-best-practices

Enforce Next.js App Router best practices for components, data fetching, and routing.

Community
Advanced
anolilabanolilab
214

next-best-practices

Provide architectural and performance guidelines for Next.js 15+ applications.

Official
Advanced
gesmith0606gesmith0606

next-best-practices

Enforce Next.js App Router best practices for file conventions, RSC boundaries, and async patterns.

Community
Advanced
irahardiantoirahardianto
150

Next.js Idioms and Patterns

Enforces idiomatic Next.js App Router patterns for Server Components, caching, and boundaries.

Community
Intermediate