skills.rest
Adithiya-S
Adithiya-SCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Applies Next.js App Router best practices when writing or reviewing Next.js code.

Updated Aug 21, 2025
Search Tags:#code review#best practices#web development#react#nextjs#server components#app router
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill next-best-practices-adithiya-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/nextjs/upstream
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill next-best-practices-adithiya-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Next.js 15/16 introduced breaking changes like async request APIs, the middleware-to-proxy rename, and strict RSC boundaries, and developers frequently ship invalid patterns such as async client components, non-serializable props, hydration mismatches, and data waterfalls. ## Core Features & Use Cases - RSC Boundary Validation: Detects invalid async client components and non-serializable props (Date, Map, class instances) passed across server/client boundaries. - Modern API Guidance: Covers async params/searchParams/cookies/headers, error handling with redirect/notFound/forbidden, route handlers vs Server Actions, and parallel/intercepting route modal patterns. - Performance & Optimization: Enforces next/image, next/font, next/script usage, Suspense boundaries, bundle analysis, and self-hosting setups with standalone output and cache handlers. - Use Case: When reviewing a Next.js pull request, apply these rules to catch a client component receiving a Date prop, a missing default.tsx in a parallel route slot, or a GET route handler conflicting with page.tsx. ## Quick Start Review my Next.js app router code for best practice violations and suggest fixes.

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 and searchParams in Next.js 15?▼

Type params and searchParams as Promise<...> and await them inside pages, layouts, and route handlers. For synchronous client components, unwrap them with React.use(). A codemod is available via npx @next/codemod@latest next-async-request-api.

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

Use Server Actions for mutations and form submissions triggered from your UI, since they offer type safety and progressive enhancement. Use Route Handlers for external APIs, webhooks, mobile clients, 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 on refresh or direct URL access.

Can I pass Date objects or functions to client components?▼

No, props crossing the server/client boundary must be JSON-serializable. Convert Date objects with toISOString(), Maps and Sets to objects or arrays, and define event handlers inside the client component or use Server Actions marked with 'use server'.

Why does Next.js hydration fail with text content mismatch?▼

Hydration mismatches come from browser-only APIs like window, timezone-dependent dates, random values, or invalid HTML nesting such as div inside p. Fix them with mounted-state checks, useId, or rendering dynamic values only on the client.

How do I self-host Next.js with ISR across multiple instances?▼

Set output to 'standalone' for Docker deployments and configure a custom cacheHandler backed by Redis or S3, since the default filesystem cache breaks ISR consistency across multiple instances. Also copy the public and .next/static folders separately.

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

nextjs-deployment

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

Official
Advanced
ArthTech-AIArthTech-AI

qa

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

Official
Intermediate
JCE-Joshhh77JCE-Joshhh77
16

astro-remix

Coordinates Astro/Remix projects covering routing, SSR/SSG decisions, islands, and deployment workflows.

Community
Advanced