Next.js 15 ile Web Uygulamalarında Performans Optimizasyonu

Next.js 15, modern web geliştirmesinin zirve noktasını temsil etmektedir. React tabanlı bu framework, sunucu tarafı rendering (SSR), statik site oluşturma (SSG), artımlı statik yenileme (ISR) ve istemci tarafı rendering (CSR) gibi gelişmiş rendering stratejilerini bir arada sunarken, performans optimizasyonu araçlarıyla web uygulamalarınızı en üst düzeyde verimli hale getirir. Hullan Projects olarak Next.js 15'in sunduğu tüm avantajları müşterilerimiz için hayata geçiriyor, rekabetçi dijital dünyada öne çıkmanızı sağlıyoruz.

Anahtar Kavramlar ve Terimler

• SSR (Server-Side Rendering): Her istekte sunucuda HTML üretimi
• CSR (Client-Side Rendering): Tarayıcıda JavaScript ile içerik üretimi
• SSG (Static Site Generation): Derleme zamanında statik HTML üretimi
• ISR (Incremental Static Regeneration): Belirli aralıklarla statik sayfaları güncelleme
• Image Optimization: next/image bileşeni ile otomatik resim optimizasyonu
• Code Splitting: Uygulama kodunu parçalara bölerek yalnızca gerekli kodu yükleme
• Lazy Loading: Bileşen ve modülleri gerektiğinde yükleme
• Caching: Tekrar eden isteklerde önbellek kullanımı
• Web Vitals: Google'ın kullanıcı deneyimi ölçüm metrikleri
• Core Web Vitals: LCP, FID ve CLS'den oluşan temel performans göstergeleri
• LCP (Largest Contentful Paint): En büyük içeriğin görünür hale gelme süresi
• FID (First Input Delay): İlk kullanıcı girişine tepki süresi
• CLS (Cumulative Layout Shift): Sayfa düzenindeki beklenmedik kaymalar
• SEO (Search Engine Optimization): Arama motoru optimizasyonu
• Meta Tags: Sayfa başlığı, açıklama ve sosyal medya etiketleri
• Structured Data: Arama motorlarının içeriği anlaması için şema işaretlemesi
• API Routes: Next.js içinde yerleşik API endpoint'leri
• Middleware: İstekleri sunucuda işleyen ara katman yazılımı
• Serverless/Edge Functions: Sunucusuz ve ağın kenarında çalışan fonksiyonlar
• Bundle Size: Tarayıcıya gönderilen JavaScript paketinin boyutu
• Tree Shaking: Kullanılmayan kod bloklarını bundle'dan eleme
• Minification: Kod boyutunu küçültmek için gereksiz karakterleri kaldırma
• Compression: Veri transfer boyutunu azaltmak için sıkıştırma (Gzip/Brotli)
• CDN (Content Delivery Network): İçerikleri dünya genelinde dağıtarak gecikmeyi azaltma
• Font/Script/CSS Optimizasyonu: Kaynak yükleme stratejileri
• Component Memoization: React bileşenlerini gereksiz yeniden render'dan koruma
• React Hooks (useCallback, useMemo): Performans odaklı React hook'ları
• Context API: React'in dahili durum yönetim mekanizması
• State Management: Uygulama genelinde durum yönetimi (Redux, Zustand, Jotai)
• Monitoring Tools: Vercel Analytics, Google Analytics, Lighthouse, WebPageTest
• Performance Metrics: Page Load Time, TTFB (Time to First Byte), FCP (First Contentful Paint)
• Deployment: Vercel Platform, Production Build, Env Variables
• Error Handling: Hata yönetimi ve kullanıcı dostu hata sayfaları
• Loading States / Skeleton Screens: Yükleme sırasında kullanıcı deneyimini iyileştirme
• Progressive Enhancement: Temel işlevselliği öncelikli kılarak kademeli iyileştirme
• Mobile Optimization: Mobil cihazlar için performans optimizasyonu
• Responsive Design: Farklı ekran boyutlarına uyum sağlayan tasarım
• Touch Optimization: Dokunmatik ekran kullanıcı deneyimi iyileştirme

Next.js 15 Rendering Stratejileri

Next.js 15, web uygulamaları için birden fazla rendering stratejisi sunar. Her stratejinin kendine özgü avantajları ve kullanım senaryoları vardır. Doğru stratejiyi seçmek, uygulamanızın hem performansını hem de SEO başarısını doğrudan etkiler.

1. Server-Side Rendering (SSR)

