Next.js

Next.js’nin Önemi ve Genel Bakış

Next.js, React tabanlı full-stack web uygulamaları geliştirmek için tasarlanmış açık kaynaklı bir çerçevedir. Vercel tarafından geliştirilen Next.js, sunucu tarafı render (SSR), statik site üretimi (SSG), istemci tarafı render (CSR) ve API rotaları gibi özellikleri entegre eder. Bu çerçeve, geliştiricilere hızlı, SEO dostu ve performanslı uygulamalar oluşturma imkanı sunar. Next.js, otomatik optimizasyonlar, dosya tabanlı routing ve yerleşik araçlarla (görüntü optimizasyonu, font yönetimi) geliştirme sürecini basitleştirir.

Next.js, bireysel geliştiricilerden büyük ekiplere kadar geniş bir yelpazede kullanılır. Örneğin:

• E-ticaret platformları: Nike ve Target, ürün sayfaları için yüksek performanslı çözümler sunar.
• AI araçları: OpenAI ve Claude, dinamik ve hızlı arayüzler için Next.js kullanır.
• Medya siteleri: Washington Post, SEO dostu içerik sunumu için tercih eder.
• Not alma uygulamaları: Notion, kullanıcı dostu arayüzler için Next.js’yi benimser.
• Sosyal medya platformları: TikTok, hızlı yükleme süreleri için kullanır.
• Açık kaynak projeler: Supabase, Cal.com ve Dub.co gibi projeler, ölçeklenebilirlik ve esneklik için Next.js ile inşa edilmiştir.

1. Next.js Nedir?

Next.js, React üzerine inşa edilmiş bir web geliştirme çerçevesidir ve React uygulamalarını üretim hazır hale getirmek için kapsamlı bir araç seti sunar. React’in bileşen tabanlı yapısını temel alır, ancak ek özelliklerle geliştirici deneyimini ve uygulama performansını iyileştirir. Next.js, hem istemci hem de sunucu tarafında çalışabilen hibrit bir çerçeve olarak, statik sitelerden dinamik uygulamalara kadar geniş bir kullanım yelpazesine sahiptir.

Next.js’nin temel farkı, React’in sınırlamalarını (örneğin, SEO için sunucu tarafı render eksikliği) adreslemesidir. Dosya tabanlı routing, otomatik kod bölme (code splitting), yerleşik CSS/TypeScript desteği ve API rotaları gibi özellikler, geliştiricilere sıfır yapılandırma ile güçlü uygulamalar oluşturma imkanı tanır. Ayrıca, Vercel’in bulut platformuyla entegre çalışarak deployment süreçlerini kolaylaştırır.

Next.js, yalnızca frontend değil, aynı zamanda backend işlevselliği sunar. Örneğin, Route Handlers ile API endpoint’leri oluşturulabilir, Server Actions ile sunucu işlemleri yönetilebilir. Bu, Next.js’yi tam yığın (full-stack) uygulamalar için ideal bir seçim yapar.

1.1 Temel Özellikler

• Sunucu Tarafı Render (SSR): Sayfalar sunucuda oluşturulur ve istemciye HTML olarak gönderilir. Bu, SEO’yu iyileştirir ve ilk sayfa yükleme süresini hızlandırır. Örneğin, dinamik veriye dayalı bir blog sayfası SSR ile hızlıca render edilir.
• Statik Site Üretimi (SSG): Sayfalar derleme zamanında oluşturulur ve statik HTML olarak sunulur. Örneğin, bir dokümantasyon sitesi SSG ile düşük gecikme sağlar.
• Incremental Static Regeneration (ISR): Statik sayfalar belirli aralıklarla yeniden oluşturulabilir. Bu, statik hızı dinamik içerikle birleştirir (örneğin, e-ticaret ürün sayfaları).
• Dosya Tabanlı Routing: app/ veya pages/ dizinlerindeki dosyalar otomatik olarak rotalara dönüşür, bu da yönlendirme kodunu azaltır.
• Otomatik Optimizasyonlar: Görüntü optimizasyonu (next/image), font optimizasyonu (next/font) ve kod bölme, performansı artırır.
• API Rotaları ve Route Handlers: Sunucusuz API’ler oluşturmak için app/api/ veya Route Handlers kullanılır.
• TypeScript Desteği: Yerleşik TypeScript entegrasyonu, tip güvenliği ve geliştirici verimliliği sağlar.
• Middleware: Uygulama genelinde yetkilendirme, yönlendirme veya A/B testi gibi işlevler için kullanılır.

2. Kurulum

Next.js ile bir proje başlatmak hızlı ve basittir. Aşağıdaki adımlar, hem otomatik hem de manuel kurulum için rehberdir:

• Gereksinimler: Node.js 18.18 veya üstü yüklü olmalıdır. npm, yarn veya pnpm kullanılabilir.
• Otomatik Kurulum:
  • Terminalde şu komutu çalıştırın: npx create-next-app@latest my-app.
  • İnteraktif CLI, seçenekleri sorar: TypeScript, ESLint/Biome, Tailwind CSS, src/ dizini, App Router, Turbopack ve import alias (@/*). Varsayılan ayarlar modern projeler için uygundur.
  • Kurulum tamamlandığında, cd my-app ile dizine girin.
  • npm run dev ile geliştirme sunucusunu başlatın. Uygulama, localhost:3000’de açılır.
• Manuel Kurulum:
  • Boş bir dizinde npm init -y ile package.json oluşturun.
  • Gerekli paketleri yükleyin: npm install next@latest react@latest react-dom@latest.
  • package.json’a script’ler ekleyin:

    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    }
    

  • app/ dizini oluşturun, app/layout.tsx ile kök layout (HTML/body zorunlu) ve app/page.tsx ile ana sayfa ekleyin.
  • npm run dev ile başlatın.
• Ek Ayarlar: TypeScript için tsconfig.json, ESLint için .eslintrc.json otomatik oluşturulur. Tailwind CSS için tailwind.config.js ve postcss.config.js eklenir. .env.local ile ortam değişkenleri tanımlanabilir.
• Geliştirme ve Üretim: Geliştirme için npm run dev, üretim derlemesi için npm run build, üretim sunucusu için npm start kullanılır. next build, statik dosyalar ve sunucu kodu üretir.

3. Klasör Yapısı

Next.js projeleri, modüler ve düzenli bir klasör yapısıyla gelir. Bu yapı, hem küçük hem de büyük ölçekli projelerde ölçeklenebilirlik sağlar.

• app/ (App Router): Rotalar, layout’lar ve sayfalar için. page.tsx bir sayfayı, layout.tsx paylaşılan UI’yi tanımlar. Örneğin, app/blog/page.tsx → /blog. Dinamik rotalar [slug] ile oluşturulur.
• pages/ (Pages Router): Eski sistemde, her .tsx dosyası bir rota olur (örneğin, pages/about.tsx → /about). API rotaları pages/api/ altında tanımlanır.
• public/: Statik varlıklar (resimler, fontlar) için. /logo.png doğrudan /public/logo.png’den erişilir.
• components/: Yeniden kullanılabilir React bileşenleri için önerilen dizin. Örneğin, bir Header bileşeni burada saklanabilir.
• lib/ veya utils/: Veritabanı bağlantıları, API yardımcıları veya genel fonksiyonlar için.
• styles/: CSS modülleri, Tailwind konfigürasyonu veya global stiller için.
• next.config.js: Webpack, yönlendirmeler, environment variables veya özel ayarlar için.
• tsconfig.json: TypeScript projelerinde otomatik oluşturulur, tip tanımları ve derleyici seçeneklerini içerir.

Büyük projelerde, src/ dizini ile uygulama kodu ayrılabilir. Örneğin, bir e-ticaret sitesinde app/product/[id]/ dinamik rotalar, components/ UI bileşenleri ve lib/ veritabanı işlemleri için organize edilir. Monorepo’larda birden fazla Next.js uygulaması entegre edilebilir.

4. Routing Özellikleri

Next.js, dosya tabanlı routing ile rotaları yönetir. İki ana sistem vardır: App Router (Next.js 13+) ve Pages Router.

4.1 App Router

App Router, app/ dizininde dosya-sistem tabanlı routing kullanır. Daha esnek ve modern bir yaklaşımdır.

• Temel Yapı: app/page.tsx kök sayfayı (/) tanımlar. Nested rotalar alt dizinlerle oluşturulur, örneğin app/blog/post/page.tsx → /blog/post.
• Dinamik Rotalar: [param] dizinleri parametre yakalar. Örneğin, app/blog/[slug]/page.tsx → /blog/my-post. params prop’u ile slug erişilir: { params: { slug: 'my-post' } }.
• Layout’lar: layout.tsx, paylaşılan UI için kullanılır. children prop’u ile iç içe sayfalar sarılır. Kök app/layout.tsx, HTML/body içerir.
• Özel Durumlar: loading.tsx yüklenme UI’si, error.tsx hata UI’si, not-found.tsx 404 sayfası için kullanılır. <Suspense> ile entegre olur.
• Route Handlers: app/api/route.ts ile sunucusuz API endpoint’leri tanımlanır. Örneğin, GET veya POST işleyicileri.
• Özellikler: <Link> ile prefetching, searchParams ile URL parametreleri, middleware ile yönlendirme veya yetkilendirme.

4.2 Pages Router

Pages Router, pages/ dizininde çalışır ve daha basit bir yaklaşımdır.

• Temel Yapı: Her .tsx dosyası bir rota olur, örneğin pages/about.tsx → /about.
• Dinamik Rotalar: [id].tsx ile parametreler yakalanır, örneğin pages/post/[id].tsx → /post/1.
• API Rotaları: pages/api/hello.js ile endpoint’ler tanımlanır.
• Custom App ve Document: _app.tsx global layout, _document.tsx HTML özelleştirmesi için kullanılır.

5. Tek Porttan Full-Stack Uygulama Yönetimi

Next.js, hem frontend hem de backend işlevselliğini tek bir port üzerinden yönetme yeteneğiyle öne çıkar. Bu, geliştiricilere tek bir uygulama sunucusuyla hem istemci tarafı (client-side) hem de sunucu tarafı (server-side) işlemleri gerçekleştirme imkanı tanır, böylece ayrı bir backend sunucusu gereksinimini ortadan kaldırır. Bu özellik, Next.js’yi tam yığın (full-stack) geliştirme için güçlü bir seçenek haline getirir.

• API Rotaları ve Route Handlers: Next.js, app/api/ dizininde veya Pages Router’da pages/api/ altında sunucusuz API endpoint’leri tanımlamayı sağlar. Örneğin, app/api/users/route.ts içinde bir GET işleyici, kullanıcı verilerini döndürebilir:

  import { NextResponse } from 'next/server';
  
  export async function GET() {
    const users = await fetchUsersFromDB(); 
    return NextResponse.json(users);
  }
  

Bu endpoint, /api/users adresinde çalışır ve aynı Next.js sunucusundan sunulur.

Server Components: App Router’da varsayılan olarak sunucu bileşenleri kullanılır. Bu bileşenler, veritabanı sorguları veya dosya işlemleri gibi sunucu tarafı mantığı doğrudan çalıştırır. Örneğin, bir ürün listesi sunucuda alınabilir ve istemciye render edilmiş HTML olarak gönderilir.

Server Actions: Form gönderimleri veya mutasyonlar için Server Actions kullanılır.

Avantajlar: Tek port kullanımı, geliştirme ve deployment süreçlerini basitleştirir. Örneğin, Vercel gibi platformlarda tek bir Next.js uygulaması, hem frontend (React bileşenleri) hem de backend (API’ler, veritabanı işlemleri) için aynı portta çalışır. Bu, CORS sorunlarını azaltır, altyapıyı sadeleştirir ve ölçeklendirmeyi kolaylaştırır.

Örnek Kullanım: Bir e-ticaret uygulamasında, ürün sayfaları (app/products/[id]/page.tsx) sunucu tarafında render edilirken, aynı sunucuda /api/products endpoint’i ürün verilerini sağlar. Bu, ayrı bir backend sunucusuna ihtiyaç duymadan tüm uygulamanın localhost:3000 gibi tek bir portta çalışmasını sağlar.

Sınırlamalar: Karmaşık backend mantığı için (örneğin, yoğun CPU işlemleri), Next.js’nin sunucusuz mimarisi yerine ayrı bir backend (Node.js/Express) tercih edilebilir. Ancak, çoğu modern uygulama için Next.js’nin full-stack yetenekleri yeterlidir.

6. Veri Alma Yöntemleri

Next.js, veri alımını sunucu ve istemci bileşenleriyle optimize eder.

Server Components (App Router): Varsayılan olarak sunucuda çalışır. fetch veya ORM (Prisma, Drizzle) ile veri alınır: await fetch(‘https://api.example.com’). Cache varsayılan olarak etkindir; cache: ‘no-store’ ile devre dışı bırakılır.

Client Components: use hook’u, SWR veya React Query ile istemci tarafı veri alımı. ile streaming yapılır.

Pages Router Veri Alma

getStaticProps: Derleme zamanında veri alır (SSG).

getServerSideProps: Her istekte veri alır (SSR).

getInitialProps: Eski yöntem, artık önerilmez.

Caching ve Revalidation: fetch ile request memoization, revalidate ile ISR. Örneğin, { next: { revalidate: 60 } } 60 saniyede bir yeniler.

Streaming: veya loading.tsx ile veri yüklenirken UI parçalı gönderilir.

Server Actions: Form işlemleri veya sunucu mutasyonları için. Örneğin, bir form gönderimi sunucuda işlenir.

7. Kullanım Senaryoları ve Örnekler

Next.js, çeşitli senaryolarda kullanılır:

E-ticaret: Nike ve Target, ürün sayfaları için SSR/ISR kullanır.

İçerik Siteleri: Washington Post, SEO dostu makaleler için SSG tercih eder.

AI Araçları: OpenAI ve Claude, dinamik arayüzler için Next.js kullanır.

Açık Kaynak: Supabase (veritabanı), Cal.com (takvim), Dub.co (link kısaltma).

Next.js, SEO, performans ve ölçeklenebilirlik gerektiren projelerde öne çıkar.

8. App Router ve Pages Router: Karşılaştırma

9. Kaynakça

• Next.js Resmi Dokümantasyon
• Next.js Showcase
• Next.js GitHub
• Vercel Blog