nextjs-best-practices

Apply Next.js App Router principles to structure components, data fetching, and routing.

Updated Feb 3, 2026

Search Tags:#performance #react #nextjs #app-router #server-components #data-fetching #routing-patterns

Ready to run

npx skills add https://github.com/ricardohg1998-create/Plantilla-repo --skill nextjs-best-practices-ricardohg1998-create

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/ricardohg1998-create/Plantilla-repo/tree/main/.agent/skills/nextjs-best-practices
Command: npx skills add https://github.com/ricardohg1998-create/Plantilla-repo --skill nextjs-best-practices-ricardohg1998-create

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured, repeatable approach to implementing Next.js App Router patterns, Server Components, and modern data fetching and routing strategies in Next.js projects, reducing complexity and improving maintainability and performance.

Core Features & Use Cases

Server vs Client Guidance: decision trees to determine when to render Server Components vs Client Components.
Data Fetching & Routing: recommended data fetching patterns, routing conventions, and file structure guidance.
Use Case: apply the patterns to a new Next.js app or an existing project to align with App Router principles, improving maintainability and performance.

Quick Start

Audit a Next.js project to classify components, set up server-friendly data flows, and adjust routes and layouts according to App Router best practices.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema

How do I determine when to use Server Components vs Client Components in Next.js App Router?▼

Next.js App Router best practices use decision trees to determine when to render Server Components versus Client Components based on data fetching needs and interactivity. This classification optimizes client/server boundaries to improve overall application performance and maintainability.

What are the recommended data fetching strategies for Next.js Server Components?▼

Recommended data fetching strategies for Next.js Server Components enforce server-friendly data flows to align with App Router principles. These patterns guide component placement and data flow to reduce complexity and improve performance across typical Next.js projects.

Does this Next.js App Router guidance work for migrating existing projects?▼

Yes, you can audit an existing Next.js project to classify components, set up server-friendly data flows, and adjust routes and layouts. This applies App Router principles to align your current architecture for improved maintainability and performance.

What's the best way to structure routes and layouts according to Next.js App Router conventions?▼

The best way to structure Next.js App Router routes and layouts is to follow specific routing conventions and file structure guidance. This enforces a deterministic workflow with guidelines for component placement, data flow, and performance optimization across your application.

How do I optimize Next.js App Router performance for scalable architecture?▼

Optimizing Next.js App Router performance for scalable architecture involves applying structured Server Component patterns, client/server boundary guidelines, and modern data fetching strategies. This repeatable approach reduces complexity and enforces a maintainable app architecture.

Why does my Next.js App Router project have complex and hard-to-maintain data flows?▼

Complex and hard-to-maintain Next.js App Router data flows often result from misaligned client/server boundaries and improper component placement. Applying structured App Router principles with deterministic routing conventions improves data flow and maintainability.