next-best-practices

Codify Next.js best practices for file conventions, RSC boundaries, and data patterns.

Updated Feb 5, 2026
One-click install
npx skills add https://github.com/devkit-stack/Claude --skill next-best-practices-devkit-stack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/devkit-stack/Claude/tree/main/.claude/skills/next-best-practices
Command: npx skills add https://github.com/devkit-stack/Claude --skill next-best-practices-devkit-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates Next.js best practices across app routing, data fetching, error handling, and optimization to help teams build robust apps with consistent patterns.

Core Features & Use Cases

  • File Conventions: recommended project structure, routing patterns, and file naming for the App Router.
  • RSC Boundaries & Data Patterns: guidance on when to fetch in server components, server actions, and route handlers.
  • Performance & Metadata: guidelines for metadata generation, image/font optimization, and error handling strategies.
  • Debug & Tuning: strategies for debugging Next.js apps and tuning performance.

Quick Start

Review this guide and align your Next.js project with the listed conventions to improve consistency and maintainability.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
What are the best practices for Next.js App Router file conventions and project structure?

Next.js App Router best practices recommend specific file naming and routing patterns to establish a consistent project structure. Following these conventions improves routing clarity, server component boundaries, and overall application maintainability.

How do I structure data fetching between server components and route handlers in Next.js?

Data fetching patterns in Next.js depend on distinguishing when to fetch within server components versus using route handlers. This guidance codifies RSC boundaries, detailing when to execute server actions or leverage route handlers for optimal data retrieval.

Does this Next.js guidance cover both the app and pages directories?

Yes, the Next.js best practices cover both the app and pages directories. It provides actionable guidance and debugging patterns tailored for both routing paradigms to help teams transition or maintain existing projects effectively.

What is the recommended approach for error handling and metadata in Next.js server components?

Error handling and metadata generation in Next.js server components require specific strategies to ensure robust performance. The guidelines detail how to manage errors, generate dynamic metadata, and optimize images and fonts effectively within your application.

How do I debug and tune performance for a Next.js application?

Debugging and tuning Next.js performance involves applying targeted strategies to identify bottlenecks and optimize runtime considerations. The guidance outlines specific debugging patterns and tuning techniques to enhance application speed and reliability.