Com utilitzar Vercel: Una guia ràpida des del primer desplegament a producció

Q: What is the fastest way to learn how to use Vercel?

Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.

Q: How to use Vercel with Next.js for best performance?

Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.

Q: Can I use Vercel without Next.js?

Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.

Q: How do I set environment variables on Vercel?

In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.

Q: How to use Vercel for custom domains and SSL?

Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.

Si alguna vegada has desitjat que desplegar una aplicació web se sentís més com guardar un fitxer que com enviar codi, aquí tens bones notícies: així és exactament com se sent Vercel quan funciona. En minuts, pots passar del desenvolupament local a una aplicació global accelerada a la vora, amb previsualitzacions per a cada pull request i sense haver de fer de cangur de DevOps. Aquesta guia pràctica i orientada a solucions et guia pas a pas sobre com utilitzar Vercel, cobrint la configuració, frameworks com Next.js, variables d'entorn, funcions serverless, Edge Middleware, dominis, emmagatzematge, observabilitat i les millors pràctiques de producció.

Ens mourem ràpid, però obtindràs proteccions, llistes de verificació i exemples que pots copiar i enganxar. Tant si estàs desplegant una landing page, un SaaS de Next.js o un monorepositori, aprendràs els elements essencials per enviar amb confiança.

Què és Vercel i per què utilitzar-lo?

Vercel és una plataforma per desenvolupar, previsualitzar i enviar aplicacions web. Està optimitzada per a frameworks moderns (especialment Next.js), oferint:

Desplegaments instantanis: Cada git push crea una URL de previsualització única.

Rendiment global: Actius estàtics, Edge Middleware i emmagatzematge a la vora.

Funcions Serverless: Rutes d'API sense provisionar servidors.

Previsualitzacions sense CI: Construcció automàtica + previsualització per PR.

Suport de primera classe per a Next.js: Optimizació d'imatges, Middleware, ISR (Regeneració Estàtica Incremental).

Si el teu objectiu és la velocitat, DX i la fiabilitat amb una sobrecàrrega operativa mínima, aprendre a utilitzar Vercel val la pena ràpidament.

Configuració: Com utilitzar Vercel en 10 minuts

Crea un compte a vercel.com i connecta GitHub/GitLab/Bitbucket.

Importa el teu repositori (per exemple, Next.js, React, SvelteKit, Astro, Remix, Nuxt). Vercel detecta automàticament el framework i la configuració de construcció.

Fes clic a Desplegar → Vercel construeix i et proporciona una URL de previsualització única.

Estableix variables d'entorn a Project → Settings → Environment Variables.

Promociona a producció establint la branca de producció (normalment main) i fusionant la teva PR.

Afegeix un domini personalitzat a Project → Domains i apunta el DNS.

Monitoritza les construccions, els registres i el rendiment a través del panell de control.

Acabes d'aprendre el camí més curt per utilitzar Vercel. Ara anem més enllà.

Començant: Del local al primer desplegament

1) Crea o importa un projecte

Nova aplicació Next.js:

npx create-next-app@latest my-app
cd my-app
npm run dev

Inicialitza Git i fes push:

git init
git add -A
git commit -m "init"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main

A Vercel: New Project → Import Git Repository → Deploy.

Vercel detecta automàticament el framework (per exemple, Next.js) i estableix valors per defecte com npm install, npm run build i directoris de sortida.

2) Comprendre els entorns

Desenvolupament: Màquina local (npm run dev).

Previsualització: Cada PR o push de branca es desplega a una URL única com `

Producció: La branca principal (configurable) → `

Aquest és el nucli de com utilitzar Vercel de manera eficient: tracta cada PR com un enllaç d'staging compartible.

Conceptes bàsics que realment utilitzaràs

Variables d'entorn

Vés a Project → Settings → Environment Variables.

Afegeix variables per a Development, Preview i Production per separat.

A Next.js, exposa variables segures al client amb el prefix NEXT_PUBLIC_.

Exemple:

NEXT_PUBLIC_API_BASE=
DATABASE_URL=postgres://...
JWT_SECRET=supersecret

Utilitza-ho en el codi:

const api = process.env.NEXT_PUBLIC_API_BASE
const conn = process.env.DATABASE_URL

Funcions Serverless (Rutes API)

A Next.js, crea pages/api/hello.ts o app/api/hello/route.ts.

Exemple (App Router):

// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET {
return NextResponse.json({ message: 'Hello from Vercel Functions!' })
}

Aquests es despleguen com a funcions serverless amb cold starts minimitzats i registres visibles al panell de control de Vercel.

Edge Middleware

Utilitza-ho per a comprovacions d'autenticació, proves A/B, localització, reescriptures o regles de bot/firewall a la vora.

