next-best-practices

Guide Next.js projects through file conventions, RSC boundaries, and route APIs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Centralizes Next.js best-practices guidance into a single, accessible reference covering file conventions, server/client boundaries, data patterns, routing, metadata, error handling, image/font optimization, and bundling.

Core Features & Use Cases

  • Consolidates file-convention guidelines, RSC boundaries, data-patterns, route-handling patterns, and metadata strategies into a cohesive framework.
  • Provides practical guidance for both new projects and code reviews, with concrete examples and decision criteria.
  • Supports team enablement through a structured reference set and a quick-start path for hands-on adoption.

Quick Start

Apply the highlighted Next.js best-practices patterns to your current project to guide implementation.

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 Next.js projects to follow best practices for routing and server components?

Structure Next.js projects by applying centralized best-practices guidance for file conventions, RSC boundaries, and route APIs. This framework provides concrete examples and decision criteria to correctly organize routing, server components, and server actions in new applications.

What are the recommended data patterns and server/client boundaries in Next.js?

Recommended data patterns in Next.js define clear server/client boundaries by consolidating guidelines on server components and data fetching. This approach ensures proper separation of concerns and optimizes how data flows through your application's component tree.

How do I review existing Next.js code for best practice violations?

Review existing Next.js code against a structured reference set covering metadata, error handling, and bundling. Use the provided quick-start path and decision criteria to identify optimization opportunities in route handlers, image/font handling, and server actions.

Can I use these Next.js best practices to coach my development team?

Yes, you can coach teams on Next.js best practices using a structured reference set for enablement. It consolidates file-convention guidelines, RSC boundaries, and route-handling patterns into a cohesive framework, supporting hands-on adoption and team alignment.

What is the best way to handle metadata and image optimization in Next.js?

The best way to handle metadata and image optimization in Next.js is by applying centralized best-practices strategies. This guidance covers metadata generation, image/font optimization, and bundling to ensure robust application performance and correct implementation.