# 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](https://vercel.com) er den kanoniske hosting-plattformen for [Next.js](https://nextjs.org) — 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 | Vercels gratis tier inkluderer 100GB båndbredde og 6000 build-minutter per måned. Mer enn nok for de fleste prosjekter. ## Steg 1: Forbered prosjektet Før du deployer, sørg for at alt fungerer lokalt: ```bash # 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: ```bash # 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=... ``` Bytt til produksjonsnøkler! Test-nøkler (sk_test_, pk_test_) fungerer ikke for ekte betalinger. ## Steg 2: Deploy til Vercel ### Metode 1: Vercel CLI (anbefalt) ```bash # 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: ```bash # Deploy til produksjon vercel --prod ``` ### Metode 2: GitHub-integrasjon 1. Gå til [vercel.com/new](https://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` For [Stripe webhooks](/post/stripe-betalinger-nextjs), husk å oppdatere webhook-URL-en i Stripe-dashbordet til produksjons-URLen din. ## 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: ```json // package.json { "scripts": { "build": "next build --turbo" } } ``` ### Edge functions for auth For raskere autentisering, bruk edge runtime: ```typescript // middleware.ts export const config = { matcher: ["/dashboard/:path*", "/api/:path*"], runtime: "edge", }; ``` ### Image optimization Next.js Image-komponenten optimaliseres automatisk av Vercel: ```tsx import Image from "next/image"; Hero

``` ## Webhook-oppsett for produksjon Flere tjenester krever webhook-URLer. Oppdater disse etter deploy: ### Stripe webhooks 1. Gå til [Stripe Dashboard](https://dashboard.stripe.com/webhooks) 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: ```bash vercel logs --follow ``` Eller i Vercel-dashboardet under "Logs". For mer avansert logging, integrer med [PostHog](https://posthog.com) eller lignende analytics-plattformer. ## 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: ```json // vercel.json { "git": { "deploymentEnabled": { "main": true, "staging": true } } } ``` ## Vanlige problemer ### Build feiler Sjekk at alle miljøvariabler er satt. Vanlig feil: ```typescript // 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](https://neon.tech), 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](https://railway.app) | Full-stack med database | | [Fly.io](https://fly.io) | Edge computing | | [Coolify](https://coolify.io) | Self-hosted alternativ | | [DigitalOcean App Platform](https://digitalocean.com) | 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](/post/drizzle-orm-postgresql-guide) til [Stripe webhooks](/post/stripe-betalinger-nextjs) fungerer ut av boksen. God jul — og god lansering! 🚀🎄 ## Les mer - [Kom i gang med LLM-First Boilerplate](/post/kom-i-gang-med-boilerplate) — Komplett oppsett - [Stripe betalingsintegrasjon](/post/stripe-betalinger-nextjs) — Webhook-oppsett for produksjon - [Better Auth autentisering](/post/better-auth-vs-nextauth) — OAuth callbacks for produksjon ## Kilder - [Vercel dokumentasjon](https://vercel.com/docs) — Offisiell dokumentasjon - [Next.js Deployment](https://nextjs.org/docs/deployment) — Next.js deployment guide - [Vercel CLI](https://vercel.com/docs/cli) — Kommandolinjeverktøy - [Vercel vs Netlify](https://northflank.com/post/vercel-vs-netlify-choosing-the-deployment-platform-in-2025) — Sammenligning 2025 Klar til å lansere? Med LLM-First Boilerplate og Vercel er du fra lokal utvikling til produksjon på minutter.

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

Recent Posts

Hvorfor det er viktig med rask nettside for bedriftssider