Next.js Ortam Değişkenleri — NEXT_PUBLIC_ ve .env Skyversal Üzerinde Nasıl Çalışır?

NEXT_PUBLIC_ neden tarayıcıya açılır? Neden re-deploy gerekir? DATABASE_URL neden gizli tutulmalı? Next.js ortam değişkenlerinin tüm sırları bu rehberde.

Okuma Süresi: 4 Dk
Seviye: Orta

Skyversal, Next.js'in ortam değişkeni (Environment Variables) modelini tamamen destekler. Next.js, güvenlik nedeniyle sunucu tarafında çalışan kod ile tarayıcıya gönderilen kodu birbirinden ayırır. Bu rehberde NEXT_PUBLIC_ önekinin ne işe yaradığını, hangi değişkenlerin istemciye gönderildiğini ve ortam değişkenlerini Skyversal üzerinde güvenli şekilde nasıl yöneteceğinizi öğreneceksiniz.

💡
VPS vs. Skyversal Farkı

Klasik bir VPS'te ortam değişkenlerini sunucuya manuel aktarmak veya .env dosyalarını güvende tutmak ek yapılandırma ve güvenlik sorumluluğu gerektirir. Skyversal, ortam değişkenlerinizi güvenli şekilde saklar ve build ile runtime aşamalarında uygulamanıza güvenli olarak aktarır. Nixpacks ise build sürecinde bu değişkenleri ihtiyaç duyulan noktalarda kullanır.

1. Server-side ve Client-side Değişkenleri

🔒

Sadece Sunucu Tarafında Kullanılanlar

Bu değişkenler yalnızca sunucu tarafında çalışan kod tarafından okunabilir ve tarayıcıya hiçbir zaman gönderilmez.

💡 Server-side Örnekleri
  • Server Components
  • Server Actions
  • Route Handlers
  • API Routes
  • Middleware
DATABASE_URL="postgres://..."
STRIPE_SECRET_KEY="sk_live_xxxxx"
JWT_SECRET="super-secret"
🌍

Tarayıcıdan Erişilebilenler

Tarayıcı tarafından kullanılmasını istediğiniz değişkenlerin başına NEXT_PUBLIC_ eklemelisiniz. NEXT_PUBLIC_ ile başlayan değişkenler gizli değildir. Tarayıcı tarafından okunabilecek şekilde uygulamanın istemci paketine (client bundle) dahil edilir.

NEXT_PUBLIC_API_URL="https://api.example.com"
NEXT_PUBLIC_SUPABASE_URL="https://xyz.supabase.co"
NEXT_PUBLIC_ANALYTICS_ID="G-XXXXXXXX"

2. Skyversal'de Ortam Değişkenleri Nerede Kullanılır?

🏗️ Build Time

  • SSG (Static Site Generation)
  • Static Export
  • next/image
  • Bundle oluşturma

🚀 Runtime

  • Server Components
  • API Routes
  • Server Actions
  • Cron Jobs
  • Background Workers

3. Skyversal'de Ortam Değişkeni Ekleme

Projeye yeni bir ortam değişkeni eklemek için şu adımları izleyin:

  1. Projenizi açın.
  2. Settings → Environment Variables bölümüne gidin.
  3. Anahtar (Key) ve değerini (Value) girin.
  4. Kaydedin.
  5. Gerekliyse Re-deploy başlatın.

4. Neden Re-deploy Gerekiyor?

Server-side değişkenlerde framework'e bağlı olarak yeniden build gerekmeyebilir; ancak NEXT_PUBLIC_ ile başlayan tüm değişkenler Next.js tarafından build sırasında JavaScript paketlerine (client bundle) gömüldüğü için yeni bir deploy önerilir.

1
Environment Variable değişti Yeni bir değer eklendi veya silindi.
2
Yeni Build Next.js kodu derler ve değerleri JS paketine gömer.
3
Deploy Eski versiyon kapanır, yeni versiyon yayına girer.
4
Tarayıcı yeni değeri görür Kullanıcılar sitenize girdiğinde yeni API URL'sini kullanır.

5. Güvenlik İpuçları

⚠️ Dikkat

  • ❌ DATABASE_URL
  • ❌ JWT_SECRET
  • ❌ STRIPE_SECRET_KEY
  • ❌ OPENAI_API_KEY
  • ❌ RESEND_API_KEY

gibi hassas bilgiler için asla NEXT_PUBLIC_ kullanmayın. Bu değişkenler istemci paketine dahil edilir ve Tarayıcı Geliştirici Araçları (Developer Tools) veya istemci tarafındaki JavaScript kodu üzerinden görüntülenebilir.

Sık Sorulan Sorular

NEXT_PUBLIC_ kullanmazsam ne olur?

Tarayıcı tarafındaki kod değişkene erişemez ve değer undefined olur.

Production'da değer değiştirdim ama uygulama eski değeri kullanıyor.

NEXT_PUBLIC_ ile başlayan değişkenler build sırasında istemci paketine gömülür. Yeni değerlerin kullanılabilmesi için Re-deploy gerekir.

.env dosyamı GitHub'a yüklemeli miyim?

Hayır. Yerel geliştirme için kullandığınız .env dosyanız .gitignore içinde bulunmalı, production ortamındaki değişkenler ise Skyversal panelinden yönetilmelidir.

🎉

Her Şey Hazır!

Artık Next.js uygulamanızda hem sunucu tarafındaki gizli anahtarları hem de istemci tarafında kullanılacak ortam değişkenlerini güvenli şekilde yönetebilirsiniz.

Sıradaki Adımlar

Bir sonraki rehberde Next.js Image Optimization, Middleware, ISR ve diğer gelişmiş özelliklerin Skyversal üzerinde nasıl çalıştığını inceleyeceğiz.

Son güncelleme: 27 Temmuz 2026
Bu sayfayı GitHub'da düzenle