SSR, her HTTP isteğinde sunucunun dinamik olarak HTML sayfası üretmesini sağlar. Bu yöntemle sayfa içeriği, kullanıcının tarayıcısına ulaşmadan önce hazır hale getirilir.

1. 1Her istekte sunucu tarafında HTML üretilir; içerik her zaman güncel ve dinamiktir.
2. 2SEO açısından üstün; arama motorları tam HTML içeriği indexler.
3. 3TTFB (Time to First Byte) değeri biraz daha yüksek olabilir; ancak kullanıcıya ilk anlamlı içerik çok çabuk ulaşır.
4. 4getServerSideProps (Pages Router) veya async Server Components (App Router) ile uygulanır.
5. 5Anlık değişen veri gerektiren sayfalar (kullanıcı profili, dashboard, arama sonuçları) için idealdir.

1// app/users/page.tsx — Server Component (SSR)
2export default async function UsersPage() {
3  const res = await fetch('https://api.example.com/users', {
4    cache: 'no-store', // Her istekte sunucudan çek
5  });
6  const users = await res.json();
7
8  return (
9    <ul>
10      {users.map((user) => (
11        <li key={user.id}>{user.name}</li>
12      ))}
13    </ul>
14  );
15}

2. Static Site Generation (SSG)

SSG, derleme (build) zamanında tüm sayfaları önceden oluşturur ve statik dosyalar olarak CDN'e yerleştirir. En hızlı yükleme sürelerini sunar.

1. 1Tüm sayfalar build sırasında oluşturulur; sunucu maliyeti minimumdur.
2. 2CDN üzerinden sunulduğundan küresel ölçekte çok hızlı yanıt verir.
3. 3Blog yazıları, belge sayfaları, ürün katalogları gibi sık değişmeyen içerikler için mükemmeldir.
4. 4getStaticProps ve getStaticPaths (Pages Router) veya static async fonksiyonlar (App Router) kullanılır.
5. 5İçerik değişikliklerini yayına almak için yeniden build gerekir.

1// app/blog/[slug]/page.tsx — Static Generation
2export async function generateStaticParams() {
3  const posts = await fetch('https://api.example.com/posts').then(r => r.json());
4  return posts.map((post: { slug: string }) => ({ slug: post.slug }));
5}
6
7export default async function BlogPost({ params }: { params: { slug: string } }) {
8  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
9    cache: 'force-cache', // Build zamaninda onbellegee al
10  }).then(r => r.json());
11
12  return <article><h1>{post.title}</h1><p>{post.content}</p></article>;
13}

3. Incremental Static Regeneration (ISR)

ISR, SSG'nin hız avantajını korurken içeriklerin periyodik olarak güncellenmesine olanak tanır. Tam yeniden build yapmadan sayfaları belirli aralıklarla yeniler.

1. 1revalidate parametresiyle belirlenen aralıkta (örneğin her 60 saniyede) sayfa arka planda yenilenir.
2. 2Kullanıcı her zaman önbelleklenmiş ve hızlı yüklenen sayfayı görür.
3. 3E-ticaret ürün sayfaları, haber siteleri, fiyat listeleri için idealdir.
4. 4On-demand ISR ile belirli bir sayfayı manuel olarak tetikleyerek anında güncelleyebilirsiniz.
5. 5SSG'nin performans avantajını gerçek zamanlı veriyle dengeler.

1// app/products/[id]/page.tsx — Incremental Static Regeneration
2export default async function ProductPage({ params }: { params: { id: string } }) {
3  const product = await fetch(`https://api.example.com/products/${params.id}`, {
4    next: { revalidate: 60 }, // Her 60 saniyede bir yenile
5  }).then(r => r.json());
6
7  return (
8    <div>
9      <h1>{product.name}</h1>
10      <p>{product.price} TL</p>
11    </div>
12  );
13}
14
15// On-demand revalidation — app/api/revalidate/route.ts
16import { revalidatePath } from 'next/cache';
17
18export async function POST() {
19  revalidatePath('/products');
20  return Response.json({ revalidated: true });
21}

4. Client-Side Rendering (CSR)

CSR, sayfa içeriğinin kullanıcının tarayıcısında JavaScript tarafından oluşturulduğu klasik React yaklaşımıdır. Dinamik ve etkileşimli uygulamalar için uygundur.

