Deployment su Vercel: zero configurazione e URL di anteprima
Colleghi un repository GitHub a Vercel, configuri le variabili d'ambiente e utilizzi i deployment di anteprima.
Deployment su Vercel: zero configurazione e URL di anteprima è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Perché Vercel?
Vercel è la piattaforma realizzata dal team di Next.js. Offre deployment zero-config: colleghi un repository GitHub e Vercel rileva automaticamente il framework, esegue la build e il deployment a ogni push.
Collegamento di un repository
Importi un repository GitHub/GitLab/Bitbucket dalla dashboard di Vercel. Vercel rileva il framework (Next.js, Vite, CRA) e configura automaticamente le impostazioni della build.
Impostazioni del progetto
Vercel rileva automaticamente il framework, il comando di build (npm run build), la directory di output (.next, dist) e il comando di installazione (npm install). Se necessario, sostituisca questi valori nelle impostazioni del progetto.
Variabili d'ambiente
Aggiunga le variabili d'ambiente nella dashboard di Vercel, in Project Settings → Environment Variables. Imposti valori diversi per gli ambienti Production, Preview e Development.
# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com (Preview)
# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;Deployment di anteprima
A ogni push di un branch Git e a ogni pull request viene assegnato un URL di anteprima univoco (ad esempio, myapp-git-feature-xyz.vercel.app). Lo condivida per la revisione prima del merge: non serve alcun ambiente di staging manuale.
Domini personalizzati
Aggiunga un dominio personalizzato nella dashboard di Vercel. Configuri il DNS (record A o CNAME) affinché punti agli IP di Vercel, che gestirà automaticamente la generazione del certificato SSL.
Configurazione di vercel.json
Affini il comportamento del deployment: reindirizzamenti, header, rewrite e selezione della regione.
// vercel.json
{
"redirects": [
{ "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
],
"headers": [
{
"source": "/api/(.*)",
"headers": [{ "key": "Cache-Control", "value": "no-store" }]
}
],
"regions": ["iad1"] // deploy edge functions to US East
}CLI di Vercel
Utilizzi la CLI di Vercel per eseguire il deployment dal terminale, recuperare localmente le variabili d'ambiente e gestire i progetti.
# Install:
npm install -g vercel
# Link project and deploy:
vercel
# Pull env variables for local dev:
vercel env pull .env.local
# Deploy to production:
vercel --prodFunzioni serverless
I file in api/ (Pages Router) o app/api/*/route.ts (App Router) vengono automaticamente distribuiti come funzioni serverless sull'edge o sul runtime Node.js di Vercel.
Hook di deployment
Crei hook di deployment (URL webhook) per attivare i deployment da servizi esterni, utile per le modifiche ai contenuti di un CMS che devono avviare nuovamente il deployment del sito.
# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy
# In Sanity Studio:
// Call this URL on document publishDeployment di un monorepo
In un monorepo Nx o Turborepo, imposti la directory radice di Vercel sulla cartella dell'app specifica e configuri il comando di build affinché utilizzi il task runner del monorepo.
# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.nextVerifica rapida
Che cos'è un deployment di anteprima di Vercel?
Riepilogo
Colleghi un repository Git a Vercel per ottenere deployment zero-config. Ogni branch riceve un URL di anteprima. Gestisca le variabili d'ambiente per ciascun ambiente nella dashboard, utilizzi vercel.json per reindirizzamenti e header e la CLI di Vercel per i deployment dal terminale e il recupero delle variabili d'ambiente.
Domande Frequenti
La lezione «Deployment su Vercel: zero configurazione e URL di anteprima» è gratuita?
Sì — il testo completo di «Deployment su Vercel: zero configurazione e URL di anteprima» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Deployment su Vercel: zero configurazione e URL di anteprima»?
Colleghi un repository GitHub a Vercel, configuri le variabili d'ambiente e utilizzi i deployment di anteprima. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Deployment su Vercel: zero configurazione e URL di anteprima»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Deployment su Vercel: zero configurazione e URL di anteprima
- Hosting di una SPA React su AWS S3 e CloudFront
- Dockerizzazione di un'app React/Next.js
- CI/CD di React con GitHub Actions