Next.js ile web sitesi ve uygulama geliştirme

Next.js ne zaman doğru seçim

Next.js, React üzerine kurulu bir web çatısıdır. Sayfaları tarayıcıya hazır HTML olarak gönderir: bir kısmı derleme sırasında bir kez üretilir, bir kısmı istek geldiğinde sunucuda hazırlanır. Böylece arama motorundan ziyaretçi bekleyen içerik sayfaları ile form, kayıt ve paylaşım gibi uygulama ekranları aynı projede yaşayabilir.

Next.js’in iyi oturduğu durumlar

Ziyaretçilerin önemli bir kısmının arama motorlarından gelmesini bekliyorsunuz
Blog, rehber, ürün ya da şehir sayfaları gibi çok sayıda içerik sayfası olacak
Tanıtım sitesi ile uygulamanın bir parçası (form, paylaşım sayfası, müşteri alanı) aynı projede olsun istiyorsunuz
Siteyi birden fazla dilde yayınlayacaksınız

Next.js’i önermeyeceğimiz durumlar

Tamamı giriş arkasında olan bir yönetim paneli: Vite ile kurulan sade bir React uygulaması yeterli
İçeriği ekibiniz her gün kendisi değiştirecek ve hazır bir içerik yönetim sistemi (ör. WordPress) ihtiyacınızı zaten karşılıyor
Tek sayfalık, nadiren güncellenen bir tanıtım sayfası

Derleme sırasında mı, istek anında mı

Next.js’te bu karar sayfa sayfa verilir. hippotenus.com’un sayfaları derleme sırasında üretiliyor; Atölye Tasarım’da blog, atölye ve proje sayfaları da öyle. Bir okulun kaydettiği tasarımı gösteren paylaşım sayfası ise istek geldiğinde sunucuda hazırlanıyor, çünkü içeriği önceden bilinmiyor.

	Derleme sırasında (statik)	İstek anında (sunucu)
Ne zaman üretilir	Her yayında bir kez	Her istekte ya da belirli aralıklarla
Uygun olduğu sayfa	Blog, rehber, hizmet ve ürün sayfaları	Kullanıcıya ya da kayda göre değişen sayfalar
Sunucu yükü	Hazır dosya olarak sunulur	Her istekte sunucuda hesaplanır
Bizim örneğimiz	hippotenus.com, Atölye Tasarım blogu	Atölye Tasarım’ın tasarım paylaşım sayfası

Ürünlerimizde Next.js ne yapıyor

Yayındaki iki Next.js projemiz farklı ihtiyaçlara cevap veriyor; biri içerik ağırlıklı bir tanıtım sitesi, diğeri içinde 3D tasarlayıcı olan bir firma sitesi.

hippotenus.com Türkçe ve İngilizce yayında; her iki dilin sayfaları derleme sırasında üretiliyor.
LGS, YKS ve KPSS rehberleri kodun yanındaki MDX dosyalarından üretiliyor; site haritası her yayında bu rehberlerle birlikte yeniden oluşuyor.
Öğretmen arama sayfalarında, yeterli içeriği olan şehir ve ders eşleşmeleri için ayrı adresler üretiliyor.
Adresi değişen sayfalar için kalıcı (301) yönlendirmeler Next.js ayarında tutuluyor; eski bağlantılar boşa düşmüyor.
Atölye Tasarım’da 3D tasarlayıcı yalnızca tarayıcıda yükleniyor; sayfanın metni, başlıkları ve paylaşım görselleri sunucudan hazır geliyor.
Okulun gönderdiği tasarım bir Next.js API ucuna gidiyor: Cloudflare Turnstile ile bot kontrolü yapılıyor, fiyat sunucuda yeniden hesaplanıyor, kayıt Drizzle ORM ile Postgres’e, görseller Vercel Blob’a yazılıyor.
Bir müşteri projesinde Next.js’i giriş gerektiren bir portal için kullandık: oturum kontrolü middleware’de yapılıyor, öğrenci ve eğitmen ekranları ayrı rotalarda duruyor ve portal arama motorlarına bilerek kapalı.

