next-best-practices

Consolidate Next.js best practices into a Markdown guide with YAML frontmatter.

Updated Jan 6, 2026

Search Tags:#metadata #nextjs #best-practices #server-components #frontend-architecture #route-handlers #data-patterns

Ready to run

npx skills add https://github.com/marcosmlslira/observadordedominios --skill next-best-practices-marcosmlslira

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates Next.js best practices into a clear, reusable guide to improve code quality and reliability.

Core Features & Use Cases

File conventions: standard project structure, route and metadata conventions to speed up onboarding.
RSC boundaries & data patterns: detect and apply correct server/client data flow patterns for stable UI.
Best practices coverage: runtime decisions, route handlers, metadata, image/font optimization, and bundling considerations.
Use cases include onboarding a new Next.js project, auditing an existing app, and guiding code reviews for consistency across teams.

Quick Start

Review the guidelines and apply them to refactor a Next.js project to align with best practices.

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 server components and client boundaries?▼

Next.js server components require strict boundaries to ensure stable UI data flow. You must detect and apply correct server/client data patterns to separate data fetching from client-side interactivity effectively.

How do I structure Next.js route handlers and file conventions?▼

Structuring Next.js route handlers involves adhering to standard project structure and route conventions to speed up onboarding. You should apply standard metadata conventions to improve code quality and reliability.

How do I audit an existing Next.js app for frontend architecture best practices?▼

Auditing an existing Next.js app involves reviewing frontend architecture against consolidated guidelines covering runtime decisions, metadata, image/font optimization, and bundling considerations to ensure consistency across teams.

Does this Next.js guide cover performance optimization and data fetching patterns?▼

This Next.js guide covers performance optimization and data patterns across both server and client contexts. It provides actionable instructions for route handlers, metadata, and image/font optimization to improve reliability.

When should I not use client components for data fetching in Next.js?▼

You should not use client components for data fetching when server components can handle it. Enforcing correct RSC boundaries prevents unnecessary client-side data fetching and maintains stable UI performance.