skills.rest
gesmith0606
gesmith0606COMMUNITY
Explore all skills by this author →
GitHub

next-best-practices

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

Updated Aug 15, 2025
Search Tags:#nextjs#best-practices#error-handling#bundling#app-router#image-optimization#rsc
One-click install
npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill next-best-practices-gesmith0606
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/gesmith0606/nfl_data_engineering/tree/main/web/frontend/.agents/skills/next-best-practices
Command: npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill next-best-practices-gesmith0606

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides a single, authoritative set of recommendations to avoid common Next.js mistakes that cause runtime errors, performance regressions, and deployment issues by standardizing file conventions, component boundaries, data patterns, and runtime choices.

Core Features & Use Cases

  • File conventions & routing: Clarifies app/router file roles (page, layout, route, template), dynamic segments, parallel and intercepting routes, and private folders.
  • RSC boundaries & async patterns: Detects invalid async client components, non-serializable props, and correct use of Server Actions versus route handlers.
  • Data and fetch patterns: Recommends Server Component reads, Server Actions for mutations, route handlers for public APIs, and techniques to avoid data waterfalls.
  • Error handling & debugging: Prescribes error.tsx/global-error.tsx usage, navigation API gotchas, MCP debugging, and hydration error remedies.
  • Metadata, OG images, image/font optimization, and bundling: Covers generateMetadata, next/og, next/image, next/font, server-external package handling, and migrating bundlers.
  • Self-hosting & deployment guidance: Standalone output, cache handler considerations for ISR, and Docker/PM2 examples.
  • Use Cases: Code reviews to catch RSC or routing issues, onboarding docs for new developers, migrating from older Next.js versions, and production readiness checks.

Quick Start

Run a focused review of your app to fix RSC boundary violations, enforce file conventions, update async request patterns, and apply image/font and bundling recommendations to prevent hydration, runtime, and deployment failures.

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 Next.js App Router RSC boundary violations and async client component errors?▼

Fix Next.js RSC boundary violations by validating async client components, ensuring props are serializable, and correctly applying Server Actions for mutations rather than standard route handlers to prevent runtime errors and hydration mismatches.

What are the Next.js best practices for using error.tsx and global-error.tsx?▼

Next.js best practices prescribe using error.tsx for nested route segment recovery and global-error.tsx for root layout fallbacks. This targeted error handling isolates runtime crashes, maintains application stability, and provides dedicated UI remedies for hydration and navigation API gotchas.

How do I configure Next.js self-hosting ISR cache handlers and standalone output?▼

Configure Next.js self-hosting by enabling standalone output for optimized deployments and implementing custom cache handlers for ISR. This ensures reliable incremental static regeneration in Docker or PM2 environments without relying on Vercel's managed infrastructure.

Does this Next.js best practices guidance cover image and font optimization?▼

Yes, this Next.js best practices guidance covers image and font optimization. It details implementations for next/image, next/font, and generateMetadata, ensuring proper asset bundling, OG image generation via next/og, and overall performance enhancements.

What is the best way to structure Next.js App Router file conventions and dynamic segments?▼

The best way to structure Next.js App Router files is to strictly enforce file conventions for page, layout, route, and template roles. Clarifying dynamic segments, parallel routes, and private folders prevents routing conflicts and deployment failures.

When should I use Next.js Server Actions versus route handlers for data fetching?▼

Use Next.js Server Actions for data mutations and route handlers for public APIs. Server Components should handle direct data reads to avoid waterfalls, ensuring clear boundaries between internal mutations, external endpoints, and initial rendering fetches.

Related Skills

Explore More Software Engineering Skills→
mrp4stenmrp4sten
3

nextjs-15

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

Community
Advanced
Mte90Mte90
51

Next.js Tooling

Optimize Next.js development with Turbopack, standalone Docker builds, and CI linting.

Community
Intermediate
CrazySwamiCrazySwami

code-quality

Enforce strict type-checking and linting for TypeScript/React projects.

Community
Advanced
driftinglydriftingly
1

react-doctor

Analyze React source code for security, performance, correctness, and architecture issues.

Community
Intermediate