1. 1İlk yükleme daha yavaş; sayfa içeriği tarayıcıda JavaScript çalıştıktan sonra görünür hale gelir.
2. 2SEO performansı SSR/SSG'ye göre daha düşüktür (arama motorları JavaScript'i her zaman tam olarak çalıştıramaz).
3. 3Kullanıcı oturumu gerektiren, kişiselleştirilmiş veya sık değişen dashboard uygulamaları için uygundur.
4. 4SWR veya TanStack Query gibi kütüphanelerle veri çekimi yönetilebilir.
5. 5Next.js'de 'use client' direktifi ile bileşen bazında CSR kullanılabilir.

Image Optimization: next/image Bileşeni

Görseller, web sayfalarının en büyük performans yükünü oluşturan unsurların başında gelir. Next.js'in yerleşik next/image bileşeni, görsel optimizasyonunu otomatik hale getirerek Core Web Vitals metriklerini olumlu etkiler.

1. 1Otomatik Format Dönüşümü: WebP ve AVIF gibi modern formatlara otomatik dönüştürme; tarayıcı desteğine göre en uygun format seçilir.
2. 2Boyut Optimizasyonu: Görüntüler, gösterildiği ekran boyutuna göre otomatik olarak yeniden boyutlandırılır.
3. 3Lazy Loading: Görüntüler yalnızca viewport'a girerken yüklenir; sayfa ilk yükleme hızı artar.
4. 4Placeholder Desteği: blur veya empty placeholder ile yükleme sırasında daha iyi kullanıcı deneyimi sağlanır.
5. 5CDN Entegrasyonu: Vercel platformunda görüntüler otomatik olarak CDN üzerinden dağıtılır.
6. 6Priority Flag: LCP'yi etkileyen kritik görsellere priority prop eklenerek öncelikli yükleme sağlanır.
7. 7Boyut Tanımlama Zorunluluğu: width ve height prop'ları ile CLS (Cumulative Layout Shift) önlenir.

1import Image from 'next/image';
2
3export default function HeroSection() {
4  return (
5    <div>
6      {/* Yerel gorsel — LCP icin oncelikli */}
7      <Image
8        src="/images/hero.jpg"
9        alt="Hero gorseli"
10        width={1200}
11        height={600}
12        priority
13        placeholder="blur"
14        blurDataURL="data:image/jpeg;base64,..."
15      />
16
17      {/* Harici kaynak — fill modu */}
18      <div style={{ position: 'relative', width: '100%', height: '400px' }}>
19        <Image
20          src="https://cdn.example.com/photo.webp"
21          alt="Urun fotografi"
22          fill
23          sizes="(max-width: 768px) 100vw, 50vw"
24          className="object-cover"
25        />
26      </div>
27    </div>
28  );
29}

Code Splitting ve Lazy Loading: next/dynamic

Büyük JavaScript bundle'ları, ilk sayfa yükleme süresini ciddi ölçüde artırır. Next.js'in code splitting ve dynamic import özellikleri, yalnızca gerekli kodun yüklenmesini sağlar.

1. 1Otomatik Code Splitting: Next.js, her sayfa için ayrı bir bundle oluşturur; kullanıcı yalnızca ziyaret ettiği sayfanın kodunu indirir.
2. 2Dynamic Import: next/dynamic ile bileşenler yalnızca render edilmeleri gerektiğinde yüklenir.
3. 3SSR Devre Dışı Bırakma: Sunucu tarafında yüklenmemesi gereken ağır bileşenler için { ssr: false } kullanılır.
4. 4Suspense Entegrasyonu: React Suspense ile yükleme durumları elegant biçimde yönetilir.
5. 5Route-Based Splitting: Her sayfa kendi bağımsız chunk'ı ile gelir; paylaşılan bileşenler common chunk'ta toplanır.
6. 6Bundle Analizi: @next/bundle-analyzer ile bundle boyutları görselleştirilebilir ve optimizasyon fırsatları belirlenir.

1import dynamic from 'next/dynamic';
2
3// SSR'siz yukle — tarayiciya ozgu kutuphaneler icin
4const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
5  ssr: false,
6  loading: () => <div className="animate-pulse h-64 bg-gray-200 rounded" />,
7});
8
9// Kosullu yukleme
10const AdminPanel = dynamic(() => import('@/components/AdminPanel'), {
11  loading: () => <p>Yukleniyor...</p>,
12});
13
14export default function Dashboard({ isAdmin }: { isAdmin: boolean }) {
15  return (
16    <div>
17      <HeavyChart />
18      {isAdmin && <AdminPanel />}
19    </div>
20  );
21}

Caching Stratejileri

Next.js 15, hem sunucu hem istemci tarafında çok katmanlı bir önbellekleme mekanizması sunar. Doğru caching stratejisi, sunucu yükünü azaltırken kullanıcı deneyimini iyileştirir.

