Deploy Next.js til Vercel: Fra lokal til produksjon på minutter

Du har bygget noe fantastisk. Koden fungerer perfekt lokalt. Nå er det tid for verden å se det.

Vercel er den kanoniske hosting-plattformen for Next.js — bygget av de samme folkene som lager rammeverket. Det betyr at alt bare fungerer: SSR, ISR, edge functions, og alt annet Next.js tilbyr.

Denne guiden tar deg fra lokal utvikling til produksjon på under 10 minutter.

Hvorfor Vercel?

Feature	Vercel	Andre plattformer
Next.js-støtte	Perfekt	Varierer
Edge functions	Innebygd	Ofte manuelt
Automatiske previews	Per PR	Manuelt
Null konfigurasjon	✓	Sjelden
Global CDN	✓	Varierer

Steg 1: Forbered prosjektet

Før du deployer, sørg for at alt fungerer lokalt:

# Kjør production build
npm run build

# Test produksjonsversjonen lokalt
npm run start

Fikset alle feil? Perfekt. La oss deploye.

Sjekk miljøvariabler

Lag en liste over alle miljøvariabler du trenger. For LLM-First Boilerplate er det typisk:

# Database
DATABASE_URL=postgresql://...

# Auth
BETTER_AUTH_SECRET=...
BETTER_AUTH_URL=https://your-domain.com

# Google OAuth
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...

# Stripe
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

# Analytics (valgfritt)
NEXT_PUBLIC_POSTHOG_KEY=...

Steg 2: Deploy til Vercel

Metode 1: Vercel CLI (anbefalt)

# Installer Vercel CLI
npm install -g vercel

# Deploy
vercel

Første gang du kjører vercel, blir du bedt om å:

1. Logge inn på Vercel-kontoen din
2. Koble til Git-repoet
3. Konfigurere prosjektet

Etter det er fremtidige deploys like enkelt:

# Deploy til produksjon
vercel --prod

Metode 2: GitHub-integrasjon

1. Gå til vercel.com/new
2. Importer Git-repoet ditt
3. Vercel oppdager automatisk Next.js og konfigurerer alt

Nå deployes hver push til main automatisk til produksjon, og hver PR får sin egen preview-URL.

Steg 3: Konfigurer miljøvariabler

I Vercel-dashboardet:

1. Gå til prosjektet ditt
2. Klikk "Settings" → "Environment Variables"
3. Legg til hver variabel

Du kan velge hvilke miljøer variablene gjelder for:

• Production — Produksjonsdeploymenter
• Preview — PR preview-deployments
• Development — Lokal utvikling via vercel dev

Steg 4: Koble til domene

Legg til domene

I Vercel-dashboardet:

1. Gå til "Settings" → "Domains"
2. Skriv inn domenenavnet ditt
3. Følg instruksjonene for DNS-konfigurasjon

DNS-konfigurasjon

For apex-domene (example.com):

Type: A
Name: @
Value: 76.76.21.21

For subdomain (www.example.com):

Type: CNAME
Name: www
Value: cname.vercel-dns.com

SSL-sertifikater provisjoneres automatisk.

Steg 5: Produksjonsoptimalisering

Aktiver Turbopack

Next.js 15 bruker Turbopack som standard i development, men du kan også aktivere det for builds:

// package.json
{
  "scripts": {
    "build": "next build --turbo"
  }
}

Edge functions for auth

For raskere autentisering, bruk edge runtime:

// middleware.ts
export const config = {
  matcher: ["/dashboard/:path*", "/api/:path*"],
  runtime: "edge",
};

Image optimization

Next.js Image-komponenten optimaliseres automatisk av Vercel:

import Image from "next/image";

<Image
  src="/hero.webp"
  alt="Hero"
  width={1200}
  height={600}
  priority // Last først for above-the-fold bilder
/>

Webhook-oppsett for produksjon

Flere tjenester krever webhook-URLer. Oppdater disse etter deploy:

Stripe webhooks

1. Gå til Stripe Dashboard
2. Klikk "Add endpoint"
3. URL: https://your-domain.com/api/webhooks/stripe
4. Velg events: checkout.session.completed, customer.subscription.*

OAuth callbacks

Oppdater callback-URLer hos OAuth-providere:

Google Cloud Console:

• Authorized redirect URIs: https://your-domain.com/api/auth/callback/google

GitHub Developer Settings:

• Authorization callback URL: https://your-domain.com/api/auth/callback/github

Monitoring og logging

Vercel Analytics

Aktiver i prosjektinnstillingene for:

• Web Vitals (Core Web Vitals)
• Page views
• Real-time brukerdata

Logger

Se logger i real-time:

vercel logs --follow

Eller i Vercel-dashboardet under "Logs".

Deployment-strategier

Preview Deployments

Hver PR får automatisk sin egen URL. Perfekt for:

• Code review
• QA-testing
• Stakeholder-feedback

Rollback

Ting gikk galt? Rollback tar sekunder:

1. Gå til "Deployments" i dashboardet
2. Finn forrige fungerende deployment
3. Klikk "..." → "Promote to Production"

Branch deployments

Konfigurer spesifikke branches for produksjon:

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

Vanlige problemer

Build feiler

Sjekk at alle miljøvariabler er satt. Vanlig feil:

// Dette feiler hvis DATABASE_URL mangler under build
if (!process.env.DATABASE_URL) {
  throw new Error("DATABASE_URL is required");
}

Løsning: Sett variabelen i Vercel før du deployer.

Webhooks mottas ikke

Sjekk at:

1. URL-en er riktig (https, ikke http)
2. Webhook-secret matcher i både Stripe og Vercel
3. API-ruten er publisert (ikke bare lokal)

Database-tilkobling feiler

For Neon PostgreSQL, bruk pooler-URL:

DATABASE_URL=postgresql://...@ep-xxx.eu-central-1.aws.neon.tech/neondb?sslmode=require

Alternativ: Self-hosting

Vercel er ikke den eneste løsningen. Alternativer inkluderer:

Plattform	Best for
Railway	Full-stack med database
Fly.io	Edge computing
Coolify	Self-hosted alternativ
DigitalOcean App Platform	Forutsigbar prising

Men for Next.js er Vercel fortsatt den smidigste opplevelsen.

Konklusjon

Deployment trenger ikke være komplisert. Med Vercel og Next.js:

1. Push til GitHub — Automatisk deployment
2. Preview per PR — Test endringer før merge
3. Instant rollback — Fikse feil på sekunder
4. Zero-config SSL — Sikkerhet uten jobb

LLM-First Boilerplate er optimalisert for Vercel deployment. Alt fra database-tilkoblinger til Stripe webhooks fungerer ut av boksen.

God jul — og god lansering! 🚀🎄

Les mer

• Kom i gang med LLM-First Boilerplate — Komplett oppsett
• Stripe betalingsintegrasjon — Webhook-oppsett for produksjon
• Better Auth autentisering — OAuth callbacks for produksjon

Kilder

• Vercel dokumentasjon — Offisiell dokumentasjon
• Next.js Deployment — Next.js deployment guide
• Vercel CLI — Kommandolinjeverktøy
• Vercel vs Netlify — Sammenligning 2025