Next.js'in App Router'ı, React uygulamaları hakkında düşünme şeklimizi değiştirdi. Uzun süre her şeyi tarayıcıda çalıştırmaya alışmıştık; artık varsayılan sunucuda çalışıyor ve tarayıcıya yalnızca gereken kadar JavaScript gidiyor. Bu blogu da Next.js 16 ile geliştirdim, deneyimlerimi aktarayım.

Server Components varsayılan

App Router'da bir bileşen, aksini söylemediğiniz sürece Server Component'tir. Yani veritabanına doğrudan erişebilir, gizli anahtarları kullanabilir ve sonucu HTML olarak yollayabilir, bu kod tarayıcıya hiç gitmez.

Etkileşim gerektiğinde (state, event, tarayıcı API'leri) dosyanın başına "use client" koyarsınız. Önemli olan zihinsel kayma şu: istemci bileşeni istisnadır, kural değil. Ne kadar az "use client", o kadar az JavaScript, o kadar hızlı sayfa.

Server Actions ile form derdi biter

Eskiden bir form için ayrı bir API uç noktası yazar, fetch ile çağırır, yükleniyor/hata durumlarını elle yönetirdik. Server Actions bunu kısaltıyor: sunucuda çalışan bir fonksiyonu doğrudan formdan çağırırsınız.

"use server";

export async function mesajGonder(formData) {
  const email = String(formData.get("email") || "");
  // doğrula, veritabanına yaz, sonucu döndür
  return { ok: true };
}

Ayrı bir endpoint yok, ayrı bir tip eşlemesi yok. Form ile sunucu mantığı yan yana duruyor; bu da bakımı kolaylaştırıyor.

Önbellek ve yeniden doğrulama

Güç burada saklı ama tuzak da burada. App Router agresif önbellekler. Veriyi değiştirdiğinizde ilgili yolu yenilemeyi unutmayın:

• Mutasyondan sonra revalidatePath("/...") ile ilgili sayfayı tazeleyin.
• Her zaman taze olması gereken sayfalarda export const dynamic = "force-dynamic" kullanın.

En sık karşılaşılan "neden güncellenmiyor" sorusunun cevabı genelde unutulmuş bir yeniden doğrulamadır.

Sunucu/istemci sınırına dikkat

Bir Server Component'ten Client Component'e veri geçerken, geçen şeyin düz veri (string, sayı, basit nesne) olmasına dikkat edin. Fonksiyon veya karmaşık sınıf örneği geçiremezsiniz. Bu sınır, başta sürpriz yapsa da aslında temiz bir mimariyi zorluyor.

Özet

Next.js 16 ile daha az JavaScript göndererek daha hızlı uygulamalar yapmak mümkün. Anahtar: varsayılan olarak sunucuda kal, etkileşim gerektikçe istemciye in, mutasyon sonrası yeniden doğrulamayı unutma. Bu üç alışkanlık, App Router'ın çoğu sıkıntısını ortadan kaldırıyor.