nextjs-best-practices

name	nextjs-best-practices
description	Next.js App Router principles. Server Components, data fetching, routing patterns.
type	skill
created	2026-02-27T00:00:00.000Z
domain	software-development
category	frontend
risk	unknown
source	community
tags	["skill","software-development","frontend","nextjs"]

Next.js Best Practices

Principles for Next.js App Router development.

---

1. Server vs Client Components

Decision Tree

Does it need...?
│
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│   └── Server Component (default)
│
└── Both? 
    └── Split: Server parent + Client child

By Default

Type	Use
Server	Data fetching, layout, static content
Client	Forms, buttons, interactive UI

---

2. Data Fetching Patterns

Fetch Strategy

Pattern	Use
Default	Static (cached at build)
Revalidate	ISR (time-based refresh)
No-store	Dynamic (every request)

Data Flow

Source	Pattern
Database	Server Component fetch
API	fetch with caching
User input	Client state + server action

---

3. Routing Principles

File Conventions

File	Purpose
page.tsx	Route UI
layout.tsx	Shared layout
loading.tsx	Loading state
error.tsx	Error boundary
not-found.tsx	404 page

Route Organization

Pattern	Use
Route groups (name)	Organize without URL