1. 1Full Route Cache: Statik olarak oluşturulan sayfalar build zamanında önbelleğe alınır ve CDN'den sunulur.
2. 2Router Cache (Client-Side): Kullanıcı navigasyonu sırasında ziyaret edilen sayfalar tarayıcıda önbelleklenir.
3. 3Data Cache: fetch() ile alınan veriler, belirtilen revalidate süresi boyunca sunucuda önbelleğe alınır.
4. 4Request Memoization: Aynı istek döngüsünde tekrarlanan fetch çağrıları otomatik olarak tekil hale getirilir.
5. 5Revalidation: revalidatePath() veya revalidateTag() ile belirli önbellekler programatik olarak temizlenebilir.
6. 6Cache-Control Headers: API Route ve middleware ile HTTP cache başlıkları manuel olarak kontrol edilebilir.

Web Vitals ve Core Web Vitals Ölçümü

Google'ın Core Web Vitals metrikleri, web sayfalarının arama sıralamalarını doğrudan etkiler. Next.js 15, bu metrikleri optimize etmek için kapsamlı araçlar sunar.

1. 1LCP (Largest Contentful Paint): Sayfadaki en büyük görünür içeriğin yükleme süresi; hedef 2,5 saniyenin altında olmalıdır. next/image priority flag ve preload kullanımıyla iyileştirilir.
2. 2FID (First Input Delay): Kullanıcının ilk etkileşimine sayfa tepki süresi; hedef 100ms altında. JavaScript yürütme süresi minimize edilmeli, üçüncü taraf scriptler ertelenmelidir.
3. 3CLS (Cumulative Layout Shift): Sayfa içeriğinin beklenmedik kayması; hedef 0,1 altında. Görsel ve iframe boyutları önceden tanımlanmalı, web fontları görünmez metin geçişi kullanılmalıdır.
4. 4TTFB (Time to First Byte): Sunucunun ilk byte'ı göndermesi için geçen süre; CDN kullanımı ve edge fonksiyonlarıyla iyileştirilir.
5. 5FCP (First Contentful Paint): İlk anlamlı içeriğin görünmesi; kritik CSS inline edilmeli, render-blocking kaynaklar ertelenmelidir.
6. 6Ölçüm Araçları: next/web-vitals paketi, Google Search Console, Chrome DevTools Performance sekmesi.

1import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';
2
3export function reportWebVitals(metric) {
4  console.log(metric);
5  // Google Analytics'e gonder
6  if (window.gtag) {
7    window.gtag.event(metric.name, {
8      value: Math.round(metric.value),
9      event_category: 'Web Vitals',
10      event_label: metric.id,
11      non_interaction: true,
12    });
13  }
14}

SEO ve Meta Tag Optimizasyonu

Next.js 15'in Metadata API, arama motoru optimizasyonu için güçlü ve esnek araçlar sunar. Statik ve dinamik meta etiketleri kolaylıkla yönetilebilir.

1. 1Static Metadata: layout.tsx veya page.tsx dosyalarında export const metadata ile tanımlanır; title, description, openGraph, twitter ve robots alanları desteklenir.
2. 2Dynamic Metadata: generateMetadata() async fonksiyonu ile veritabanından veya API'dan alınan veriye göre dinamik meta etiketleri oluşturulur.
3. 3Open Graph ve Twitter Cards: Sosyal medya paylaşımlarında zengin önizleme kartları için opengraph-image.tsx veya static görsel kullanılır.
4. 4Robots.txt ve Sitemap.xml: app/robots.ts ve app/sitemap.ts dosyaları ile programatik olarak oluşturulur; Next.js otomatik olarak doğru URL'leri üretir.
5. 5Canonical URL: alternates.canonical ile tekrarlanan içerik sorunları önlenir.
6. 6Structured Data: JSON-LD formatında şema işaretlemesi, script tag içine yerleştirilerek arama sonuçlarında zengin snippet'ler sağlanır.

1// app/blog/[slug]/page.tsx — Dynamic Metadata
2import type { Metadata } from 'next';
3
4export async function generateMetadata(
5  { params }: { params: { slug: string } }
6): Promise<Metadata> {
7  const post = await fetch(`https://api.example.com/posts/${params.slug}`)
8    .then(r => r.json());
9
10  return {
11    title: post.title,
12    description: post.excerpt,
13    openGraph: {
14      title: post.title,
15      description: post.excerpt,
16      images: [{ url: post.coverImage, width: 1200, height: 630 }],
17    },
18    twitter: {
19      card: 'summary_large_image',
20      title: post.title,
21    },
22  };
23}

