skills.rest
AveryRen
AveryRenCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

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

Updated Mar 17, 2026
Search Tags:#code review#best practices#react#optimization#next.js#server components#app router
One-click install
npx skills add https://github.com/AveryRen/WarpTalk-TestPayment --skill next-best-practices-averyren
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/AveryRen/WarpTalk-TestPayment/tree/main/agent/.agents/skills/next-best-practices
Command: npx skills add https://github.com/AveryRen/WarpTalk-TestPayment --skill next-best-practices-averyren

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Next.js developers frequently encounter subtle bugs and anti-patterns: invalid async client components, non-serializable props crossing RSC boundaries, hydration mismatches, data waterfalls, and misconfigured images, fonts, or scripts. This Skill provides a structured rulebook for writing and reviewing Next.js code correctly across App Router conventions, async APIs, error handling, and deployment. ## Core Features & Use Cases - RSC Boundary Validation: Detects invalid patterns like async client components and non-serializable props (Date, Map, class instances) passed from Server to Client Components. - Data Pattern Guidance: Helps choose between Server Components, Server Actions, and Route Handlers, and avoid waterfalls with Promise.all, Suspense, and preload patterns. - Optimization Rules: Covers next/image, next/font, next/script, metadata/OG image generation, bundling fixes, and self-hosting with standalone output and cache handlers. - Use Case: When reviewing a Next.js 15+ page that fetches data sequentially and passes a Date object to a client component, use this Skill to identify the waterfall, fix the serialization issue, and apply async params conventions. ## Quick Start Review my Next.js page component for best practice violations and suggest fixes for data fetching and RSC boundary issues.

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 client component errors in Next.js?▼

Client components cannot be async functions. Remove the async keyword, fetch the data in a parent Server Component, and pass the result down as props. Alternatively, use React's use() hook to unwrap promises in synchronous client components.

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

Use Server Actions for mutations triggered from your UI like form submissions, since they offer type safety and progressive enhancement. Use Route Handlers for external webhooks, public REST APIs, and GET endpoints that need HTTP caching.

Why does passing a Date object to a client component fail?▼

Props crossing the Server-to-Client boundary must be JSON-serializable, and Date objects lose their methods during serialization. Convert dates with .toISOString() on the server and reconstruct them with new Date() on the client.

How do I fix hydration mismatch errors in Next.js?▼

Hydration errors come from browser-only APIs, timezone-dependent dates, random values, or invalid HTML nesting. Render browser-dependent content only after mounting with useEffect, use the useId hook for IDs, and ensure valid HTML structure.

Does Next.js 15 require awaiting params and searchParams?▼

Yes, in Next.js 15+ params, searchParams, cookies(), and headers() are asynchronous. Type them as Promise<...> and await them, or use React's use() hook in synchronous components. A codemod is available via npx @next/codemod@latest next-async-request-api.

How do I deploy Next.js with Docker using standalone output?▼

Set output: 'standalone' in next.config.js to generate a minimal server.js with only production dependencies. Copy .next/static and public folders separately, and configure a custom cache handler like Redis for multi-instance ISR deployments.

Related Skills

Explore More Software Engineering Skills→
Coverage-CreativesCoverage-Creatives

Next.js Project Setup

Initialize and configure Next.js projects with App Router, TypeScript, and Tailwind CSS.

Official
Intermediate
openaiopenai
5.3k

nextjs

Guides building, debugging, and architecting Next.js App Router applications with best practices.

Official
Advanced
capaas2capaas2

performance-profiling

Identify web application performance bottlenecks using Lighthouse and Core Web Vitals.

Community
Intermediate
Albo-ClubAlbo-Club

start-core

Configure TanStack Start projects with server functions, middleware, auth, and deployment patterns.

Official
Advanced