next-best-practices

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

Updated Feb 7, 2026

Search Tags:#nextjs #best-practices #error-handling #bundling #server-components #route-handlers #data-patterns

Ready to run

npx skills add https://github.com/brunodavid1308/match-node --skill next-best-practices-brunodavid1308

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-best-practices
Source: https://github.com/brunodavid1308/match-node/tree/main/.agents/skills/next-best-practices
Command: npx skills add https://github.com/brunodavid1308/match-node --skill next-best-practices-brunodavid1308

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams standardize Next.js projects by codifying core conventions and patterns to prevent architectural drift and streamline onboarding.

Core Features & Use Cases

File Conventions: establishes a consistent project structure and naming patterns for Next.js apps.
RSC Boundaries & Data Patterns: provides guidance to enforce server/client boundaries, data fetching strategies, and server actions vs route handlers.
Runtime & Performance: offers recommendations on default Node runtime vs Edge, image/font optimization, and bundling best practices.
Metadata & Routing: covers static/dynamic metadata, route handlers, and parallel routes for scalable routing.
Debugging & Troubleshooting: outlines quick checks and best practices to diagnose and fix common Next.js issues.

Quick Start

Review your Next.js app against these rules and refactor where needed to align with the recommendations.

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 server and client component boundaries in Next.js?▼

To enforce Next.js server and client boundaries, codify data fetching strategies and clearly separate server actions from route handlers. This prevents architectural drift by establishing strict rules for when components execute on the server versus the client.

When should I use route handlers versus server actions for data patterns in Next.js?▼

Route handlers in Next.js are used for API endpoints, while server actions handle mutations and form submissions directly. Codifying these data patterns ensures you choose the correct boundary for scalable routing and metadata generation.

How do I optimize images and fonts to reduce bundling size in Next.js?▼

Optimize Next.js images and fonts by applying built-in optimization features and following bundling best practices. This reduces architectural drift by enforcing consistent runtime selection and asset delivery patterns across your application.

What is the best way to structure file conventions for a scalable Next.js project?▼

The best way to structure Next.js file conventions is to establish consistent naming patterns and folder hierarchies. This standardizes project architecture, streamlines team onboarding, and prevents structural drift across parallel routes.

How do I choose between Node and Edge runtime for my Next.js route handlers?▼

Choose between Node and Edge runtime for Next.js route handlers by evaluating the specific performance and data pattern requirements of your endpoints. Applying consistent runtime selection rules prevents architectural drift and optimizes execution.

Why does my Next.js app suffer from architectural drift and how can I fix it?▼

Next.js apps suffer from architectural drift due to inconsistent file conventions and mixed server client boundaries. Fix it by applying codified best practices for error handling, metadata, and routing to standardize the project structure.