next-best-practices

Guide Next.js App Router projects on file conventions, RSC boundaries, and metadata.

Updated Nov 15, 2025
One-click install
npx skills add https://github.com/geinala/entry --skill next-best-practices-geinala
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/geinala/entry/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/geinala/entry --skill next-best-practices-geinala

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Unified guidance to standardize Next.js patterns across projects, reducing architectural drift and onboarding time.

Core Features & Use Cases

  • File Conventions: Establishes consistent project structure, routing rules, and parallel/intercepting routes guidance.
  • RSC Boundaries & Data Patterns: Guides proper server/client boundaries, data fetching strategies, and avoiding waterfalls.
  • Metadata, Error Handling & Route Handlers: Provides guidance on dynamic/static metadata, error boundaries, and API design decisions.

Quick Start

Review these rules and begin applying them to your codebase immediately.

Frequently Asked Questions about next-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure routing and server components in Next.js App Router?

Next.js App Router routing requires establishing consistent file conventions, defining proper server/client boundaries, and configuring parallel or intercepting routes to maintain clear project architecture.

What is the best way to handle dynamic metadata and generateMetadata in Next.js?

The best way to handle Next.js metadata is applying governance rules for static and dynamic metadata, specifically utilizing the generateMetadata function to standardize metadata generation across your application's pages.

When should I use route handlers vs server actions in Next.js?

Differentiate Next.js route handlers versus server actions based on API design decisions, establishing governance rules to standardize when to expose endpoint APIs versus executing direct server-side mutations.

How do I prevent data fetching waterfalls with React Server Components?

Prevent data fetching waterfalls in React Server Components by applying guided data patterns that optimize server and client boundaries, ensuring parallel data retrieval rather than sequential blocking requests.

How do I implement error handling and Suspense boundaries in Next.js?

Implement Next.js error handling by configuring error boundaries alongside Suspense boundaries, ensuring robust application resilience by catching route errors and managing UI loading states during asynchronous renders.

What are the performance optimizations for Next.js bundling and runtime?

Next.js performance optimizations include applying bundling governance, configuring image and font optimization, and selecting appropriate runtime recommendations to improve overall application loading speed.