# Vercel CLI kurulumu
npm install -g vercel

# Login
vercel login

# Deployment (interaktif)
vercel

# Production deployment
vercel --prod

# Environment ile deployment
vercel --env DATABASE_URL=xxx

{
  "env": {
    "NEXT_PUBLIC_API_URL": "https://api.example.com"
  },
  "build": {
    "env": {
      "DATABASE_URL": "@database-url"
    }
  }
}

# Secret oluştur
vercel secrets add database-url "postgresql://..."

# vercel.json'da referans
{
  "env": {
    "DATABASE_URL": "@database-url"
  }
}

// NEXT_PUBLIC_ prefix'i olmayan değişkenler
// sadece server-side'da erişilebilir

// .env.local
DATABASE_URL="postgresql://..."        // Server-only
NEXT_PUBLIC_API_URL="https://api.com"  // Client + Server

// Kullanım
// lib/db.ts (server-side)
const db = new PrismaClient({
  datasources: {
    db: { url: process.env.DATABASE_URL }
  }
})

// components/api.ts (client-side)
fetch(process.env.NEXT_PUBLIC_API_URL + '/data')

// vercel.json
{
  "rewrites": [
    {
      "source": "/:path*",
      "has": [
        {
          "type": "host",
          "value": "(?<subdomain>.*).example.com"
        }
      ],
      "destination": "/sites/:subdomain/:path*"
    }
  ]
}

// vercel.json
{
  "git": {
    "deploymentEnabled": {
      "main": true,
      "staging": true,
      "feature/*": true
    }
  }
}

🎉 Preview deployed!

**Preview URL:** https://my-app-xxx.vercel.app
**Inspect:** https://vercel.com/...

✅ Build successful (45s)

{
  "buildCommand": "npm run build",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": "nextjs",
  "outputDirectory": ".next",

  "regions": ["iad1", "fra1"],

  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Origin", "value": "*" }
      ]
    }
  ],

  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ],

  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.example.com/:path*"
    }
  ]
}

// next.config.js
module.exports = {
  // Standalone output (Docker için)
  output: 'standalone',

  // Image optimization
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com'
      }
    ]
  },

  // Bundle analyzer
  webpack: (config, { isServer }) => {
    if (process.env.ANALYZE) {
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          reportFilename: isServer
            ? '../analyze/server.html'
            : './analyze/client.html'
        })
      )
    }
    return config
  }
}

// vercel.json - Cache override
{
  "build": {
    "env": {
      "TURBO_REMOTE_CACHE_SIGNATURE_KEY": "@turbo-signature"
    }
  }
}

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Geo-based routing
  const country = request.geo?.country || 'US'

  if (country === 'TR') {
    return NextResponse.redirect(new URL('/tr', request.url))
  }

  // A/B testing
  const bucket = request.cookies.get('bucket')?.value ||
    Math.random() > 0.5 ? 'a' : 'b'

  const response = NextResponse.next()
  response.cookies.set('bucket', bucket)

  return response
}

export const config = {
  matcher: ['/((?!api|_next/static|favicon.ico).*)']
}

// app/api/edge/route.ts
export const runtime = 'edge'

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const name = searchParams.get('name')

  return new Response(JSON.stringify({ hello: name }), {
    headers: { 'Content-Type': 'application/json' }
  })
}

// Real-time feature flags
import { get } from '@vercel/edge-config'

export async function middleware() {
  const maintenance = await get('maintenance')

  if (maintenance) {
    return NextResponse.rewrite(new URL('/maintenance', request.url))
  }
}

npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  )
}

npm install @vercel/speed-insights

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

// vercel.json
{
  "logDrains": [
    {
      "url": "https://logs.example.com/ingest",
      "secret": "@log-drain-secret"
    }
  ]
}

// lib/monitoring.ts
export function trackEvent(name: string, properties?: Record<string, any>) {
  if (typeof window !== 'undefined' && window.va) {
    window.va('event', { name, ...properties })
  }
}

// Kullanım
trackEvent('purchase', { productId: '123', amount: 99.99 })

import Image from 'next/image'

export function ProductImage({ src, alt }) {
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      priority={false}
      placeholder="blur"
      blurDataURL="data:image/jpeg;base64,..."
      sizes="(max-width: 768px) 100vw, 50vw"
    />
  )
}

// app/layout.tsx
import { Inter, Space_Grotesk } from 'next/font/google'

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

const spaceGrotesk = Space_Grotesk({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-space'
})

export default function RootLayout({ children }) {
  return (
    <html className={`${inter.variable} ${spaceGrotesk.variable}`}>
      <body>{children}</body>
    </html>
  )
}

// Dynamic imports
import dynamic from 'next/dynamic'

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <Skeleton />,
  ssr: false
})

// Conditional loading
const Chart = dynamic(
  () => import('chart.js').then(mod => mod.Chart),
  { ssr: false }
)

// vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

# Sensitive değişkenleri Vercel'de encrypt et
# NEVER commit .env.local to git

# .gitignore
.env
.env.local
.env.*.local

// middleware.ts
import { Ratelimit } from '@upstash/ratelimit'
import { Redis } from '@upstash/redis'

const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(10, '10 s')
})

export async function middleware(request: NextRequest) {
  const ip = request.ip ?? '127.0.0.1'
  const { success, pending, limit, reset, remaining } = await ratelimit.limit(ip)

  if (!success) {
    return new NextResponse('Too Many Requests', {
      status: 429,
      headers: {
        'X-RateLimit-Limit': limit.toString(),
        'X-RateLimit-Remaining': remaining.toString(),
        'X-RateLimit-Reset': reset.toString()
      }
    })
  }

  return NextResponse.next()
}

// next.config.js
const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: "default-src 'self'; script-src 'self' 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline';"
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'Permissions-Policy',
    value: 'camera=(), microphone=(), geolocation=()'
  }
]

module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: securityHeaders
      }
    ]
  }
}

// vercel.json - Additional protection
{
  "protection": {
    "enabled": true,
    "attackModeEnabled": false
  }
}

# .github/workflows/preview.yml
name: Vercel Preview Deployment

on:
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Run linting
        run: npm run lint

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}

# .github/workflows/production.yml
name: Vercel Production Deployment

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npm test

      - name: Build
        run: npm run build
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
          vercel-args: '--prod'

# .github/workflows/production.yml
jobs:
  deploy:
    steps:
      # ... previous steps

      - name: Run database migrations
        run: npx prisma migrate deploy
        env:
          DATABASE_URL: ${{ secrets.DATABASE_URL }}

      - name: Deploy to Vercel
        # ...

# Dockerfile
FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

# Build
npm run build

# Start
npm start

# PM2 ile
pm2 start npm --name "next-app" -- start

# netlify.toml
[build]
  command = "npm run build"
  publish = ".next"

[[plugins]]
  package = "@netlify/plugin-nextjs"

# @cloudflare/next-on-pages
npm install -D @cloudflare/next-on-pages

# wrangler.toml
name = "my-next-app"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]