// Next.js 14: cached by default (surprised everyone)
const data = await fetch('https://api.example.com/data');

// Next.js 15: NOT cached by default (fixed the surprise)
const data = await fetch('https://api.example.com/data');
// Equivalent to: { cache: 'no-store' }

// To cache, opt-in explicitly:
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // revalidate every hour
});

// Or cache indefinitely (until manually invalidated):
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache'
});

// app/dashboard/page.tsx

// Dynamic page — no caching
export const dynamic = 'force-dynamic';

// Static page — full cache
export const dynamic = 'force-static';

// Revalidate every 60 seconds
export const revalidate = 60;

// Dynamic page that streams
export const dynamic = 'force-dynamic';
export const runtime = 'edge';  // runs at the edge

// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { path, tag, secret } = await request.json();
  
  if (secret !== process.env.REVALIDATION_SECRET) {
    return NextResponse.json({ error: 'Invalid secret' }, { status: 401 });
  }
  
  if (path) {
    revalidatePath(path);
  }
  
  if (tag) {
    revalidateTag(tag);
  }
  
  return NextResponse.json({ revalidated: true });
}

const posts = await fetch('https://cms.example.com/posts', {
  next: { 
    tags: ['posts'],
    revalidate: 3600
  }
});

// When a post is published: POST /api/revalidate with { tag: 'posts' }

// app/actions/cart.ts
'use server';

import { db } from '@/lib/db';
import { auth } from '@/lib/auth';
import { revalidatePath } from 'next/cache';

export async function addToCart(productId: string) {
  const session = await auth();
  if (!session) throw new Error('Not authenticated');
  
  await db.cartItem.upsert({
    where: {
      userId_productId: {
        userId: session.user.id,
        productId,
      }
    },
    update: { quantity: { increment: 1 } },
    create: { userId: session.user.id, productId, quantity: 1 },
  });
  
  revalidatePath('/cart');
}

// 1. Image optimization — always use next/image
import Image from 'next/image';

// ❌ Don't
<img src="/hero.jpg" width={1200} height={600} />

// ✅ Do
<Image 
  src="/hero.jpg" 
  width={1200} 
  height={600}
  priority  // for above-the-fold images
  alt="Hero image"
/>

// 2. Font optimization — use next/font
import { Inter } from 'next/font/google';

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

// 3. Bundle analysis — check your client bundle
// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // your config
});

// Run: ANALYZE=true npm run build

// 4. Parallel route prefetching
// Prefetching happens automatically for <Link> in viewport
// For programmatic navigation:
import { useRouter } from 'next/navigation';

const router = useRouter();
router.prefetch('/dashboard'); // preload on hover/focus

// Route that runs at Vercel Edge (low latency, limited APIs)
export const runtime = 'edge';

export async function GET(request: Request) {
  // Cannot use: Node.js APIs, most npm packages
  // Can use: fetch, Response, Request, Crypto, TextEncoder
  
  const geo = request.geo; // Vercel-specific: user's location
  const country = geo?.country ?? 'US';
  
  return Response.json({ country });
}

// ❌ Pitfall 1: Importing server-only code in client components
// This will error at runtime, not build time (without 'server-only' package)
import { db } from '@/lib/db'; // Only works in Server Components

// Fix: Add 'server-only' to prevent accidental imports
// lib/db.ts:
import 'server-only';
export const db = ...;

// ❌ Pitfall 2: Using cookies/headers in static components
import { cookies } from 'next/headers';

// This makes the route dynamic (can't be statically generated)
const token = cookies().get('token');

// Fix: Move to a Server Action or Route Handler if static is desired

// ❌ Pitfall 3: Not handling loading states in Server Actions
async function handleSubmit(formData: FormData) {
  'use server';
  // This can take time — the client needs visual feedback
}

// Fix: Use useFormStatus in the Client Component
import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? 'Submitting...' : 'Submit'}
    </button>
  );
}