API Routes ve Serverless Fonksiyonlar

Next.js 15, aynı proje içinde hem frontend hem de backend kodunu barındırma imkânı sunar. API Routes ile güçlü ve ölçeklenebilir backend hizmetleri oluşturulabilir.

1. 1Route Handlers (App Router): app/api/ dizini altındaki route.ts dosyaları GET, POST, PUT, DELETE gibi HTTP metodlarını işler.
2. 2Serverless Deployment: Vercel'de her API route otomatik olarak bağımsız bir serverless fonksiyon olarak dağıtılır.
3. 3Edge Runtime: Düşük gecikme gerektiren API'lar için export const runtime = 'edge' ile edge ağda çalıştırılabilir.
4. 4Streaming Response: ReadableStream ve Response API ile uzun süren işlemlerde streaming yanıt gönderilebilir.
5. 5Middleware Entegrasyonu: JWT doğrulama, rate limiting, coğrafi yönlendirme gibi işlemler middleware'de merkezi olarak yönetilir.
6. 6Database Bağlantısı: Prisma, Drizzle ORM veya Supabase gibi araçlarla güvenli veritabanı erişimi sağlanır.

1// app/api/posts/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { db } from '@/lib/db';
4
5export async function GET(request: NextRequest) {
6  const { searchParams } = new URL(request.url);
7  const page = Number(searchParams.get('page') ?? '1');
8
9  const posts = await db.post.findMany({
10    skip: (page - 1) * 10,
11    take: 10,
12    orderBy: { createdAt: 'desc' },
13  });
14
15  return NextResponse.json(posts);
16}
17
18export async function POST(request: NextRequest) {
19  const body = await request.json();
20  const post = await db.post.create({ data: body });
21  return NextResponse.json(post, { status: 201 });
22}

Middleware ile İstek Yönetimi

Next.js Middleware, her istekte sunucu tarafında çalışan güçlü bir ara katman mekanizması sunar. Kimlik doğrulama, yerelleştirme ve A/B testleri için idealdir.

1. 1middleware.ts dosyası proje kökünde yer alır ve matcher config ile hangi route'lara uygulanacağı belirtilir.
2. 2Edge Runtime üzerinde çalışır; düşük gecikme ve yüksek performans sağlar.
3. 3NextRequest ve NextResponse API'leriyle istek/yanıt başlıkları, çerezler ve URL'ler manipüle edilebilir.
4. 4Kimlik Doğrulama: Token veya session doğrulama yapılarak korumalı sayfalara erişim kontrol edilir.
5. 5i18n Yönlendirmesi: Accept-Language başlığı veya çerez bazlı dil tespiti ile kullanıcılar doğru dil rotasına yönlendirilir.
6. 6A/B Test: Farklı kullanıcı gruplarını farklı sayfa varyantlarına yönlendirme işlemi merkezi olarak yönetilir.

1// middleware.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { verifyToken } from '@/lib/auth';
4
5export async function middleware(request: NextRequest) {
6  const token = request.cookies.get('auth-token')?.value;
7
8  // Korumali rotalari kontrol et
9  if (request.nextUrl.pathname.startsWith('/dashboard')) {
10    if (!token || !(await verifyToken(token))) {
11      return NextResponse.redirect(new URL('/login', request.url));
12    }
13  }
14
15  // Dil yonlendirmesi
16  const locale = request.cookies.get('NEXT_LOCALE')?.value ?? 'tr';
17  const response = NextResponse.next();
18  response.headers.set('x-locale', locale);
19  return response;
20}
21
22export const config = {
23  matcher: ['/dashboard/:path*', '/(tr|en)/:path*'],
24};

Font, Script ve CSS Optimizasyonu

Harici kaynaklar (fontlar, üçüncü taraf scriptler, CSS dosyaları) doğru yönetilmediğinde sayfa performansını ciddi ölçüde olumsuz etkiler. Next.js bu kaynakları optimize etmek için özel araçlar sunar.

1. 1next/font: Google Fonts ve yerel fontları otomatik olarak self-host'lar, font indirme gecikmesini ortadan kaldırır ve CLS'yi önler. font-display: swap varsayılan olarak uygulanır.
2. 2next/script: Üçüncü taraf scriptler için beforeInteractive, afterInteractive ve lazyOnload stratejileri ile yükleme önceliği kontrol edilir.
3. 3CSS Modüller: Stil çakışmalarını önlemek için otomatik kapsam belirleme sağlar.
4. 4Tailwind CSS Entegrasyonu: PostCSS ile işlenir; kullanılmayan sınıflar production build'de tree-shaking ile elenir.
5. 5Critical CSS: Sayfa ilk yüklemesinde render-blocking CSS minimize edilmeli; kritik stiller inline edilmelidir.
6. 6Import Optimizasyonu: CSS dosyaları tek bir global stylesheet yerine bileşen bazında import edilerek gereksiz yükleme önlenir.

