VERCEL DEKİ ENVİRONMENT VARİABLES MANTIĞI NEDİR?

VERCEL DEKİ ENVİRONMENT VARİABLE MANTIĞI NEDİR

Vercel’de Environment Variables (Çevre Değişkenleri), projenizin kaynak koduna (GitHub'a) kesinlikle eklememeniz gereken gizli bilgileri, şifreleri, API anahtarlarını veya ortama göre değişen ayarları güvenli bir şekilde saklama mantığına dayanır.

En basit benzetmeyle: Kodunuz bir fabrikadır, Environment Değişkenleri ise o fabrikaya dışarıdan verilen "çalışma talimatları ve anahtarlar" gibidir. Fabrika (kod) değişmez ama içeri soktuğunuz anahtara göre üretim şekli değişir.

İşleyiş mantığını ve neden hayati olduğunu şu başlıklarla özetleyebiliriz:

1. Güvenlik (Veritabanı Şifrenizi Dünyaya Kapatın)

Kodunuzu GitHub gibi platformlara yüklerken, içine veritabanı şifrenizi veya ödeme sistemi (Stripe, vb.) gizli anahtarlarını düz metin olarak yazarsanız, projenizi gören herkes bu şifreleri ele geçirebilir.

• Mantık: Kodun içine const apiKey = "XyZ123secret" yazmak yerine const apiKey = process.env.NEXT_PUBLIC_API_KEY yazarsınız. Gerçek şifreyi ise sadece Vercel panelindeki güvenli kutucuğa yapıştırırsınız. Kodunuz çalınsa bile şifreleriniz güvende kalır.

2. Ortama Göre Davranış Değiştirme (Development vs. Production)

Projeniz yerelde çalışırken (kendi bilgisayarınızda) farklı, internette canlıdayken farklı davranmalıdır. Vercel bunu otomatik yönetmenizi sağlar. Değişkenleri şu ortamlara göre bölebilirsiniz:

• Production (Canlı Ortam): Sitenize gerçek kullanıcılar girdiğinde çalışan değişkenler (Örn: Gerçek kullanıcı veritabanı).
• Preview (Önizleme/Test): GitHub'da yeni bir branch açtığınızda test etmeniz için Vercel'in oluşturduğu geçici sitelerdeki değişkenler (Örn: Test veritabanı).
• Development (Lokal): Kendi bilgisayarınızda (npm run dev yaparken) çalışan değişkenler.

Örnek: Sitenizde bir API linki tanımlayacaksınız. Lokal bilgisayarınızda bu adres http://localhost:3000 iken, canlıya çıktığında [https://sukrugencoglu.com](https://sukrugencoglu.com) olmalıdır. Bunu her defasında kodda değiştirmek yerine tek bir değişkenle Vercel'e bırakırsınız.

Vercel Panelinde Bu İş Nasıl Yapılır?

1. Vercel'de projenizin sayfasına gidin.
2. Settings (Ayarlar) > Environment Variables sekmesine tıklayın.
3. Bir Key (İsim) ve bir Value (Değer) girin. - Key: DATABASE_URL - Value: postgresql://user:password@localhost:5432/mydb
4. Bu değişkenin hangi ortamlarda (Production, Preview, Development) geçerli olacağını seçip Save butonuna basın.

Projede (Kodun İçinde) Nasıl Kullanılır?

Kullandığınız teknolojiye göre (Next.js, Vanilla JS/Node.js, Vite vb.) erişim mantığı küçük değişiklikler gösterir.

A) Sunucu Tarafı (Server-Side) Değişkenleri

Eğer yazdığınız kod sadece sunucuda çalışıyorsa (örneğin bir API Route, veritabanı bağlantısı veya gizli bir token işlemi), değişkeni doğrudan çağırırsınız:

JavaScript

// Bu değişken tarayıcıda (Client-side) asla görünmez, tamamen gizlidir.
const secretToken = process.env.MY_SECRET_API_KEY;

B) Tarayıcı Tarafı (Client-Side) Değişkenleri (Örn: Next.js)

Eğer değişkenin kullanıcının tarayıcısına (JavaScript dosyalarının içine) gitmesini istiyorsanız (örneğin Firebase config, Google Analytics kodu vb.), Next.js gibi framework'lerde başına özel bir ek getirmelisiniz:

JavaScript

// Başına NEXT_PUBLIC_ koyduğunuzda Vercel bunun tarayıcıda okunmasına izin verir.
const googleAnalyticsId = process.env.NEXT_PUBLIC_GA_ID;

(Eğer Vite kullanıyorsanız VITE_, Create React App kullanıyorsanız REACT_APP_ ön ekleri kullanılır).

Yerel Bilgisayarda Nasıl Test Edilir?

Vercel'deki bu değişkenleri kendi bilgisayarınızda kod yazarken de kullanabilmek için projenizin ana dizinine .env.local isimli bir dosya açar ve değişkenleri oraya yazarsınız. Vercel, bu dosyayı .gitignore dosyanıza ekleyerek GitHub'a gitmesini engeller. Alternatif olarak terminalde vercel env pull komutunu kullanarak buluttaki değişkenleri bilgisayarınıza otomatik olarak indirebilirsiniz.