Vercel Nasıl Kullanılır: İlk Dağıtımdan Üretime Hızlı Bir Rehber

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.

Bir web uygulamasını dağıtmanın, kod göndermekten ziyade bir dosyayı kaydetmek gibi hissettirmesini dilediyseniz, işte size iyi haber: Tam olarak 'in hissettirdiği şey bu. Dakikalar içinde, yerel geliştirmeden, her çekme isteği için önizlemeleri olan ve başında beklemeniz gereken sıfır ile global, uç hızlandırmalı bir uygulamaya geçebilirsiniz. Bu pratik, çözüm odaklı rehber, kurulum, gibi çerçeveler, ortam değişkenleri, sunucusuz fonksiyonlar, , alan adları, depolama, gözlemlenebilirlik ve üretim en iyi uygulamaları dahil olmak üzere 'in nasıl kullanılacağını adım adım anlatır.

Hızlı ilerleyeceğiz, ancak kopyalayıp yapıştırabileceğiniz güvenlik önlemleri, kontrol listeleri ve örnekler elde edeceksiniz. İster bir açılış sayfası, ister bir veya bir monorepo dağıtıyor olun, güvenle yayınlamak için temel bilgileri öğreneceksiniz.

Nedir ve Neden Kullanmalısınız?

, web uygulamalarını geliştirmek, önizlemek ve yayınlamak için bir platformdur. Modern çerçeveler (özellikle ) için optimize edilmiştir ve şunları sunar:

Anında dağıtımlar: Her git push benzersiz bir önizleme 'si oluşturur.

Global performans: Statik varlıklar, ve uçta önbellekleme.

Sunucusuz fonksiyonlar: Sunucuları tedarik etmeden rotaları.

CI'sız önizlemeler: başına otomatik derleme + önizleme.

Birinci sınıf Next.js desteği: Resim Optimizasyonu, (Artımlı Statik Yeniden Oluşturma).

Amacınız minimum operasyonel yük ile hız, ve güvenilirlik ise, 'i nasıl kullanacağınızı öğrenmek hızla karşılığını verir.

Kurulum: 10 Dakikada Nasıl Kullanılır

<a3>vercel.com</a3> adresinde bir hesap oluşturun ve GitHub/GitLab/Bitbucket'i bağlayın.

Deponuzu içe aktarın (örneğin, ). , çerçeveyi ve derleme ayarlarını otomatik olarak algılar.

Dağıt'a tıklayın → derler ve size benzersiz bir önizleme 'si verir.

Proje → Ayarlar → Ortam Değişkenleri altında ortam değişkenlerini ayarlayın.

Üretim Şubesini (genellikle main) ayarlayarak ve 'nizi birleştirerek üretimi destekleyin.

Proje → Alan Adları altında özel bir alan adı ekleyin ve 'i yönlendirin.

Kontrol paneli aracılığıyla izleme derlemeleri, günlükleri ve performansı.

'i nasıl kullanacağınız konusunda en kısa yolu öğrendiniz. Şimdi daha derine inelim.

Başlarken: Yerelden İlk Dağıtıma

1) Bir proje oluşturun veya içe aktarın

Yeni uygulaması:

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

'i başlatın ve gönderin:

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

'de: Yeni Proje → Deposu İçe Aktar → Dağıt.

, çerçeveyi (örneğin, ) otomatik olarak algılar ve npm install, npm run build ve çıktı dizinleri gibi varsayılanları ayarlar.

2) Ortamları anlayın

Geliştirme: Yerel makine (npm run dev).

Önizleme: Her veya şube gönderme, ` gibi benzersiz bir 'ye dağıtılır.

Üretim: Ana şube (yapılandırılabilir) → `

Bu, 'i verimli bir şekilde kullanmanın özüdür: her 'yi paylaşılabilir bir hazırlık bağlantısı olarak ele alın.

Gerçekten Kullanacağınız Temel Kavramlar

Ortam değişkenleri

Proje → Ayarlar → Ortam Değişkenleri'ne gidin.

Geliştirme, Önizleme, Üretim için ayrı ayrı değişkenler ekleyin.

'de, NEXT_PUBLIC_ önekiyle güvenli değişkenleri istemciye gösterin.

Örnek:

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

Kodda kullanım:

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

Sunucusuz Fonksiyonlar ( Rotaları)

'de pages/api/hello.ts veya app/api/hello/route.ts oluşturun.

Örnek (Uygulama Yönlendiricisi):

// app/api/hello/route.ts
import { NextResponse } from 'next/server'
export async function GET {
return NextResponse.json({ message: ' Fonksiyonlarından Merhaba!' })
}

Bunlar, soğuk başlatmaları en aza indirilmiş ve günlükleri panosunda görülebilen sunucusuz fonksiyonlar olarak dağıtılır.

Kimlik doğrulama kontrolleri, testi, yerelleştirme, yeniden yazma veya uçtaki bot/güvenlik duvarı kuralları için kullanın.

Örnek 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
}

Resim Optimizasyonu ve Statik Varlıklar

next/image otomatik olarak 'in Resim Optimizasyonunu kullanır.

Statik dosyaları public/ içine koyun. bunları uçta sunar ve önbelleğe alır.

(Artımlı Statik Yeniden Oluşturma)

Yalnızca değişen sayfaları yeniden oluşturun—tam yeniden dağıtıma gerek yok.

Uygulama Yönlendiricisinde:

export const revalidate = 60 // saniye

Ölçeklenen Dağıtım İş Akışları

Ürün iş akışı olarak şube önizlemeleri

Bir özellik şubesine gönderin → önizleme 'sini tasarım ile paylaşın.

Bağlam içinde geri bildirim toplayın. Ekran görüntüleri yok, sadece canlı özellik.

Onaylandığında birleştirin; main Üretim olarak ayarlanmışsa otomatik olarak üretime geçirir.

, monorepo'ları destekler; içe aktarma sırasında proje kökünü ayarlayın.

Derlemeleri ve yok saymaları yapılandırmak için vercel.json kullanın:

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

Özel derleme ayarları

Proje → Ayarlar → Derleme & Geliştirme'de derleme komutlarını geçersiz kılın.

(dist) veya gibi çerçeveleri kullanıyorsanız Çıktı Dizini'ni ayarlayın.

ile Nasıl Kullanılır (En İyi Nokta)

, için referans çerçevesidir, bu nedenle burada en iyi 'i elde edersiniz.

Rota İşleyicileri, Sunucu Eylemleri, dynamic = 'force-dynamic' ve önbellekleme yönergeleri gibi Uygulama Yönlendiricisi özellikleri doğrudan altyapısına eşlenir.

Önbelleğe alma ile örnek rotası:

// 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)
}

Örnek dinamik işleme kontrolü:

export const dynamic = 'force-dynamic' // statik işlemeyi devre dışı bırak

export const runtime = 'edge'

Bunlar, hızı, tazeliği ve maliyeti dengelemek için 'i nasıl kullanacağınız konusunda pratik kaldıraçlardır.

Alan Adları, ve Yönlendirmeler

Proje → Alan Adları altında bir alan adı ekleyin. , 'yi otomatik olarak sağlar.

için, bir 'i (veya gerektiğinde ) 'in hedefine yönlendirin.

next.config.js veya vercel.json aracılığıyla yönlendirmeler ve yeniden yazmalar:

// 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.