1// app/layout.tsx — Font optimizasyonu
2import { Inter, Raleway } from 'next/font/google';
3import localFont from 'next/font/local';
4
5const inter = Inter({
6  subsets: ['latin'],
7  display: 'swap',
8  variable: '--font-inter',
9});
10
11const raleway = Raleway({
12  subsets: ['latin'],
13  weight: ['400', '700', '900'],
14  variable: '--font-raleway',
15});
16
17const customFont = localFont({
18  src: './fonts/CustomFont.woff2',
19  variable: '--font-custom',
20});
21
22export default function RootLayout({ children }: { children: React.ReactNode }) {
23  return (
24    <html className={`${inter.variable} ${raleway.variable} ${customFont.variable}`}>
25      <body>{children}</body>
26    </html>
27  );
28}

Component Memoization ve React Hooks

React uygulamalarında gereksiz yeniden render'lar performansı olumsuz etkiler. Next.js 15 ile birlikte kullanılan React 19, memoization araçlarını daha da geliştirir.

1. 1React.memo(): Bileşeni prop değişikliklerine karşı önbelleğe alır; aynı prop'larla gereksiz yeniden render önlenir.
2. 2useCallback(): Fonksiyon referanslarını stabilize eder; child bileşenlere prop olarak geçirilen callback'lerin gereksiz yeniden oluşturulması önlenir.
3. 3useMemo(): Hesaplama maliyeti yüksek değerleri önbelleğe alır; bağımlılıklar değişmediğinde yeniden hesaplama yapılmaz.
4. 4React Compiler (Next.js 15): Yeni React derleyicisi, bileşenleri ve hook'ları otomatik olarak memoize eder; manuel optimizasyon ihtiyacını azaltır.
5. 5Virtualization: Uzun listeler için react-window veya react-virtual kütüphaneleri ile yalnızca görünür öğeler render edilir.
6. 6Profiling: React DevTools Profiler ile bileşen render süreleri analiz edilerek darboğazlar tespit edilir.

State Management Seçimi

Next.js 15 App Router mimarisinde sunucu ve istemci bileşenleri ayrımı, state management stratejisini doğrudan etkiler. Doğru kütüphane seçimi uygulamanın performansını belirler.

1. 1Context API: Basit ve orta ölçekli state için uygundur; sık değişen state'lerde tüm consumer'ları yeniden render ettiği için dikkatli kullanılmalıdır.
2. 2Zustand: Küçük bundle boyutu, basit API ve yüksek performansıyla React uygulamaları için popüler seçenektir. Server Component ile doğrudan kullanılamaz; client boundary'de initialize edilir.
3. 3Jotai: Atom tabanlı yaklaşımıyla granüler state yönetimi sağlar; yalnızca ilgili bileşenler yeniden render edilir.
4. 4Redux Toolkit: Büyük ve karmaşık uygulamalar için sektör standardıdır; RTK Query ile veri fetching ve caching entegre edilebilir.
5. 5Server State vs. Client State: Sunucudan gelen veriler için TanStack Query (React Query) veya SWR tercih edilmeli; global client state minimize edilmelidir.
6. 6URL State: Filtre ve arama parametreleri gibi paylaşılabilir state için URL query params kullanımı önerilir.

1// store/useCartStore.ts — Zustand
2import { create } from 'zustand';
3import { persist } from 'zustand/middleware';
4
5interface CartItem { id: string; name: string; price: number; qty: number; }
6interface CartStore {
7  items: CartItem[];
8  addItem: (item: CartItem) => void;
9  removeItem: (id: string) => void;
10  total: () => number;
11}
12
13export const useCartStore = create<CartStore>()(
14  persist(
15    (set, get) => ({
16      items: [],
17      addItem: (item) => set((s) => ({ items: [...s.items, item] })),
18      removeItem: (id) => set((s) => ({ items: s.items.filter(i => i.id !== id) })),
19      total: () => get().items.reduce((sum, i) => sum + i.price * i.qty, 0),
20    }),
21    { name: 'cart-storage' }
22  )
23);
24
25// Bilesendte kullanim
26export function CartButton() {
27  const { items, total } = useCartStore();
28  return <button>Sepet ({items.length}) — {total()} TL</button>;
29}

