nextjs

Next.js 15 — EaseUI Patterns

EaseUI runs on Next.js 15 App Router. Server Components by default, client only when interactive.

Server vs Client 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

Workflow: Adding a New Route

Step 1: Choose Route Location

• Input: feature area
• Action: Place in correct route group:

Route Group	Purpose
app/(editor)/	Canvas editor routes
app/(dashboard)/	Dashboard routes
app/api/	API route handlers
app/(marketing)/	Landing pages

• Output: page.tsx in correct directory

Step 2: Data Fetching Strategy

• Input: what data does this page need?
• Action: Pick strategy:

Need	Pattern
Database reads	Server Component fetch + Supabase
Real-time data	no-store or SWR client-side
Cached data	revalidate: 60
Mutations	Server Actions ('use server')

• Output: data flowing into components

Step 3: Caching Layer

• Input: performance requirements
• Action: Configure cache:

Layer	Control
Request	fetch() options
Data	revalidatePath() / revalidateTag()
Full route	dynamic = 'force-static' or 'force-dynamic'

• Output: optimized data loading

File Conventions

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

Route Organization

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

Metadata

Type	Use
Static export	Fixed metadata
generateMetadata	Dynamic per-route

Essential: title (50-60 chars), description (150-160 chars), Open Graph, canonical URL.

Server Actions

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

Hard Gate (Before Submitting)

• loading.tsx tồn tại cho route mới (Suspense fallback)
• Dynamic import cho heavy components (next/dynamic)
• Route group (()) đúng — editor vs dashboard vs marketing
• Không getServerSideProps — chỉ App Router patterns
• Server Actions validate input bằng Zod

Done Condition

Route renders đúng + loading state hiện + cache strategy configured + tất cả gate items ✅