nextjs-15

Next.js 15 Best Practices

Overview

Aspect	Recommendation
Router	App Router (default)
Components	Server Components by default
Data Fetching	async/await in Server Components
Forms	Server Actions + useActionState
Styling	Tailwind CSS or CSS Modules

---

Server Components (Default)

Server Components are the default in App Router. Only use 'use client' when needed.

When to use Client Components

'use client'  // Add ONLY when you need:

// ✅ Browser APIs (window, localStorage)
// ✅ Event handlers (onClick, onChange)
// ✅ Hooks (useState, useEffect, useContext)
// ✅ Third-party client libraries

✅ DO: Keep components server-side by default

// app/users/page.tsx - Server Component (no directive needed)
export default async function UsersPage() {
  const users = await getUsers()  // Direct database/API call
  return <UserList users={users} />
}

❌ DON'T: Add 'use client' unnecessarily

// Bad - this doesn't need to be a client component
'use client'
export default function About() {
  return <div>About us</div>  // No interactivity needed
}

---

Data Fetching

Fetch in Server Components

// app/products/page.tsx
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 3600 }  // Cache for 1 hour
  })
  return res.json()
}

export default async function ProductsPage() {
  const products = await getProducts()
  return <ProductGrid products={products} />
}

Cache Options

Option	Use Case
{ cache: 'force-cache' }	Static data (default)
{ cache: 'no-store' }	Dynamic data (every request)
{ next: { revalidate: 60 } }	ISR - revalidate every 60s

---

Server Actions

Form with Server Action

// app/actions.ts
'use server'

export async function createUser(formData: FormData) {
  const name = formData.get('name')
  await db.user.create({ data: { name } })
  revalidatePath('/users')
}