ClaudeNext.jsArchitecture

Next.js Claude Rules

Claude rules for Next.js App Router: streaming, server actions, caching, and production deployment patterns.

CLAUDE.md

- Use Server Components by default; add 'use client' boundary only when necessary
- Stream responses with Suspense boundaries for improved perceived performance
- Use server actions with useFormState for progressive enhancement
- Implement optimistic updates with useOptimistic for instant UI feedback
- Use next/font for zero-layout-shift font loading
- Add structured data (JSON-LD) to all content pages for SEO
- Use parallel routes and intercepting routes for advanced UI patterns
- Monitor Core Web Vitals with @vercel/analytics or custom RUM

How to use with Claude

Create a `CLAUDE.md` file in your project root. Claude Code reads this on startup and follows your conventions throughout the session.

← All Claude rules All Next.js rules →

#nextjs#claude#app-router#server-actions#coding-rules

Related Rules

React Claude Rules

ClaudeReact

Claude rules for React: component design, state patterns, performance, and testing conventions in CLAUDE.md.

Architecture

react · claudeCopy Ready

Go Claude Rules

ClaudeGo

Claude rules for Go: project structure, error handling, testing, and idiomatic Go patterns.

Architecture

go · golangCopy Ready

Rust Claude Rules

ClaudeRust

Claude rules for Rust: zero-cost abstractions, async with Tokio, error types, and high-performance Rust patterns.

Performance

rust · tokioCopy Ready

SQL Claude Rules

ClaudeSQL

Claude rules for SQL and database design: schema conventions, query patterns, and migration safety.

Database

sql · databaseCopy Ready