Support Center

Use Server Components (default) for:

• Fetching data from databases or APIs
• Accessing backend resources
• Keeping sensitive information on server (API keys, tokens)
• Large dependencies that don't need JavaScript on client

Use Client Components ('use client') for:

• Interactive features (onClick, onChange events)
• React hooks (useState, useEffect, etc.)
• Browser-only APIs (localStorage, window, etc.)
• Class components

Recommended authentication solutions for Next.js:

1. NextAuth.js: Complete authentication solution with built-in providers
2. Clerk: Modern, developer-friendly authentication
3. Auth0: Enterprise-grade authentication platform
4. Custom JWT: Roll your own using Server Actions

# Install NextAuth.js
npm install next-auth

Vercel (Recommended):

• Zero configuration deployment
• Automatic HTTPS and global CDN
• Perfect for Next.js (same team)

Other Options:

• Netlify, AWS, Google Cloud, Azure
• Self-hosted with Docker
• Node.js hosting (DigitalOcean, Heroku)

# Build and start
npm run build
npm start

Use the Next.js Image component for automatic optimization:

import Image from 'next/image'

<Image
  src="/photo.jpg"
  alt="Description"
  width={800}
  height={600}
  priority // For above-the-fold images
/>

Benefits:

• Automatic WebP/AVIF conversion
• Responsive images
• Lazy loading by default
• No layout shift (CLS)

• SSR (Server-Side Rendering): Page rendered on each request (dynamic data)
• SSG (Static Site Generation): Page rendered at build time (static data)
• ISR (Incremental Static Regeneration): Static pages with periodic updates

In App Router, use fetch with different cache options:

// SSG (cached)
fetch('...', { cache: 'force-cache' })

// SSR (no cache)
fetch('...', { cache: 'no-store' })

// ISR (revalidate every 60s)
fetch('...', { next: { revalidate: 60 } })