nextjs-best-practices

Apply server components, data fetching patterns, and routing conventions to Next.js App Router apps.

1|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/barbosakjn/finance-app --skill nextjs-best-practices-barbosakjn
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/barbosakjn/finance-app/tree/main/.agent/workflows/.agent/skills/nextjs-best-practices
Command: npx skills add https://github.com/barbosakjn/finance-app --skill nextjs-best-practices-barbosakjn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This collection provides a principled approach to building Next.js apps using App Router with server components, correct data fetching patterns, and clean routing conventions to improve performance and maintainability.

Core Features & Use Cases

  • Server vs Client Components guidance and decision trees
  • Data fetching strategies (Default / ISR / No-store) and how to apply them
  • Routing conventions and file structure recommendations
  • Performance-oriented patterns and anti-patterns to avoid
  • Use Case: Building scalable Admin UI with server components and client components split

Quick Start

Review the guidelines and structure your Next.js app to favor server components, proper data fetching patterns, and standard routing conventions.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I structure routing conventions in a Next.js App Router project?

Next.js App Router routing conventions recommend organized file structures and route layouts to improve project maintainability and enforce clear navigation boundaries within your application.

When should I use server components versus client components in Next.js?

Use server components by default to fetch data on the server, only adopting client components when you need interactivity, applying a decision tree to correctly split component responsibilities.

What is the best way to handle data fetching in Next.js App Router?

The best data fetching strategy uses Default, ISR, or No-store patterns based on your caching needs, applying these fetch strategies to build scalable applications with optimal performance.

Can I build a scalable Admin UI using Next.js server components?

Yes, building a scalable Admin UI is a primary use case, achieved by splitting server components and client components correctly to enforce a performance-oriented project structure.

What performance anti-patterns should I avoid in Next.js App Router?

Avoid performance anti-patterns by favoring server components, applying correct data fetching strategies, and following standard routing conventions to prevent architectural maintainability issues.