Next.js ile Web Uygulama Geliştirme: Neden Next.js Seçmelisiniz?

Next.js Nedir?

Next.js, Vercel tarafından geliştirilen ve React üzerine inşa edilmiş, modern web uygulamaları için tasarlanmış bir full-stack framework'tür. Bugün dünyada milyonlarca web uygulaması Next.js ile çalışmaktadır: Notion, TikTok, Twitch, Hulu ve Netflix'in bazı servisleri bunlar arasındadır.

Sıradan bir React uygulamasının aksine Next.js; sunucu taraflı render (SSR), statik site üretimi (SSG), API route'ları, otomatik kod bölme ve görsel optimizasyonu gibi özellikleri kutudan çıkar çıkmaz sunar.

Next.js'in Temel Özellikleri

App Router (Next.js 13+)

Next.js 13 ile gelen App Router, React Server Components üzerine kurulu yeni bir routing sistemidir:

app/
├── layout.tsx          ← Tüm sayfalarda ortak layout
├── page.tsx            ← Ana sayfa (/)
├── blog/
│   ├── page.tsx        ← /blog
│   └── [slug]/
│       └── page.tsx    ← /blog/[slug]
└── api/
    └── contact/
        └── route.ts    ← API endpoint

React Server Components (RSC) ile veri fetching artık doğrudan component içinde, sunucuda gerçekleşir:

// Server Component — client-side JS olmadan çalışır
async function BlogList() {
  const posts = await fetch('https://api.dgrsoft.com/blog').then(r => r.json());
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Render Stratejileri

Hangi render stratejisini seçmeli?

| Strateji | Ne Zaman | Nasıl | |----------|----------|-------| | SSR (Her istekte render) | Kişiselleştirilmiş içerik, anlık veri | export const dynamic = 'force-dynamic' | | SSG (Build anında render) | Blog, ürün sayfaları, statik içerik | Varsayılan | | ISR (Zamanlı yeniden üretim) | Sık güncellenen ama anlık olmayan içerik | revalidate: 3600 | | CSR (Client-side) | Dashboard, kullanıcıya özel widget'lar | 'use client' |

Görsel Optimizasyonu

next/image bileşeni şunları otomatik yapar:

• WebP/AVIF dönüşümü
• Lazy loading
• Boyut optimizasyonu (srcSet ile responsive)
• CLS'yi sıfıra indiren yer tutucu

import Image from 'next/image';

<Image
  src="/hero.webp"
  alt="DGRSOFT web uygulama geliştirme"
  width={1200}
  height={630}
  priority // LCP elemanı için
/>

Next.js SEO Avantajları

SSR ve SSG ile server'dan tam render edilmiş HTML gelir — arama motorları içeriği anında okur. Bu, SPA'lara (Create React App vb.) kıyasla büyük bir SEO avantajıdır.

Metadata API

// app/hizmetler/page.tsx
export const metadata = {
  title: 'Web Uygulama Geliştirme — DGRSOFT',
  description: 'SaaS platformları, admin paneller ve kurumsal web uygulamaları.',
  openGraph: {
    title: 'Web Uygulama Geliştirme — DGRSOFT',
    images: ['/og-web.jpg'],
  },
  alternates: {
    canonical: 'https://dgrsoft.com/hizmetler/web-uygulama',
  },
};

Otomatik Sitemap

next-sitemap veya App Router'ın yerleşik sitemap.ts özelliğiyle her build'de otomatik sitemap oluşturulur.

Proje Yapısı ve Best Practice'ler

Önerilen Klasör Yapısı

src/
├── app/                 ← Routes
├── components/
│   ├── ui/              ← Button, Input, Modal (yeniden kullanılabilir)
│   ├── sections/        ← Hero, Features, Testimonials (sayfa bölümleri)
│   └── layout/          ← Navbar, Footer
├── lib/                 ← Yardımcı fonksiyonlar, API client'ları
├── hooks/               ← Custom React hook'ları
└── types/               ← TypeScript tip tanımları

Environment Variables

# .env.local (git'e ekleme!)
DATABASE_URL=postgresql://...
NEXT_PUBLIC_SITE_URL=https://dgrsoft.com

# Public değişkenler NEXT_PUBLIC_ prefix'i gerektirir
# NEXT_PUBLIC_ olmayan değişkenler sadece sunucuda erişilebilir

TypeScript ile Type Safety

interface Post {
  id: number;
  title: string;
  slug: string;
  publishedAt: string;
}

async function getPost(slug: string): Promise<Post | null> {
  const res = await fetch(`/api/blog/${slug}`);
  if (!res.ok) return null;
  return res.json();
}

Performans ve Lighthouse Skoru

Next.js ile düzgün yapılandırılmış bir proje kolayca Lighthouse 95+ alabilir.

Kritik optimizasyon noktaları:

1. Font optimizasyonu: next/font ile Google Fonts'u self-host edin — FOUT ve layout shift sıfır
2. Bundle analizi: @next/bundle-analyzer ile büyük paketleri tespit edin
3. Partial Prerendering (PPR): Next.js 15 ile deneysel — statik ve dinamik içeriği aynı sayfada birleştirin
4. Streaming: Suspense ile kritik olmayan UI parçalarını sonradan yükleyin

Next.js vs. Alternatifler

| Framework | Güçlü Yön | Zayıf Yön | |-----------|-----------|-----------| | Next.js | Full-stack, SSR/SSG, büyük ekosistem | Vendor lock-in (Vercel) | | Remix | Nested routing, form handling | Daha küçük ekosistem | | Astro | İçerik siteleri için ultra-hızlı | Dinamik app'ler için sınırlı | | SvelteKit | Svelte performance | React bilgisi aktarılamaz |

Kurumsal web uygulamaları ve SaaS projeleri için Next.js tartışmasız liderdir.

Sık Sorulan Sorular (SSS)

Next.js ücretsiz mi? Evet, Next.js MIT lisanslı ve tamamen ücretsiz open-source bir projedir. Vercel'de deploy etmek zorunlu değilsiniz; herhangi bir Node.js sunucusunda çalışır.

Next.js öğrenmek için ne kadar React bilgisi gerekir? React hook'larını (useState, useEffect, useContext) ve component yapısını bilmeniz yeterlidir. Next.js'i öğrenmek React'e ek olarak 1–2 hafta alır.

Next.js ile e-ticaret sitesi yapılabilir mi? Kesinlikle. Shopify, büyük e-ticaret altyapısının bir bölümünü Next.js ile yönetiyor. Headless commerce için en popüler seçeneklerden biridir.

API ihtiyacım varsa ayrıca bir backend gerekir mi? Basit senaryolar için hayır — Next.js'in API Route'ları (app/api/) yeterlidir. Karmaşık iş mantığı için ayrı bir backend (Node.js, Django, Laravel vb.) tercih edilir.

Sonuç

Next.js, modern web uygulama geliştirmenin baskın framework'ü haline gelmiştir. Performans, SEO uyumluluğu, geliştirici deneyimi ve ekosistem zenginliği açısından rakipsizdir.

DGRSOFT olarak, başlangıçtan canlıya kadar tüm süreçte Next.js ile kurumsal web uygulamaları ve SaaS platformları geliştiriyoruz. Projenizi konuşmak için iletişime geçin.