Exemple middleware.ts:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const country = req.geo?.country || 'US'
const res = NextResponse.next
res.headers.set('x-country', country)
return res
}

Optimizació d'imatges i actius estàtics

Next.js next/image utilitza automàticament l'optimizació d'imatges de Vercel.

Posa els fitxers estàtics a public/. Vercel els serveix i els emmagatzema a la vora.

ISR (Regeneració Estàtica Incremental)

Reconstrueix només les pàgines que canvien; no cal un redeploy complet.

A Next.js App Router:

export const revalidate = 60 // seconds

Desplega fluxos de treball que escalen

Previsualitzacions de branca com a flux de treball del producte

Fes push a una branca de funcionalitat → comparteix la URL de previsualització amb PM/disseny.

Recull comentaris en context. Sense captures de pantalla, només la funcionalitat en viu.

Fusiona quan s'aprova; Vercel promociona a producció automàticament si main està establert com a Producció.

Monorepositoris

Vercel admet monorepositoris; estableix l'arrel del projecte durant la importació.

Utilitza vercel.json per configurar les construccions i els ignores:

{
"buildCommand": "pnpm -w build",
"ignoreCommand": "git diff --quiet HEAD^ HEAD ./apps/web",
"framework": "nextjs"
}

Configuració de construcció personalitzada

Sobreescriu les ordres de construcció a Project → Settings → Build & Development.

Estableix el Directori de sortida si utilitzes frameworks com Astro (dist) o Remix.

Com utilitzar Vercel amb Next.js (El punt dolç)

Next.js és el framework de referència per a Vercel, de manera que obtindràs la millor DX aquí.

Les funcions de l'App Router com Route Handlers, Server Actions, dynamic = 'force-dynamic' i les directives de caching es mapegen directament a la infraestructura de Vercel.

Exemple de ruta d'API amb caching:

// app/api/products/route.ts
import { NextResponse } from 'next/server'
export async function GET {
const data = await fetch(' { next: { revalidate: 3600 } })
return NextResponse.json(await data.json)
}

Exemple de control de renderització dinàmica:

export const dynamic = 'force-dynamic' // opt out of static rendering

Temps d'execució d'Edge:

export const runtime = 'edge'

Aquestes són palanques pràctiques sobre com utilitzar Vercel per equilibrar la velocitat, la frescor i el cost.

Dominis, SSL i Redireccions

Afegeix un domini a Project → Domains. Vercel proporciona SSL automàticament.

Per al DNS, apunta un CNAME (o A/ALIAS quan sigui necessari) a l'objectiu de Vercel.

Redireccions i reescriptures a través de next.config.js o vercel.json:

// next.config.js
module.exports = {
async redirects {
return lets you chat with AI on any page—handy for generating config snippets, summarizing PR previews, or drafting post-deploy checklists right from the Vercel dashboard.
---
## Next Steps: Ship Something Today
- Create a small Next.js app and deploy it to a preview URL.
- Add a custom domain and try a redirect.
- Introduce one Edge Middleware rule (like a geo header or simple auth gate).
- Hook up error monitoring and check logs after a few test requests.
Once you’ve done this once, you’ll understand not just how to use Vercel, but how to use it to move faster than your process used to allow.
---
## Key Takeaways
- How to use Vercel in practice: connect Git → deploy → preview → merge to prod.
- Lean on built-in features: Edge Middleware, serverless functions, ISR, image optimization.
- Separate envs and automate feedback via previews for every PR.
- Add a domain early; monitor logs and web vitals from day one.
- Optimize cost with caching, ISR, and thoughtful runtime choices.
### FAQ
Q1:What is the fastest way to learn how to use Vercel?
Connect your Git repo, deploy a starter (like Next.js), and explore preview URLs on each push. Then add environment variables, a custom domain, and a simple API route to cover the core workflow.
Q2:How to use Vercel with Next.js for best performance?
Use ISR (`revalidate`), `next/image` optimization, and Edge Middleware for lightweight logic. Cache external fetches and choose edge or serverless runtimes based on workload.
Q3:Can I use Vercel without Next.js?
Yes—Vercel supports frameworks like Astro, SvelteKit, Remix, and Nuxt. Ensure the correct build command and output directory are set, and use `vercel.json` if you need custom routing.
Q4:How do I set environment variables on Vercel?
In the Vercel dashboard, go to Project → Settings → Environment Variables and add values for Development, Preview, and Production. Use `NEXT_PUBLIC_` for variables that must be exposed to the client.
Q5:How to use Vercel for custom domains and SSL?
Add your domain under Project → Domains; Vercel provisions SSL automatically. Point your DNS records (CNAME or A/ALIAS) to Vercel and verify in the dashboard.