skills.rest
peancharoen
peancharoenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-best-practices

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

Updated Oct 4, 2025
Search Tags:#routing#next.js#error-handling#bundling#app-router#image-optimization#rsc
One-click install
npx skills add https://github.com/peancharoen/lcbp3 --skill next-best-practices-peancharoen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/peancharoen/lcbp3/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/peancharoen/lcbp3 --skill next-best-practices-peancharoen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates Next.js App Router best practices into a single reference to prevent routing mistakes, RSC boundary errors, build and bundling regressions, and runtime misconfigurations during development and reviews.

Core Features & Use Cases

  • File & Route Conventions: Clear guidance on page, layout, route.ts, dynamic, catch-all, groups, parallel and intercepting routes to avoid 404s and routing conflicts.
  • RSC Boundaries & Data Patterns: Detect invalid async client components, non-serializable props, and recommend Server Components, Server Actions, or Route Handlers as appropriate.
  • Performance, Metadata & Build: Advice for metadata/OG image generation, image/font optimization, bundling issues, serverExternal/transpile handling, and runtime selection for production and self-hosted deployments.
  • Error Handling & Debugging: Patterns for error.tsx, global-error, not-found, hydration debugging, Suspense boundaries, and MCP debug tricks for dev workflows.

Quick Start

Review your Next.js App Router code against the next-best-practices checklist to catch RSC boundary violations, route handler conflicts, and bundling or image/font issues before merging.

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 invalid async client components and non-serializable props in Next.js App Router?▼

Next.js App Router best practices recommend refactoring invalid async client components into Server Components, Server Actions, or Route Handlers to prevent non-serializable props from crossing RSC boundaries and causing runtime errors.

What causes routing conflicts and 404s with parallel and intercepting routes in Next.js?▼

Routing conflicts and 404s in Next.js often stem from incorrect file conventions for parallel and intercepting routes. Applying structured route grouping and catch-all conventions prevents these routing mistakes during development.

How do I configure bundling and serverExternal packages for self-hosted Next.js deployments?▼

Configuring bundling for self-hosted Next.js deployments involves applying serverExternal and transpile handling rules to optimize production builds. This prevents bundling regressions and ensures proper runtime selection for server environments.

What is the best way to structure error boundaries and not-found pages in Next.js App Router?▼

The best way to structure error boundaries in Next.js App Router is using error.tsx and global-error files for targeted runtime error capturing, combined with not-found pages and Suspense boundaries to manage hydration and loading states effectively.

Why does my Next.js metadata and OG image generation fail during production builds?▼

Next.js metadata and OG image generation can fail during production builds due to improper RSC boundary placement or missing runtime configurations. Reviewing metadata generation patterns against App Router conventions resolves these build regressions.

Does Next.js App Router support image and font optimization for self-hosted server environments?▼

Yes, Next.js App Router supports image and font optimization for self-hosted environments. Documenting specific bundling requirements and runtime selections ensures these optimizations function correctly outside of Vercel-hosted platforms.

Related Skills

Explore More Software Engineering Skills→
gesmith0606gesmith0606

next-best-practices

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

Community
Advanced
richardnpaulrichardnpaul

deployment-patterns

Automate deployment planning and pipeline guidance for web applications.

Community
Advanced
jtgironjtgiron

next-best-practices

Detect Next.js App Router best-practice violations in code.

Community
Advanced
MaxStrootmannMaxStrootmann

next-best-practices

Detect Next.js App Router anti-patterns and enforce best practices.

Community
Intermediate