CDN 加速配置

# Nginx 配置
location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.html$ {
    expires 5m;
    add_header Cache-Control "public, must-revalidate";
}

// Next.js API Route
export async function GET() {
  return new Response(JSON.stringify(data), {
    headers: {
      'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=30'
    }
  })
}

# 使用 Cloudflare API
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything":true}'

// Next.js Image 组件自动优化
import Image from 'next/image'

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
/>

<!-- 自动调整大小和格式 -->
<img src="https://example.com/cdn-cgi/image/width=800,format=auto/photo.jpg">

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
}

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero.jpg" as="image">

<link rel="preconnect" href="https://api.example.com">
<link rel="dns-prefetch" href="https://analytics.example.com">

<!-- 添加版本号或哈希 -->
<link rel="stylesheet" href="/style.css?v=1.2.3">
<script src="/app.js?hash=abc123"></script>

// Next.js 自动添加哈希
// /static/css/main.abc123.css

<!-- 使用独立域名 -->
<img src="https://cdn.example.com/photo.jpg">

# Nginx
gzip on;
gzip_types text/css application/javascript image/svg+xml;