skills.rest
alecanche04-cyber
alecanche04-cyberCOMMUNITY
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 Apr 14, 2026
Search Tags:#code review#best practices#react#optimization#next.js#server components#app router
One-click install
npx skills add https://github.com/alecanche04-cyber/examenprograma --skill next-best-practices-alecanche04-cyber
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/alecanche04-cyber/examenprograma/tree/main/EXAMEN_PROGRA_2-master/.agents/skills/next-best-practices
Command: npx skills add https://github.com/alecanche04-cyber/examenprograma --skill next-best-practices-alecanche04-cyber

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing and reviewing Next.js code requires keeping track of many evolving conventions—async APIs in v15+, Server/Client Component boundaries, middleware renames in v16, and optimization rules for images, fonts, and scripts. This Skill consolidates those rules so code follows current Next.js best practices without memorizing every documentation page. ## Core Features & Use Cases - RSC Boundary Validation: Detects invalid patterns like async Client Components and non-serializable props (Date, Map, class instances) passed across the Server/Client boundary. - Async API Migration Guidance: Covers Next.js 15+ async params, searchParams, cookies(), and headers(), including the official codemod command. - Optimization Rules: Enforces next/image, next/font, and next/script usage with correct configuration for remote images, responsive sizes, and third-party scripts. - Use Case: When reviewing a pull request that fetches data in a Client Component with useEffect, apply the data-patterns rules to refactor it into a Server Component fetch or a Server Action, eliminating the client-server waterfall. ## Quick Start Review my Next.js page component and apply the best practices for async params, image optimization, and 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 handle async params in Next.js 15?▼

In Next.js 15+, params and searchParams are Promises that must be awaited. Type them as Promise<{ slug: string }> and await them in pages, layouts, route handlers, and generateMetadata. Run npx @next/codemod@latest next-async-request-api to migrate automatically.

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

Use Server Actions for mutations triggered from your UI, such as 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 to a Client Component fail in Next.js?▼

Props crossing the Server/Client boundary must be JSON-serializable, and Date objects are not. Serialize with .toISOString() on the server and reconstruct with new Date() inside the Client Component. The same rule applies to Map, Set, and class instances.

Does Next.js middleware still work in version 16?▼

In Next.js 16, middleware.ts is renamed to proxy.ts with the same capabilities. The exported function becomes proxy() and the config export becomes proxyConfig. Run npx @next/codemod@latest upgrade to auto-rename existing files.

Why does useSearchParams cause my whole page to client-render?▼

useSearchParams triggers a client-side rendering bailout in static routes unless wrapped in a Suspense boundary. Wrap the component using it in <Suspense> with a fallback so the rest of the page stays statically rendered.

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

Hydration errors come from browser-only APIs, dates rendered in different timezones, random values, or invalid HTML nesting. Gate browser APIs behind a mounted check, render dates on the client only, use useId for IDs, and fix invalid nesting like div inside p.

Related Skills

Explore More Software Engineering Skills→
EdgeHuntEdgeHunt

ck:web-frameworks

Scaffold Next.js App Router projects within a Turborepo monorepo.

Official
Intermediate
MolcajeteAIMolcajeteAI
2

nextjs-deployment

Configure Next.js deployments across Vercel, Netlify, Cloudflare Pages, Docker, and AWS Amplify.

Official
Advanced
nayukatanayukata

inspect-nextjs-runtime

Query MCP tools to inspect Next.js runtime errors, logs, and metadata.

Community
Advanced
abereghiciabereghici

lifecycle/migrate-from-react-router

Migrate React Router v7 projects to TanStack Router route definitions and navigation APIs.

Community
Intermediate