skills.rest
HemantSudarshan
HemantSudarshanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

nextjs-best-practices

Consolidate Next.js App Router best practices for scalable apps.

Updated Mar 17, 2026
Search Tags:#performance#routing#nextjs#isr#app-router#server-components#data-fetching
One-click install
npx skills add https://github.com/HemantSudarshan/Dhumichatbot --skill nextjs-best-practices-hemantsudarshan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-best-practices
Source: https://github.com/HemantSudarshan/Dhumichatbot/tree/main/skills/04-frontend/nextjs-best-practices
Command: npx skills add https://github.com/HemantSudarshan/Dhumichatbot --skill nextjs-best-practices-hemantsudarshan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide consolidates Next.js App Router patterns and best practices to help teams build scalable, maintainable apps using server components, streaming, caching, and ISR.

Core Features & Use Cases

  • Server vs Client Components: guidelines to decide between server and client components, with a split strategy for mixed needs.
  • Data Fetching Patterns: default static caching, ISR, and no-store dynamic fetching with guidance on data flow for database, API, and user input.
  • Routing Principles: conventions for page, layout, loading, error, and not-found routes; patterns for route groups, parallel routes, and modals.
  • API Routes: proper methods, input validation, status codes, and edge runtime considerations.
  • Performance & Cache: image optimization, dynamic imports, code-splitting, and bundle analysis.
  • Project Structure & Metadata: recommended app layout and metadata strategies (static vs dynamic).

Quick Start

Configure your app with App Router conventions, create a server component for data fetching, and progressively convert interactive parts to client components as needed.

Frequently Asked Questions about nextjs-best-practices

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

FAQPage Schema
How do I decide between server and client components in Next.js App Router?▼

Next.js App Router best practices recommend defaulting to server components for data fetching and streaming, progressively converting only interactive parts to client components to maintain performance and scalability.

What is the best way to handle data fetching and caching in Next.js 14+?▼

The best way to handle data fetching in Next.js 14+ is using default static caching alongside ISR for periodic updates, and applying no-store dynamic fetching specifically for real-time database, API, or user input data flows.

How do I structure routing and layouts for a scalable Next.js production app?▼

Structure scalable Next.js routing by using App Router conventions for page, layout, loading, error, and not-found routes, while leveraging route groups and parallel routes to manage modals and complex UI states effectively.

How do API routes work with edge runtime and input validation in Next.js?▼

Next.js API routes handle proper HTTP methods and status codes, requiring strict input validation for payloads and specific edge runtime considerations to optimize execution constraints and performance for serverless endpoints.

How do I optimize performance and bundle size in a Next.js application?▼

Optimize Next.js performance by applying image optimization, dynamic imports, and code-splitting, while running bundle analysis to monitor payload sizes and ensure efficient static versus dynamic metadata strategies.

Related Skills

Explore More Software Engineering Skills→
DhumitechDhumitech

nextjs-best-practices

Document Next.js 14+ App Router patterns for component architecture and data fetching.

Community
Advanced
kyamsSRLkyamsSRL

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns with Server Components and Suspense streaming.

Community
Advanced
professor-moodyprofessor-moody
1

nextjs-15

Guide Next.js 15 App Router patterns including Server Components and Actions.

Community
Intermediate
ArieGoldkinArieGoldkin
10

react-server-components-framework

Design React Server Components with Next.js 15 App Router.

Community
Basic