skills.rest
tnunamak
tnunamakCOMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

Enforce Next.js App Router best practices for routing and RSC boundaries.

Updated Mar 22, 2018
Search Tags:#code review#performance optimization#metadata#nextjs#app router#route handlers#rsc boundaries
One-click install
npx skills add https://github.com/tnunamak/dotfiles --skill next-best-practices-tnunamak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/tnunamak/dotfiles/tree/main/ai/skills/local/nextjs/upstream
Command: npx skills add https://github.com/tnunamak/dotfiles --skill next-best-practices-tnunamak

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps prevent common Next.js App Router mistakes by enforcing best practices across routing, Server Components vs Client Components, async APIs, and production-ready patterns.

Core Features & Use Cases

  • File conventions & routing correctness: Clarifies special files and route segment behaviors to avoid misstructured apps.
  • RSC boundary validation: Flags invalid async Client Components and non-serializable server-to-client props.
  • Modern async and data patterns: Covers Next.js 15+ async params/searchParams and server-side data fetching approaches (Server Components, Server Actions, Route Handlers).
  • Production-grade error handling & navigation: Guides the correct use of error boundaries and Next.js navigation/error utilities without breaking behavior.
  • Performance and platform specifics: Recommends metadata/OG conventions, image and font optimization, bundling hygiene, and runtime selection (Node vs Edge).
  • Route handler safety and API design: Avoids route conflicts and describes correct environment expectations for route.ts handlers.
  • Parallel routes (modal patterns) and debug tactics: Explains required default.tsx behavior and provides practical debugging/build strategies.

Quick Start

Apply these rules to a Next.js App Router change by asking the AI: Review my route structure and RSC boundaries for a Next.js 15/16 project and list the specific fixes needed.

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

To validate Next.js App Router RSC boundaries, ensure Client Components are not marked async and avoid passing non-serializable props from Server Components to Client Components. This Skill flags these specific violations to prevent incorrect server-to-client data transmission.

What are the best practices for Next.js route handlers and route.ts files?▼

Error handling in Next.js App Router requires correct usage of error boundaries and navigation utilities to prevent breaking behavior. This Skill guides the implementation of production-grade error handling within your application structure.

Why do my Next.js parallel routes and modals break without a default.tsx file?▼

Next.js parallel routes break without a default.tsx file because the framework requires explicit fallback behavior for unmatched slot states. This Skill explains required default.tsx behavior and provides practical debugging tactics for parallel and intercepting route patterns.

How do I optimize Next.js App Router performance with metadata and fonts?▼

To optimize Next.js App Router performance, follow correct metadata and OG conventions, leverage built-in image and font optimization, maintain bundling hygiene, and select the appropriate runtime. This Skill recommends specific performance patterns for production readiness.

Related Skills

Explore More Software Engineering Skills→
valec3valec3
1

nextjs-15

Implement Next.js 15 App Router patterns for routing, server actions, and data fetching.

Community
Advanced
gesmith0606gesmith0606

next-best-practices

Enforce Next.js App Router best practices for file conventions, RSC boundaries, and async patterns.

Community
Advanced
peancharoenpeancharoen

next-best-practices

Enforce Next.js App Router best practices for routing, RSC boundaries, and deployment readiness.

Community
Advanced
masermediagroup-stackmasermediagroup-stack
1

nextjs

Provide structured Next.js App Router guidance for server components, route handlers, and metadata.

Community
Advanced