Nextjs Best Practices

davila7/claude-code-templates/cli-tool/components/skills/development/nextjs-best-practices

by davila78da17d671b6fNo license32K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Next.js App Router principles. Server Components, data fetching, routing patterns.

AI-generated overview

Reference guidance on Next.js App Router best practices, covering Server and Client Components, data fetching, routing, caching and performance.

What it does: Provides a structured set of Next.js App Router principles organized into sections such as Server versus Client Components, data fetching patterns, routing conventions, API route handlers, performance, metadata, caching, server actions and anti-patterns. It presents decision trees, comparison tables and a sample project structure as reference material. It produces guidance rather than code or files.
When to use it: Use when planning or reviewing a Next.js App Router codebase and needing conventions for component boundaries, data fetching, routing or caching. Also useful as a checklist when refactoring toward server-first patterns.
Requirements: No scripts or tooling; it is instructions only. The agent needs read, write, edit, glob and grep tools per its declared allowed tools.

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

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

2. Data Fetching Patterns

Fetch Strategy

Data Flow

3. Routing Principles

File Conventions

Route Organization

4. API Routes

Route Handlers

Best Practices

Validate input with Zod
Return proper status codes
Handle errors gracefully
Use Edge runtime when possible

5. Performance Principles

Image Optimization

Use next/image component
Set priority for above-fold
Provide blur placeholder
Use responsive sizes

Bundle Optimization

Dynamic imports for heavy components
Route-based code splitting (automatic)
Analyze with bundle analyzer

6. Metadata

Static vs Dynamic

Essential Tags

title (50-60 chars)
description (150-160 chars)
Open Graph images
Canonical URL

7. Caching Strategy

Cache Layers

Revalidation

8. Server Actions

Use Cases

Form submissions
Data mutations
Revalidation triggers

Best Practices

Mark with 'use server'
Validate all inputs
Return typed responses
Handle errors

9. Anti-Patterns

❌ Don't	✅ Do
'use client' everywhere	Server by default
Fetch in client components	Fetch in server
Skip loading states	Use loading.tsx
Ignore error boundaries	Use error.tsx
Large client bundles	Dynamic imports

10. Project Structure

app/├── (marketing)/     # Route group│   └── page.tsx├── (dashboard)/│   ├── layout.tsx   # Dashboard layout│   └── page.tsx├── api/│   └── [resource]/│       └── route.ts└── components/    └── ui/

app/├── (marketing)/     # Route group│   └── page.tsx├── (dashboard)/│   ├── layout.tsx   # Dashboard layout│   └── page.tsx├── api/│   └── [resource]/│       └── route.ts└── components/    └── ui/

Remember: Server Components are the default for a reason. Start there, add client only when needed.

Source and attribution

Source:davila7/claude-code-templatesincli-tool/components/skills/development/nextjs-best-practicesat commit8da17d6

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

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

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

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

Pattern	Use
Route groups `(name)`	Organize without URL
Parallel routes `@slot`	Multiple same-level pages
Intercepting `(.)`	Modal overlays

Method	Use
GET	Read data
POST	Create data
PUT/PATCH	Update data
DELETE	Remove data

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

Type	Use
Static export	Fixed metadata
generateMetadata	Dynamic per-route

Layer	Control
Request	fetch options
Data	revalidate/tags
Full route	route config

Method	Use
Time-based	`revalidate: 60`
On-demand	`revalidatePath/Tag`
No cache	`no-store`

Nextjs Best Practices

Next.js Best Practices

1. Server vs Client Components

Decision Tree

By Default

2. Data Fetching Patterns

Fetch Strategy

Data Flow

3. Routing Principles

File Conventions

Route Organization

4. API Routes

Route Handlers

Best Practices

5. Performance Principles

Image Optimization

Bundle Optimization

6. Metadata

Static vs Dynamic

Essential Tags

7. Caching Strategy

Cache Layers

Revalidation

8. Server Actions

Use Cases

Best Practices

9. Anti-Patterns

10. Project Structure

Source and attribution

More from davila7/claude-code-templates

React Best Practices

Web Performance Optimization

Find Bugs

Browser Automation

Code Review

Commit

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices