skills.rest
Divith123
Divith123COMMUNITY
Explore all skills by this author →
Website𝕏@divith_selvamGitHub

next-best-practices

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing correct Next.js code requires tracking many evolving rules: async request APIs in v15+, Server/Client Component boundaries, middleware-to-proxy renames in v16, and optimization patterns for images, fonts, and scripts. This Skill consolidates those rules so code is written or reviewed correctly the first time. ## 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. - Modern API Guidance: Covers Next.js 15+ async params, searchParams, cookies(), and headers(), plus the v16 middleware-to-proxy rename. - Data & Rendering Patterns: Provides decision trees for Server Components vs Server Actions vs Route Handlers, and techniques to eliminate data waterfalls with Promise.all, Suspense, and preload. - Use Case: When building a dashboard page, use this Skill to structure parallel data fetching with Suspense boundaries, generate dynamic OG images with next/og, and configure output: 'standalone' for Docker self-hosting. ## Quick Start Review my Next.js page component for best practice violations and fix any RSC boundary or data fetching 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 params errors 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 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 to a Client Component fail in Next.js?▼

Props crossing the Server-to-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 a proxy() export and proxyConfig object, but capabilities remain the same. Run npx @next/codemod@latest upgrade to auto-rename existing middleware 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 fallback={...}> so the rest of the page stays statically rendered.

How do I deploy Next.js with Docker outside Vercel?▼

Set output: 'standalone' in next.config.js to produce a minimal server.js with only production dependencies. Copy .next/static and public/ separately, and configure a custom cache handler like Redis for ISR when running multiple instances.

Related Skills

Explore More Software Engineering Skills→
shazilk-devshazilk-dev

nextjs-frontend

Generate a Next.js 16 frontend scaffold with App Router, TypeScript, and Tailwind CSS.

Community
Intermediate
smbcloudXYZsmbcloudXYZ
7

smbcloud-deploy-nextjs

Deploy Next.js standalone builds to smbCloud via rsync, PM2, and Nginx.

Official
Advanced
capaas2capaas2

performance-profiling

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

Community
Intermediate
zenbuappszenbuapps

react-router-v7

Implement React Router v7 Data Mode routing with loaders and actions.

Official
Advanced