skills.rest
raulisai
raulisaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing and reviewing Next.js code often leads to subtle bugs: invalid async client components, non-serializable props crossing server/client boundaries, hydration mismatches, missing Suspense boundaries, and misconfigured images or fonts. This Skill provides structured guidance to detect and fix these issues while enforcing project-specific rules like multi-tenant auth boundaries. ## Core Features & Use Cases - RSC Boundary Validation: Detects invalid patterns such as async client components, non-serializable props (Date, Map, class instances), and incorrect Server Action usage. - Data Fetching Patterns: Guides selection between Server Components, Server Actions, and Route Handlers, and prevents data waterfalls with Promise.all, Suspense, and preload patterns. - Optimization & Debugging: Covers image/font optimization, metadata and OG image generation, hydration error fixes, bundling issues, self-hosting with Docker, and MCP-based dev server debugging. - Use Case: When building a Next.js 15+ dashboard page, use this Skill to correctly await async params, wrap useSearchParams in Suspense, configure remote image patterns, and avoid try-catch around redirect() in Server Actions. ## Quick Start Review my Next.js page component for RSC boundary violations, async API usage, and data fetching best practices.

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 data in a parent Server Component, and pass the result down as props. Alternatively, use React's use() hook for consuming promises in synchronous client components.

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

In Next.js 15+, params, searchParams, cookies(), and headers() are asynchronous. Type them as Promise<...> and await them in pages, layouts, and route handlers. Run npx @next/codemod@latest next-async-request-api to migrate automatically.

When should I use Server Actions vs Route Handlers?▼

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 my Next.js modal route 404 on refresh?▼

Parallel route slots require a default.tsx file that returns null. Without it, Next.js cannot determine what to render in the slot during hard navigation, causing a 404. Add default.tsx to every @slot folder including nested ones.

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

Props crossing the server-to-client boundary must be JSON-serializable. Date objects, Maps, Sets, and class instances lose their methods. Serialize dates with .toISOString() on the server and reconstruct them in the client component.

How do I deploy Next.js with Docker using multiple instances?▼

Set output: 'standalone' in next.config.js and copy the standalone folder, static assets, and public directory into your container. For multi-instance ISR, configure a custom cache handler backed by Redis or S3 since filesystem caching breaks across instances.

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
lunaticwithaducklunaticwithaduck
2

nextjs

Implements Next.js App Router patterns for rendering, caching, data fetching, and deployment.

Community
Advanced
ArthTech-AIArthTech-AI

qa

Run full-stack QA checks with pytest, Jest, ruff, TypeScript, and Playwright.

Official
Intermediate
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate