Next.js Nedir?
Next.js, React üzerine kurulu ve Vercel tarafından geliştirilen açık kaynak bir framework'tür; ilk sürümü 2016'da yayımlandı. React, arayüzü bileşenlerden kurmaya yarayan bir kütüphanedir; Next.js ise onu eksiksiz bir web sitesine dönüştürür: sayfa adreslerini yönetir, sayfaları sunucuda hazırlar, veriyi yükler, görselleri ve yazı tiplerini optimize eder. Kurumsal bir siteden bir web uygulamasına kadar her şey tek bir projede toplanabilir.
Projedeki klasörler doğrudan sayfa adreslerine karşılık gelir. Bileşenler varsayılan olarak sunucuda çalışır ve tarayıcıya hazır HTML gönderir; JavaScript yalnızca ziyaretçiye tepki veren parçalar için yüklenir. Sayfalar önceden hazırlanabilir, her ziyarette yeniden oluşturulabilir ya da arka planda tazelenebilir. Görsel bileşeni her cihaza uygun boyutta ve WebP gibi modern biçimlerde dosya sunar; font modülü ise yazı tiplerini sitenin kendi alan adında barındırır.
Next.js, MIT lisansıyla ücretsizdir ve kodu herkese açıktır. Vercel barındırma hizmeti de sunar, ama Next.js ona bağlı değildir: herhangi bir Node.js sunucusunda ya da bir Docker konteynerinde çalışır, daha basit siteler statik dosyalar olarak da dışa aktarılabilir. Güvenlik düzeltmeleri dahil düzenli güncellemeler alır; bunları takip etmek her sitenin bakımının bir parçasıdır.
Next.js'i Nerede Kullanıyoruz?
Bir sitenin hem hızlı olması hem de büyümeye alan bırakması gerektiğinde Next.js'i seçiyoruz. Müşteri projelerinde en çok şu işlerde kullanıyoruz:
Çok Dilli Kurumsal Siteler
Türkçe, İngilizce ve Arapça sürümlerin her birinin kendi adresi olur; her sayfa doğru dil ve okuma yönü bilgisini taşır. Dil sürümleri arasındaki bağlantılar, arama motorlarına hangi ziyaretçiye hangi sürümün gösterileceğini anlatır.
Web Uygulamaları ve Portallar
Müşteri portalları, giriş gerektiren paneller ve randevu ya da teklif araçları herkese açık siteyle aynı projede kurulur. Veri sunucuda çekildiği için parolalar ve servis anahtarları tarayıcıya ulaşmaz, sunucuda kalır.
Kampanya Açılış Sayfaları
Google Ads ve Meta Ads kampanyaları için önceden hazırlanan, hızlı açılan sayfalar kuruyoruz. Google Tag Manager ve GA4 ile ölçüm yalnızca ziyaretçinin çerez onayı çerçevesinde çalışır.
Görsel Ağırlıklı Sayfalar
Ürün, proje ve portfolyo sayfaları çok sayıda fotoğraf taşır. Görsel bileşeni onları her ekrana göre boyutlandırır, aşağıdakileri ziyaretçi yaklaştıkça yükler ve yükleme sırasında sayfa düzeninin kaymasını önler.
Neden Next.js?
Hız ve Arama Görünürlüğü Bir Arada
Sayfalar tarayıcıya hazır HTML olarak ulaşır; ziyaretçi içeriği daha erken görür, arama motorları da betiklerin çalışmasını beklemeden okur. Başlıklar, açıklamalar ve site haritası kodda sayfa sayfa üretilir.
Büyümeye Hazır
Birkaç sayfayla başlayan bir site, teknoloji değiştirmeden üye alanı, randevu akışı ya da yönetim paneli kazanabilir. React üzerine kurulu olduğu için bileşenler proje büyüdükçe yeniden kullanılır.
Barındırma Seçimi Sizde
Siteniz tek bir sağlayıcıya kilitlenmez. Projeye uygun bir sunucu ya da konteyner üzerinde, Cloudflare arkasında yayınlıyoruz; ihtiyaçlarınız değişirse kod sizindir ve taşınabilir.
Projenizde Nasıl İlerliyoruz?
Figma'da onaylanan tasarım ve site haritasıyla başlıyoruz. Hangi sayfaların önceden hazırlanacağına, hangilerinin her ziyarette güncel veri isteyeceğine ve Türkçe, İngilizce, Arapça adreslerin nasıl görüneceğine birlikte karar veriyoruz. Ardından sayfaları çoğunlukla TypeScript ile React bileşenleri olarak kuruyor, formları ve içeriği bağlıyoruz.
Yayından önce Lighthouse ve PageSpeed Insights ile ölçüm yapıyor; her sayfanın başlığını, açıklamasını ve dil bağlantılarını kontrol ediyor, Arapça sürümü gerçek telefonlarda sağdan sola test ediyoruz. Site Cloudflare arkasında yayına çıkıyor, site haritası Google Search Console'a gönderiliyor ve teslimde ekibinize içerik güncellemeyi öğretiyoruz.