Build Optimizasyonu: next.config.js

Next.js konfigürasyon dosyası, build sürecini ince ayarlarla optimize etmek için kapsamlı seçenekler sunar.

1. 1Compiler Options: SWC tabanlı derleyici, Babel'e göre çok daha hızlı build süresi sunar; swcMinify ile JS ve CSS minification sağlanır.
2. 2Experimental Features: Next.js 15'te PPR (Partial Prerendering), React Compiler ve diğer deneysel özellikler burada etkinleştirilir.
3. 3Image Domains: Harici görsel kaynaklarına izin vermek için remotePatterns tanımlanır.
4. 4Redirects ve Rewrites: URL yönlendirmeleri ve proxy kuralları next.config.js'de merkezi olarak yönetilir.
5. 5Environment Variables: NEXT_PUBLIC_ öneki ile client-side'a açılan env değişkenleri tanımlanır.
6. 6Webpack Customization: Varsayılan webpack yapılandırması özel loader'lar ve plugin'lerle genişletilebilir.
7. 7Output Export: output: 'export' ile tamamen statik site oluşturma modu etkinleştirilebilir.

1// next.config.js
2/** @type {import('next').NextConfig} */
3const nextConfig = {
4  experimental: {
5    ppr: true,            // Partial Prerendering
6    reactCompiler: true,  // Otomatik memoization
7  },
8  images: {
9    remotePatterns: [
10      { protocol: 'https', hostname: 'cdn.example.com' },
11    ],
12    formats: ['image/avif', 'image/webp'],
13  },
14  compress: true,
15  poweredByHeader: false,
16  async redirects() {
17    return [
18      { source: '/old-path', destination: '/new-path', permanent: true },
19    ];
20  },
21  async headers() {
22    return [
23      {
24        source: '/(.*)',
25        headers: [{ key: 'X-Frame-Options', value: 'DENY' }],
26      },
27    ];
28  },
29};
30
31module.exports = nextConfig;

Monitoring ve Analytics

Uygulamanın gerçek dünya performansını izlemek, sorunları proaktif olarak tespit etmek için kritik önem taşır. Next.js 15, çeşitli monitoring araçlarıyla entegrasyon sunar.

1. 1Vercel Analytics: Vercel platformunda otomatik olarak etkinleştirilir; Web Vitals, sayfa görüntülemeleri ve performans metrikleri gerçek kullanıcı verileriyle izlenir.
2. 2Vercel Speed Insights: Her sayfanın p75 ve p90 Web Vitals değerleri izlenir; gerçek kullanıcı deneyimi verileri sağlanır.
3. 3Google Analytics 4: next/script ile lazy yüklenerek sayfa performansına minimal etki ile entegre edilir.
4. 4OpenTelemetry: Next.js 15'in yerleşik OpenTelemetry desteği ile Datadog, Grafana veya diğer APM araçlarına trace verisi gönderilebilir.
5. 5Lighthouse CI: GitHub Actions entegrasyonuyla her PR'da otomatik Lighthouse taraması yapılarak performans gerileme önlenir.
6. 6Error Tracking: Sentry veya Bugsnag entegrasyonu ile üretim ortamındaki hatalar gerçek zamanlı izlenir.

Mobil Optimizasyon ve Responsive Tasarım

Mobil cihazlar, web trafiğinin büyük bölümünü oluşturmaktadır. Next.js 15 uygulamalarında mobil performans, masaüstü kadar öncelikli olmalıdır.

1. 1Mobile-First CSS: Tailwind CSS ile küçük ekranlar başlangıç noktası alınarak responsive breakpoint'ler eklenir.
2. 2Viewport Meta Tag: next/head veya Metadata API ile viewport meta tag doğru şekilde tanımlanır.
3. 3Touch Targets: Dokunmatik hedefler en az 44x44px boyutunda olmalı; tıklama alanları yeterince büyük tasarlanmalıdır.
4. 4Font Size: Mobile'da okunabilirlik için minimum 16px font boyutu kullanılmalıdır; zoom davranışı kontrol edilmelidir.
5. 5Network-Aware Loading: navigator.connection API ile bağlantı kalitesine göre görsel kalitesi ve içerik yükleme stratejisi ayarlanabilir.
6. 6PWA Desteği: next-pwa ile service worker eklenerek çevrimdışı kullanım ve hızlı yükleme deneyimi sağlanır.

Error Handling ve Loading States

