Güvenli Next.js Uygulama Yapısı: Küçük Ekipler İçin Pratik Kontrol Listesi
Next.js projelerinde rota, environment değişkenleri, form güvenliği ve SEO temellerini aynı anda sağlamlaştırmak için uygulanabilir bir rehber.
Güvenli Next.js Uygulama Yapısı#
Next.js hızlı ürün çıkarmak için güçlü bir çatı sunar, fakat hız güvenlik kararlarını ertelemek için bahane olmamalıdır. Küçük bir ekip bile birkaç temel kuralı baştan koyarsa daha az kırılgan, daha okunabilir ve SEO açısından daha sağlıklı bir uygulama geliştirir.
Ortam değişkenlerini ikiye ayırın#
NEXT_PUBLIC_ ile başlayan değişkenler tarayıcıya gider. Bu yüzden API anahtarı, SMTP şifresi, veritabanı parolası veya özel token asla bu prefix ile tutulmamalıdır.
Pratik ayrım:
| Tür | Örnek | Nerede kullanılmalı? |
| --- | --- | --- |
| Public | NEXT_PUBLIC_SITE_URL | Tarayıcı ve metadata |
| Private | SMTP_PASS | Route handler veya server action |
| Secret | DATABASE_URL | Sunucu tarafı veri erişimi |
Bu ayrımı kod inceleme kuralı haline getirmek, ileride oluşacak veri sızıntılarını azaltır.
Route handler'ları doğrulama katmanı olsun#
Bir formdan gelen veriyi doğrudan e-posta, veritabanı veya üçüncü taraf API'ye göndermek risklidir. Route handler içinde en az şu kontroller yapılmalıdır:
- Zorunlu alanlar var mı?
- E-posta formatı geçerli mi?
- Metin uzunluğu makul mü?
- Kullanıcı çok sık istek atıyor mu?
- Hata mesajı hassas bilgi sızdırıyor mu?
Bu kontroller basit görünür ama gerçek projelerde en çok atlanan noktalardır.
Metadata ve canonical URL'leri merkezi yönetin#
SEO tarafında en sık görülen sorun, aynı içeriğin farklı URL'lerde tekrar etmesidir. Çok dilli sitelerde bu daha hızlı büyür. /en ve /tr gibi net dil kökleri kullanıyorsanız her sayfada canonical ve hreflang ilişkisini açıkça üretin.
İyi bir sayfa şunları taşımalıdır:
- Dil bazlı canonical URL
- Alternatif dil bağlantıları
- Açıklayıcı title ve description
- Open Graph görseli
- Article, Breadcrumb veya WebSite JSON-LD şeması
Bileşenleri davranışa göre ayırın#
Server component varsayılan olsun. Sadece state, event handler, tema veya tarayıcı API'si gereken yerlerde client component kullanın. Bu yaklaşım hem bundle boyutunu azaltır hem de veri erişimini daha güvenli tutar.
Örnek karar:
| Bileşen | Tercih | | --- | --- | | Blog listeleme | Server component | | Tema değiştirme | Client component | | Arama input'u | Client component | | Metadata üretimi | Server tarafı |
Sonuç#
Güvenli Next.js yapısı büyük bir framework değişikliği gerektirmez. Doğru env ayrımı, doğrulanan route handler'lar, dil bazlı metadata ve server component önceliği, küçük ekiplerde bile ciddi kalite artışı sağlar.
Ne düşünüyorsun?
Tepki bırakarak geri bildirim ver