Next.js 16.4: Yapay Zekâ Ajanınızla Daha Az JavaScript Gönderin

Bir Next.js projesi büyüdükçe JavaScript paketleri (bundle) sessizce şişer. Kimse bunu bilerek yapmaz. Bir component başka bir dosyayı import eder, o dosya da başka bir kütüphaneyi çeker. Sonuçta kullanıcı, o sayfada hiç kullanmayacağı kodu da indirir.

Next.js 16.4 bu işi yapay zekâ ajanınıza devrediyor. Next.js ekibinin 28 Ekim’deki duyurusuna göre yeni next-bundle-optimizer skill’i, ajanınıza Turbopack’in modül grafiğini okuma ve gereksiz yüklenen kodu bulma imkânı veriyor. Bu yazıda skill’in ne yaptığını, nasıl kurulduğunu ve Vercel’in kendi ürünlerinde neler bulduğunu anlatacağım.

next-bundle-optimizer Nedir?

next-bundle-optimizer, kodlama ajanınıza (Claude Code, Codex, Cursor gibi) yüklediğiniz bir agent skill’idir. Ajana, Next.js Bundle Analyzer’ın kullandığı veriye erişim verir: hangi modülün hangi modülü import ettiği, hangi parçanın (chunk) ilk yüklemede geldiği gibi.

Analizör Turbopack’in modül grafiğine dayandığı için Turbopack gerektirir. Next.js 16’dan beri varsayılan bundler zaten Turbopack.

Sorun Nerede Başlıyor?

Ağır bir component’i ertelemek için genelde lazy() kullanırız:

// HeavyComponentLoader.js
'use client';
import { lazy } from 'react';

// Ağır component’i yalnızca gerektiğinde yükle
export const HeavyComponentLoader = lazy(() => import('./HeavyComponent'));

Ama aynı bundle’daki başka bir dosya bu component’i statik olarak import ediyorsa:

// Settings.js
'use client';
// Statik import: HeavyComponent artık ilk yüklemeye dahil
import HeavyComponent from './HeavyComponent';

Ne oluyor? lazy() ile yaptığınız erteleme boşa gidiyor. Kod yine ilk yüklemede geliyor. Bunu kod okuyarak fark etmek de çok zor, çünkü iki dosya birbirinden habersiz.

İşte skill tam olarak bu tür import ilişkilerini buluyor.

Nasıl Çalışır?

Skill, ajana kaydedilmiş next analyze snapshot’larını JSON olarak dışa aktarmayı ve Turbopack’in modül ve chunk grafiklerini yeniden kurmayı öğretiyor. Ardından ajan:

• Birbirine sıkı bağlı büyük modül gruplarını bulur ve bundle’a etkisini ölçer.
• Bu grupların import zincirlerini takip eder.
• Minimum cut yöntemiyle, kesildiğinde bu modülleri erteleyecek en küçük import sınırlarını belirler.
• Önerilerini kaynak kodunuzla ve component’lerin arayüzde nasıl kullanıldığıyla karşılaştırır.

Bunun yanında şunları da yakalayabiliyor:

• React Server Components’e taşınabilecek mantık
• Büyük bağımlılıkların (dependencies) birden fazla sürümü
• Tree shaking uygulanamadığı için pakete giren kullanılmayan kod

Nasıl Kurulur ve Kullanılır? (Adım Adım)

Adım 1 — Next.js 16.4’e Yükseltin

npm install next@latest

Adım 2 — Skill’i Kurun

npx skills add vercel/next.js --skill next-bundle-optimizer

Adım 3 — Önce Rapor Alın

Ajanınızda skill’i çalıştırın:

/next-bundle-optimizer

Varsayılan mod yalnızca rapor üretir. Kaynak kodunuza, bağımlılıklarınıza ve lockfile’ınıza dokunmaz. Belirli bir rotaya odaklanmak isterseniz rotayı isteminizde belirtmeniz yeterli.

Adım 4 — İsterseniz Düzelttirin

/next-bundle-optimizer fix

Bu modda ajan önerdiği değişiklikleri uygular, analizi yeniden çalıştırır ve iki snapshot’ı karşılaştırarak etkisini ölçer. Görünür davranışı ya da zamanlamayı değiştirecek bir adımdan önce size sorar. Ardından her değişiklik için ayrı bir pull request açmasını isteyebilirsiniz.

