Dil değiştirme butonum neden cookie kullanıyor, localStorage değil
June 5, 2026
Bu sitede küçük bir TR/EN butonu var. Tıpkı localStorage kullanan dark mode
butonu gibi olur diye düşünmüştüm. Öyle olmadı, ve nedenini çözmek en faydalı
kısımdı.
Dark mode sadece <html> üzerindeki bir class'ı değiştiriyor — bu bir tarayıcı
işi, o yüzden localStorage yeterli. Ama dil içeriği değiştiriyor ve içerik
sunucuda render ediliyor (Server Component'ler). Sunucu localStorage'ı
okuyamaz; o sadece tarayıcıda var. Peki sunucu hangi dili göndereceğini nereden
bilecek?
Bir cookie ile. Cookie'ler her istekle birlikte sunucuya gider, yani sunucu onları okuyabilir. Buton cookie'yi yazar ve yeniden render ister:
document.cookie = `locale=${next}; path=/; max-age=31536000`;
router.refresh();
router.refresh() hoş bir sürprizdi — tam sayfa yeniden yükleme olmadan sunucu
component'lerini yeniden render edip taze HTML'i yerleştiriyor. Formu yarı
doldurmuş olsam, içindekiler yerinde kalırdı. Sayfa sessizce öbür dilde geri
geliyor.
Sunucu tarafında ise birkaç satır (ve Next 16'da cookies() async):
const store = await cookies();
const locale = store.get("locale")?.value === "tr" ? "tr" : "en";
Bunun bedeli, cookie okumanın sayfayı tamamen statik olmak yerine her istekte render edilir hale getirmesi. Bir portfolyo için buna razıyım.
Biraz gurur duyduğum bir detay: iki dil de tipli sözlüklerde duruyor, yani birinde bir metni unutursam boş bir alan yayınlanmaz, build hata verir.