Kullanıcı deneyiminin önemli bir parçası olan hata yönetimi ve yükleme durumları, Next.js 15 App Router'da yerleşik dosya konvansiyonlarıyla zarif biçimde ele alınabilir.

1. 1error.tsx: Her route segmentine özel hata sınırı (Error Boundary) tanımlanır; beklenmedik hatalar yakalanarak kullanıcıya anlamlı mesaj gösterilir.
2. 2loading.tsx: Sayfa yüklenirken gösterilecek iskelet ekran (skeleton screen) veya yükleme animasyonu tanımlanır; React Suspense ile entegre çalışır.
3. 3not-found.tsx: 404 hataları için özelleştirilmiş sayfa; notFound() fonksiyonu ile programatik olarak tetiklenebilir.
4. 4global-error.tsx: Root layout seviyesindeki hatalar için en üst düzey hata sınırı.
5. 5Skeleton Screens: İçerik yüklenene kadar sayfa yapısını gösteren placeholder tasarımlar; CLS'yi önler ve algılanan performansı artırır.
6. 6Progressive Enhancement: JavaScript devre dışı olduğunda bile temel içerik ve navigasyon çalışmalıdır; Server Components bu yaklaşımı doğal olarak destekler.

Next.js 15 Yeni Özellikler

Next.js 15, önceki sürümlere kıyasla performans ve geliştirici deneyimi açısından önemli yenilikler getirmiştir.

1. 1Partial Prerendering (PPR): Aynı sayfada statik ve dinamik içeriğin bir arada bulunmasına olanak tanır. Statik kabuk (shell) anında sunulurken dinamik bölümler Suspense sınırları içinde akış (streaming) ile yüklenir.
2. 2React Compiler Desteği: React 19 ile gelen derleyici, bileşenleri otomatik olarak optimize eder; manuel memo/callback optimizasyonu ihtiyacını azaltır.
3. 3Turbopack (Stable): Rust tabanlı Turbopack bundler artık production-ready; webpack'e göre çok daha hızlı build ve HMR süreleri sağlar.
4. 4Async Request APIs: cookies(), headers() ve searchParams gibi API'lar artık asenkron; daha esnek sunucu tarafı veri yönetimi imkânı sunar.
5. 5Caching Varsayılanları: fetch() artık varsayılan olarak önbelleğe almaz; geliştiriciler önbelleklemeyi açıkça tanımlar — daha öngörülebilir davranış sağlar.
6. 6Self-Hosted Analytics: Vercel platformuna bağımlı olmadan kendi altyapınızda Web Vitals toplama imkânı sunar.

Hullan Projects ile Next.js 15 Geliştirme

Hullan Projects olarak, Next.js 15'in sunduğu tüm avantajları müşterilerimiz için hayata geçiriyor ve her projeyi en üst düzey performans standartlarıyla teslim ediyoruz.

• Rendering Stratejisi Danışmanlığı: Projenizin gereksinimlerine en uygun rendering stratejisini (SSR/SSG/ISR/CSR) analiz eder ve uygularız.
• Core Web Vitals Optimizasyonu: LCP, FID ve CLS metriklerinizi Google'ın hedef değerlerinin altına çekeriz.
• Performans Denetimi: Mevcut Next.js uygulamanızı inceleyerek bottleneck'leri tespit eder ve optimize ederiz.
• SEO Teknik Altyapısı: Metadata API, sitemap, robots.txt ve yapısal veri entegrasyonu ile arama motoru görünürlüğünüzü artırırız.
• Monitoring Kurulumu: Vercel Analytics, Sentry ve OpenTelemetry entegrasyonu ile uygulamanızı 7/24 izleriz.
• Migration Desteği: Eski Next.js Pages Router veya diğer framework'lerden App Router mimarisine geçişinizi yönetiriz.

"Performans bir özellik değil, temel gerekliliktir. Her 100ms gecikme, kullanıcı deneyimini ve dönüşüm oranlarını olumsuz etkiler. Next.js 15 ile bu gecikmeler tarihe karışıyor."

Next.js 15, modern web geliştirmede performans, SEO ve geliştirici deneyimini zirveye taşıyan bir framework olarak öne çıkmaktadır. SSR'dan PPR'a, next/image'dan React Compiler'a kadar sunduğu araçlar, web uygulamalarınızı rakiplerinizden ayırt edecek düzeyde hızlı, ölçeklenebilir ve erişilebilir kılmaktadır. Hullan Projects olarak bu teknolojiyi en iyi şekilde kullanarak dijital hedeflerinize ulaşmanızı sağlıyoruz — bizimle iletişime geçin ve farkı birlikte yaşayalım.