skills.rest
marcosmlslira
marcosmlsliraCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/marcosmlslira/observadordedominios --skill next-best-practices-marcosmlslira
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
salemazielsalemaziel

project-conventions

Define project directory structures, file naming conventions, and working standards.

Community
Basic
HungNthHungNth

wp-plugin-development

Guide WordPress plugin development with architecture, hooks, and security practices.

Community
Advanced
FindMalekFindMalek
9

next-best-practices

Audit Next.js projects for file conventions, RSC boundaries, and routing best practices.

Community
Advanced
DanielPodolskyDanielPodolsky
274

frontend-fundamentals

Review React and Vue components for architecture, state management, and accessibility.

Community
Basic