Bu Siteyi Production'da Next.js 16'ya Yükselttik: Ne Bozuldu, Ne Hızlandı

Framework yükseltme yazıları genellikle demo repo'dan yazılır. Bu yazı şu anda okuduğunuz siteden: thecodevolt.com, React Compiler açık ve production'da Turbopack ile Next.js 16 üzerinde çalışıyor ve yükseltme not almaya değer tam dört sürpriz üretti.

Birinci sürpriz, iki dilli siteleri en sert ısıracak olan: middleware.ts artık proxy.ts. Next.js 16 dosya konvansiyonunu yeniden adlandırdı ve hata modu sinsi çünkü sessiz. Bizim locale algılama ve yönlendirme mantığımız next-intl üzerinden o dosyada yaşıyor. Sürüm yükseltmesinden sonra build geçti, site render oldu, /en ve /tr URL'leri doğrudan yazılınca çalıştı; ama kök yönlendirme ve locale müzakeresi düpedüz yok olmuştu. Hata yok, uyarı yok: framework'ün artık bakmadığı bir dosya çağrılmayı bırakıyor. Çözüm, yeniden adlandırma artı export edilen config matcher'ını güncellemek. i18n middleware çalıştırıyorsanız, yükseltmeden sonra ilk iş çıplak domain yönlendirmesini test edin.

İkinci sürpriz, iyi olanı: React Compiler. reactCompiler: true yaptık ve önce hiçbir şey silmedik; sonra animasyon ağırlıklı bileşenlerden useMemo ve useCallback sarmalayıcılarını kademeli olarak kaldırdık ve hiçbir gerileme ölçmedik. Compiler build zamanında memoize ediyor ve bunun gibi Framer Motion ağırlıklı bir sitede bu, her etkileşimli bölümde daha az stale-closure bug'ı ve daha az boilerplate demek. Deneyimimizde production'da stabil; tek uyarı: React kurallarını ihlal eden kurnaz mutasyon numaraları yapan bileşenler sessizce atlanıyor, bu yüzden ESLint react-hooks kurallarınızı açık tutun.

Üçüncü sürpriz: Turbopack hızlı ve kindar. Dev sunucusu açılışı yaklaşık 6 saniyeden 1'in altına indi, hot reload fiilen anlık. Ama Turbopack'in önbelleği, kaynak ağacınıza yazan tek şeyin kendisi olduğunu varsayıyor. Dosyalar dev sunucusunun dışında düzenlendiğinde (bir codegen script'i, git checkout, dosyaları doğrudan yazan bir AI kodlama aracı) hata katmanı göstermeden bayat chunk servis etmeye devam edebiliyor. Belirti çıldırtıcı: değişikliğiniz diskte ve tarayıcı göstermeyi reddediyor. Tedavi sıkıcı: bant dışı düzenlemelerden sonra dev sunucusunu yeniden başlatın ve ekibinize bu kuralı, buna bir saat kaybetmeden önce öğretin.

Dördüncü sürpriz: ESLint flat-config geçişi, planlasanız da planlamasanız da yükseltmenin parçası. Next.js 16'nın lint entegrasyonu eslint.config.mjs flat config bekliyor ve eklenti ekosisteminin yarısı hâlâ eski .eslintrc formatını dokümante ediyor. Config çevirisi için bir saat ayırın ve geçiş hızlansın diye kuralları kapatma dürtüsüne direnin; react-hooks kuralları React Compiler'ı etkili tutan şeyin ta kendisi.

Bozulmayanlar da bir cümleyi hak ediyor: App Router yüzeyi, generateMetadata, route handler'lar, sitemap ve OG görsel üretimi, next-intl mesaj yükleme ve her Framer Motion ile GSAP animasyonu değişmeden çalıştı. Yükseltme gerçekten kademeli; tehlike kodun kendisinde değil, yeniden adlandırılan proxy dosyasında ve kodun etrafındaki araçlarda yoğunlaşıyor.

Orta boy bir production sitesi için dürüst kontrol listesi: önce yeniden adlandırılan konvansiyonlar için sürüm notlarını okuyun, bir branch'te yükseltin, middleware.ts'i proxy.ts yapın, type checker'ı çalıştırın, ESLint config'i taşıyın, her locale yönlendirmesine ve forma tıklayın, sonra React Compiler'ı bisect edebilmek için ayrı bir commit olarak açın. Egzotik bir şey çıkmazsa yarım gün. Siteniz gelir-kritikse ve keskin köşeleri başkasının emmesini isterseniz, bu bizim müşteriler için her hafta yaptığımız türden bir iş.