next-best-practices

Enforces Next.js best-practices guidelines across a codebase.

Updated Apr 29, 2026
One-click install
npx skills add https://github.com/BFLabsAI/algoritmo-milionario --skill next-best-practices-bflabsai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/BFLabsAI/algoritmo-milionario/tree/main/skills/nextjs-fullstack/upstream
Command: npx skills add https://github.com/BFLabsAI/algoritmo-milionario --skill next-best-practices-bflabsai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Next.js projects often drift away from consistent conventions (routing, data fetching, metadata, and error handling). This Skill provides a centralized guide to align team practices and reduce architectural debt.

Core Features & Use Cases

  • File conventions and app router patterns: standardizes project structure, route segments, and middleware naming.
  • Data patterns, RSC boundaries, and error handling: helps distinguish Server Components, Server Actions, and Route Handlers to prevent waterfalls and serialization issues.
  • Metadata, image/font optimization, and performance guidelines: consolidates best practices for SEO and speed.
  • Use Case: Teams audit Next.js projects to fix routing conflicts, improve data fetching, and standardize metadata across routes.

Quick Start

Audit your codebase against the Next.js best practices and implement the recommended fixes.

Frequently Asked Questions about next-best-practices

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

FAQPage Schema
How do I enforce Next.js app router best practices across my codebase?

To enforce Next.js app router best practices, apply centralized guidelines during code reviews and architectural decisions to standardize file conventions, RSC boundaries, and data patterns. This prevents architectural drift and reduces technical debt across your project.

What is the best way to structure Next.js Server Components and Server Actions?

The best way to structure Server Components and Server Actions is to establish clear RSC boundaries. This prevents data fetching waterfalls and serialization issues by distinguishing when to use Server Components, Server Actions, or Route Handlers.

How do I standardize metadata and error handling in Next.js projects?

To standardize metadata and error handling in Next.js, audit your routes against consolidated best practices for SEO, image and font optimization, and error boundaries. This ensures consistent performance and metadata across all route segments.

Can I audit routing conflicts and middleware naming in an existing Next.js app?

Yes, you can audit existing Next.js apps to identify and fix routing conflicts. By standardizing project structure, route segments, and middleware naming conventions, you align team practices and resolve architectural inconsistencies.

When do I need to review Next.js route handlers versus Server Actions?

You need to review Next.js route handlers versus Server Actions when defining data patterns and RSC boundaries. Distinguishing them correctly prevents serialization issues and ensures your data fetching architecture avoids waterfall requests.