Vercel’de Neler Buldu?

Next.js ekibi skill’i kendi ürünlerinde denemiş. v0’da:

• Deneme aşamasındaki bir kod editörü, deneye dahil olmayan kullanıcılar için bile neredeyse her sayfada yükleniyordu: çoğu sayfada 150 KB kazanç.
• Merkezi diyalog kaydı (dialog registry) bazı ağır diyalogları önden yüklüyordu: sayfaya göre 40–650 KB.
• Kullanılmayan bir trace viewer component’i çoğu rotadan erişilebilir durumdaydı: sayfaya göre 7–61 KB.

vercel.com’da:

• Vercel Agent paneli açılmasa bile markdown, sözdizimi vurgulama ve grafik kodu yükleniyordu: dashboard sayfasında 255 KB.
• Ağır bir doğal dil tarih ayrıştırma kütüphanesi, kullanıcı asistana dokunmadan yükleniyordu: ortalama 55 KB.
• URL ayrıştırma kodu, ortak bir yardımcı dosya üzerinden bütün gözlemlenebilirlik (observability) sorgu motorunu da çekiyordu: deployments sayfasında 125 KB.

Toplamda yaklaşık 2 MB sıkıştırılmış JavaScript ya tamamen kaldırılmış ya da ihtiyaç anına ertelenmiş. Her düzeltme için ajan bir pull request açmış, ekip değişikliği preview deployment’ta doğrulayıp yayına almış.

Son örnek bence en tanıdık olanı. Küçük bir yardımcı fonksiyon için açtığınız ortak utils dosyası, farkında olmadan koca bir modülü de beraberinde getirebiliyor.

Bundle Analyzer’da Neler Yeni?

Ajan kullanmak istemeyenler için de analizör güncellendi. next analyze komutuyla açılan arayüzde artık şunlar var:

• Rota özeti: En büyük client rotalarınızı listeleyen bir ana sayfa. Bir rotayı açıp tabloyu boyuta göre sıralayabiliyorsunuz.
• Snapshot karşılaştırma: Analizler otomatik kaydediliyor. İki analizi karşılaştırıp bir optimizasyonun etkisini ya da yeni bir bağımlılığın getirdiği büyümeyi görebiliyorsunuz.
• Kritik render yolu: İlk render için senkron yüklenen modüller öne çıkarılıyor, asenkron bağımlılıkları filtreleyebiliyorsunuz.

Analizi kendi araçlarınızda kullanmak isterseniz 16.4 ile gelen next analyze export komutu snapshot’ı JSON Lines olarak veriyor:

# Analizi "before" adıyla kaydet
npx next analyze --output --snapshot before

# Kayıtlı snapshot’ı JSON Lines olarak dışa aktar
npx next analyze export --snapshot before > bundle-graph.jsonl

Ayrıntılar için Next.js paket boyutu (package bundling) rehberine bakabilirsiniz.

Kimleri Etkiler / Ne Yapmalı?

Turbopack kullanan ve özellikle ilk yükleme süresinden ya da Core Web Vitals değerlerinden şikâyetçi olan her Next.js projesi bu araçtan faydalanabilir. Webpack kullanıyorsanız bu skill size göre değil, o tarafta @next/bundle-analyzer eklentisi devam ediyor.

• Projenizi Next.js 16.4 veya üzerine yükseltin.
• Önce next analyze ile en büyük rotalarınıza kendiniz bakın.
• Skill’i kurun ve ilk çalıştırmada yalnızca rapor modunu kullanın.
• Düzeltmeleri ayrı pull request’lerle alın ve preview ortamında test edin. Ertelenen her modül, kullanıcı o özelliğe ilk dokunduğunda ayrıca indirilecek demektir.
• Skill sayfasındaki güvenlik taramalarında Snyk uyarı veriyor. Kurmadan önce göz atmanızda fayda var.
• Codex gibi port açmayı engelleyen bir sandbox’ta çalışıyorsanız next analyze --output adımını sandbox dışında çalıştırmanız gerekebilir.