Bir hava durumu widget'ı küçük görünür ama gerçek bir API entegrasyonunda ihtiyaç duyulan temel kararların çoğunu içerir: istek nereye atılacak, veri ne kadar cache'lenecek, hata olursa kullanıcı ne görecek ve yanıt formatı değişirse uygulama nasıl davranacak?
Bu rehberde API Deposu'ndaki Open-Meteo kaydını temel alarak Next.js App Router içinde server-rendered bir widget tasarlıyoruz. Open-Meteo'nun avantajı, tipik geliştirme ve düşük hacimli kullanımda API anahtarı gerektirmeden çalışmasıdır.
Ne inşa ediyoruz?
Widget üç basit bilgi gösterecek: sıcaklık, rüzgar hızı ve konum etiketi. Örnek konum olarak İstanbul kullanılabilir, ama yapı herhangi bir enlem/boylam çifti için aynıdır. Bileşen sunucuda veri çeker, sonucu kısa süre cache'ler ve API isteği başarısız olursa sayfayı kırmadan boş döner.
Bu yaklaşım özellikle blog, landing page, şehir rehberi, etkinlik sayfası veya operasyon paneli gibi yardımcı hava durumu bilgisi isteyen yüzeylerde uygundur. Kullanıcının kararını doğrudan etkileyen kritik bir meteoroloji ürünü yapıyorsanız daha kapsamlı doğrulama, ikinci veri kaynağı ve gözlemleme gerekir.
Mimari tercih
Next.js tarafında hava durumu isteğini server component içinde yapmak pratik bir başlangıçtır. Böylece tarayıcıdan doğrudan API çağrısı atılmaz, cache süresi tek noktadan yönetilir ve ilk HTML içinde widget hazır gelir. Open-Meteo CORS desteklediği için client-side kullanım da mümkündür, fakat bu durumda her kullanıcı tarayıcısı ayrı istek atabilir.
Server tarafında fetch kullanırken next.revalidate ile 10 dakikalık bir cache penceresi seçebilirsiniz. Hava durumu saniyelik değişen bir veri gibi düşünülmemelidir; çoğu arayüz için birkaç dakikalık gecikme kullanıcı deneyimini bozmaz. Aksine, cache hem sayfa hızını hem de API sağlayıcısına saygılı kullanım modelini iyileştirir.
Veri doğrulama
Hava durumu API'lerinden gelen yanıtlar genellikle sayısal alanlara dayanır. Yine de temperature_2m, wind_speed_10m veya zaman alanı beklediğiniz formatta gelmeyebilir. Bu yüzden UI'a göndermeden önce minimum doğrulama yapmak gerekir.
Basit kural şudur: sıcaklık sayı değilse widget gösterilmesin; rüzgar hızı yoksa alanı saklayın; API yanıtı beklenenden farklıysa kullanıcıya yanlış veri basmayın. Hata durumunda sayfanın geri kalanı çalışmaya devam etmeli. Widget yardımcı bilgi olduğu için tüm sayfayı hata ekranına düşürmek doğru değildir.
Üretim için kontrol listesi
Open-Meteo anahtarsız olduğu için entegrasyon hızlıdır, fakat üretim kalitesi sadece ilk başarılı istekten ibaret değildir. Cache süresini belirleyin, timeout ekleyin, loglarda başarısız istek oranını takip edin ve çok kullanılan sayfalarda API çağrısının gerçekten cache'ten döndüğünü doğrulayın.
Türkiye odaklı ürünlerde global veriyle yetinmeyip yerel kaynak ihtiyacını da değerlendirin. Örneğin bazı senaryolarda Open-Meteo'yu genel widget için, MGM Weather gibi yerel kaynakları ise Türkiye detay sayfaları için kullanmak daha anlamlı olabilir. Bu yazının ana entegrasyonu Open-Meteo olduğu için ilgili katalog kaydı Open-Meteo üzerinden takip edilmelidir.
Kullanıcı deneyimi notları
Widget küçük bir alan kaplasa bile kullanıcıya veri kaynağını ve güncellik hissini vermelidir. "İstanbul için hava durumu" gibi açık bir başlık, sıcaklık birimi, rüzgar birimi ve son güncelleme zamanı belirsizliği azaltır. Hava durumu verisini dekoratif bir kart gibi değil, karar destek bilgisi gibi tasarlamak daha iyi sonuç verir.
Eğer widget ana sayfada yer alıyorsa yüklenme gecikmesi yaratmamalıdır. Server-rendered yaklaşımın avantajı burada görünür: sayfa ilk açıldığında veri hazır gelir veya başarısızsa alan sessizce kaldırılır. Böylece API kesintisi pazarlama sayfasının tamamını bozmaz.
Bu küçük ayrıntılar, widget'ı basit bir süs olmaktan çıkarıp güvenilir bir bilgi bileşenine dönüştürür.
İlgili API Deposu kayıtları
Kaynaklar
Sik Sorulan Sorular
›Open-Meteo için API anahtarı gerekiyor mu?
Hayır. Open-Meteo geliştirme ve düşük hacimli kullanım için API anahtarı olmadan çalışabilen nadir hava durumu API'lerinden biridir.
›Hava durumu verisini ne kadar sık yenilemeliyim?
Pazarlama sayfası veya dashboard widget'ı için 10-15 dakikalık cache çoğu durumda yeterlidir. Her sayfa görüntülemede API çağırmak gereksiz yük oluşturur.
›Widget frontend'de mi backend'de mi veri çekmeli?
Next.js server component ile sunucuda çekmek cache kontrolünü kolaylaştırır ve ilk yüklemede içeriği hazır gösterir. Client-side fetch de mümkündür, ancak cache ve hata yönetimi ayrıca düşünülmelidir.