Arama motorları için yaptıklarımız

Başlık ve açıklama

Her sayfanın başlığı, açıklaması ve kanonik adresi Next.js’in metadata yapısıyla üretiliyor; hippotenus.com’da bunlar testlerle denetleniyor.

Paylaşım görselleri

Atölye Tasarım’da blog yazıları ve atölye sayfaları için paylaşım görseli kodla üretiliyor; bağlantı WhatsApp’ta ya da sosyal medyada önizlemeyle görünüyor.

Site haritası ve robots

sitemap.ts ve robots.ts ile; yeni bir yazı ya da sayfa eklendiğinde site haritasına kendiliğinden giriyor.

Yapılandırılmış veri

schema.org işaretlemesi (JSON-LD): Atölye Tasarım’da firma bilgileri, blog yazıları ve sayfa yolu (breadcrumb) bu şekilde işaretleniyor.

İlk ekranın hızı

hippotenus.com’da bir test, sayfa başlığının animasyonla gizlenip ilk boyamada görünmez kalmasını engelliyor; böylece Google’ın LCP ölçümü bozulmuyor.

llms.txt

İki sitede de yapay zekâ asistanlarının siteyi doğru özetleyebilmesi için bir llms.txt dosyası var.

Bir Next.js projesi nasıl ilerliyor

01
Ücretsiz keşif görüşmesi
30 dk
Sitenin hangi aramalardan ziyaretçi beklediğini, hangi sayfaların olacağını ve aklınızdaki bütçeyi konuşuyoruz.
02
Yazılı kapsam ve teklif
Sayfa listesini, dilleri, hangi sayfanın derlemede hangisinin istek anında üretileceğini ve kabul kriterlerini yazıya döküyoruz.
03
Haftalık sürümler
Her hafta sitenin çalışan bir sürümünü görüyorsunuz; içerik ve tasarım yorumlarınız bir sonraki haftaya aktarılıyor.
04
Test ve yayın
Senior QA sayfaları yayından önce masaüstünde ve telefonda test ediyor. Eski bir sitenin yerine geçiyorsa eski adreslerin yönlendirmeleri de bu aşamada kuruluyor.
05
Yayından sonraki 30 gün
30 gün
Bu dönemde çıkan hataları ücretsiz düzeltiyoruz; sonrasında aylık bakımla devam edebilirsiniz.

Süre ve bütçe aralıkları web uygulaması geliştirme ve fiyatlar sayfalarımızda yayında; bu sayfadaki her şey aynı rakamları izliyor.

Next.js hakkında sık sorulanlar

Next.js sitemi arama sonuçlarında üst sıralara taşır mı?

Tek başına hayır. Next.js, arama motorunun içeriği eksiksiz okumasını, sayfaların hızlı açılmasını ve başlık, site haritası, yapılandırılmış veri gibi teknik ayrıntıların doğru olmasını sağlar. Sıralamayı asıl belirleyen, içeriğin kendisi ve aramaya ne kadar iyi cevap verdiğidir.

İçeriği kendim güncelleyebilir miyim?

Projelerimizde blog ve rehber içeriği MDX dosyalarında, kodun yanında duruyor; içeriği sık değiştirmeyen ekipler için sade ve güvenli bir yöntem. Ekibiniz içeriği her gün güncelleyecekse bunu keşif görüşmesinde konuşur, kapsamı buna göre yazarız.

Next.js yalnızca Vercel’de mi çalışır?

Hayır. Atölye Tasarım Vercel’de çalışıyor; hippotenus.com hem Vercel’e hem Docker imajı olarak yayınlanacak şekilde ayarlı. Bir müşteri portalını da Docker imajı olarak Coolify ile yayınlanacak şekilde kurduk.

Proje bitince elimde ne kalır?

Yazılım için süresiz bir kullanım lisansı ve dokümantasyon. Kaynak kodun size devri ek ücretle mümkün; bu ücret teklifte ayrıca belirtilir.

Next.js ile web sitesi ve uygulama geliştirme

Bu teknolojiyle geliştirdiklerimiz

Atölye Tasarım

Hippotenus