Next.js ile Modern Web Uygulamaları Geliştirme

Next.js Nedir?

Next.js, Vercel tarafından geliştirilen ve React üzerine inşa edilmiş açık kaynaklı bir web framework'üdür. React'ın sunucu tarafı renderlama (SSR), statik site oluşturma (SSG) ve artımlı statik yeniden oluşturma (ISR) gibi gelişmiş yeteneklerle donatılmış halidir. İlk olarak 2016 yılında yayımlanan Next.js, günümüzde en popüler React framework'ü konumundadır.

Next.js, "zero-config" felsefesiyle geliştiricilere hızlı başlangıç imkanı sunar. Webpack yapılandırması, Babel ayarları, routing sistemi ve kod bölme gibi karmaşık konfigürasyonlar framework tarafından otomatik olarak yönetilir. Geliştiriciler, yapılandırma detayları yerine iş mantığına odaklanabilir.

Dosya Tabanlı Yönlendirme (File-based Routing)

Next.js'in en dikkat çekici özelliklerinden biri dosya tabanlı yönlendirme sistemidir. React Router gibi harici bir kütüphane kullanmaya gerek kalmadan, dosya sistemi yapısı doğrudan URL yapısına dönüşür.

Pages Router (Klasik Yaklaşım)

Next.js'in ilk yönlendirme sistemi olan Pages Router'da, pages dizini altındaki her dosya otomatik olarak bir rota olur.

pages/
├── index.js          → /
├── about.js          → /about
├── blog/
│   ├── index.js      → /blog
│   └── [slug].js     → /blog/:slug (dinamik rota)
├── products/
│   └── [id]/
│       └── reviews.js → /products/:id/reviews
└── api/
    └── users.js      → /api/users (API endpoint)

App Router (Yeni Yaklaşım)

Next.js 13 ile tanıtılan App Router, React Server Components üzerine inşa edilmiş modern bir yönlendirme sistemidir. app dizini altında çalışır ve her rotanın kendi layout, loading, error ve page dosyaları olabilir.

app/
├── layout.js         → Kök layout (tüm sayfalar)
├── page.js           → / (ana sayfa)
├── about/
│   └── page.js       → /about
├── blog/
│   ├── layout.js     → Blog layout
│   ├── page.js       → /blog
│   ├── loading.js    → Yükleme durumu
│   ├── error.js      → Hata durumu
│   └── [slug]/
│       └── page.js   → /blog/:slug
└── (dashboard)/      → Route group (URL'ye yansımaz)
    ├── layout.js
    ├── settings/
    │   └── page.js   → /settings
    └── analytics/
        └── page.js   → /analytics

Rendering Stratejileri: SSR, SSG ve ISR

Next.js'in en güçlü yönlerinden biri, farklı sayfalarda farklı rendering stratejileri kullanabilme esnekliğidir. Her sayfanın ihtiyacına göre en uygun strateji seçilebilir.

Server-Side Rendering (SSR)

SSR'da sayfa, her istek geldiğinde sunucuda oluşturulur ve hazır HTML olarak istemciye gönderilir. Bu yaklaşım, her zaman güncel veri gerektiren sayfalar için idealdir. Arama motorları tam HTML içeriğini görebildiği için SEO açısından da avantajlıdır.

// Pages Router - SSR
export async function getServerSideProps(context) {
  const { params, req, res, query } = context;
  const data = await fetchProductData(params.id);
  
  if (!data) {
    return { notFound: true };
  }
  
  return {
    props: { product: data }
  };
}

export default function ProductPage({ product }) {
  return (
    <article>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>Fiyat: {product.price} TL</span>
    </article>
  );
}

Static Site Generation (SSG)

SSG'de sayfalar derleme zamanında (build time) oluşturulur ve statik HTML dosyaları olarak sunulur. Bu yaklaşım, içeriği sık değişmeyen sayfalar için en iyi performansı sunar. CDN üzerinden sunulabileceği için dünya genelinde düşük gecikme süreleri elde edilir.

// Pages Router - SSG
export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map(post => ({
    params: { slug: post.slug }
  }));
  
  return {
    paths,
    fallback: 'blocking' // veya false, true
  };
}

export async function getStaticProps({ params }) {
  const post = await getPostBySlug(params.slug);
  
  return {
    props: { post },
    revalidate: 3600 // 1 saat sonra yeniden oluştur (ISR)
  };
}

Incremental Static Regeneration (ISR)

ISR, SSG'nin esnekliğini artıran bir stratejidir. Sayfalar derleme zamanında oluşturulur, ancak belirli bir süre sonra arka planda yeniden oluşturulabilir. Bu sayede statik sayfaların hızından ödün vermeden içerik güncelliği sağlanır.

ISR'ın çalışma prensibi şöyledir: İlk istek, derleme zamanında oluşturulmuş statik sayfayı sunar. Belirlenen süre (revalidate) dolduktan sonra gelen ilk istek, eski sayfayı sunarken arka planda yeni versiyonu oluşturur. Bir sonraki istek, güncellenen sayfayı alır.

React Server Components

App Router ile birlikte gelen React Server Components (RSC), Next.js'in en devrimci özelliğidir. Server Components, sunucuda çalışan ve JavaScript paketine dahil edilmeyen bileşenlerdir. Bu sayede istemciye gönderilen JavaScript miktarı önemli ölçüde azalır.

Server vs Client Components

App Router'da tüm bileşenler varsayılan olarak Server Component'tir. İstemci tarafı etkileşim gerektiren bileşenler, dosyanın başına "use client" direktifi eklenerek Client Component olarak işaretlenir.

// Server Component (varsayılan)
// Veritabanına doğrudan erişebilir, API anahtarları güvenle kullanılabilir
async function ProductList() {
  const products = await db.products.findMany();
  
  return (
    <ul>
      {products.map(product => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

// Client Component
'use client';
import { useState } from 'react';

function AddToCartButton({ productId }) {
  const [loading, setLoading] = useState(false);
  
  const handleClick = async () => {
    setLoading(true);
    await addToCart(productId);
    setLoading(false);
  };
  
  return (
    <button onClick={handleClick} disabled={loading}>
      {loading ? 'Ekleniyor...' : 'Sepete Ekle'}
    </button>
  );
}

Server Components'in Avantajları

• Azaltılmış paket boyutu: Server Component kodu istemciye gönderilmez, JavaScript paketi küçülür.
• Doğrudan veri erişimi: Veritabanı, dosya sistemi ve API'lere doğrudan erişim sağlar, ayrı bir API katmanına gerek kalmaz.
• Güvenlik: Hassas veriler (API anahtarları, veritabanı bağlantı bilgileri) istemciye asla gönderilmez.
• Akış (Streaming): Bileşenler hazır oldukça istemciye gönderilebilir, tüm sayfanın yüklenmesini beklemeye gerek kalmaz.

API Routes

Next.js, aynı proje içinde API endpoint'leri oluşturmayı sağlar. Bu sayede ayrı bir backend sunucusuna gerek kalmadan full stack uygulamalar geliştirilebilir.

Pages Router API Routes

// pages/api/users.js
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const users = await db.users.findMany();
    res.status(200).json(users);
  } else if (req.method === 'POST') {
    const user = await db.users.create({ data: req.body });
    res.status(201).json(user);
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

App Router Route Handlers

// app/api/users/route.js
import { NextResponse } from 'next/server';

export async function GET() {
  const users = await db.users.findMany();
  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return NextResponse.json(user, { status: 201 });
}

Veri Çekme (Data Fetching)

App Router'da veri çekme, React'ın async/await desteği sayesinde doğal ve sezgisel bir şekilde yapılır. Server Components içinde doğrudan async fonksiyonlar kullanılabilir.

Paralel ve Sıralı Veri Çekme

// Sıralı veri çekme (waterfall) - önerilmez
async function Page() {
  const user = await getUser(); // İlk bu tamamlanır
  const posts = await getPosts(user.id); // Sonra bu başlar
  return <div>...</div>;
}

// Paralel veri çekme - önerilir
async function Page() {
  const userPromise = getUser();
  const postsPromise = getPosts();
  const [user, posts] = await Promise.all([userPromise, postsPromise]);
  return <div>...</div>;
}

Önbellekleme ve Yeniden Doğrulama

Next.js, fetch isteklerini varsayılan olarak önbelleğe alır. Bu davranış, cache ve revalidate seçenekleri ile kontrol edilebilir.

// Önbelleğe al ve 1 saat sonra yeniden doğrula
const data = await fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }
});

// Önbellek kullanma
const data = await fetch('https://api.example.com/data', {
  cache: 'no-store'
});

// Sonsuza kadar önbelleğe al
const data = await fetch('https://api.example.com/data', {
  cache: 'force-cache'
});

Stillendirme Seçenekleri

Next.js, çeşitli stillendirme yaklaşımlarını destekler. Proje gereksinimlerine ve ekip tercihlerine göre en uygun yaklaşım seçilebilir.

CSS Modules

Next.js'te CSS Modules varsayılan olarak desteklenir. Her bileşen için izole CSS sınıfları oluşturulur ve isim çakışmaları otomatik olarak önlenir. Dosya adının .module.css uzantısı ile bitmesi yeterlidir.

Tailwind CSS

Utility-first CSS framework'ü olan Tailwind CSS, Next.js projelerinde sıkça kullanılır. create-next-app ile proje oluştururken Tailwind CSS entegrasyonu otomatik olarak yapılabilir. JIT (Just-In-Time) derleyicisi sayesinde yalnızca kullanılan sınıflar üretim paketine dahil edilir.

CSS-in-JS

styled-components ve Emotion gibi CSS-in-JS kütüphaneleri de kullanılabilir. Ancak App Router'da Server Components ile uyumluluğa dikkat edilmelidir. CSS-in-JS kütüphaneleri genellikle Client Component gerektirir.

Deployment ve Vercel

Next.js uygulamaları çeşitli platformlarda dağıtılabilir, ancak Vercel, Next.js'in tüm özelliklerini en iyi destekleyen platformdur.

Vercel ile Deployment

• Git deposu bağlandığında otomatik dağıtım yapılır.
• Her pull request için önizleme ortamı oluşturulur.
• Edge Network ile global düzeyde düşük gecikme süresi sağlanır.
• Serverless Functions ile API routes otomatik ölçeklenir.
• ISR ve on-demand revalidation tam olarak desteklenir.
• Analytics ve performans izleme dahilidir.

Self-Hosting

Next.js uygulamaları Docker ile konteynerize edilerek herhangi bir sunucuda çalıştırılabilir. Node.js sunucusu, statik export veya özel sunucu yapılandırması seçenekleri mevcuttur.

# Dockerfile
FROM node:20-alpine AS base

FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build

FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

EXPOSE 3000
CMD ["node", "server.js"]

Performans Optimizasyonu

Image Optimization

Next.js'in yerleşik Image bileşeni, görselleri otomatik olarak optimize eder. WebP ve AVIF formatlarına dönüşüm, responsive görseller, lazy loading ve boyut optimizasyonu otomatik olarak yapılır. Bu özellik, sayfa yükleme süresini ve Core Web Vitals metriklerini önemli ölçüde iyileştirir.

Font Optimization

next/font modülü, Google Fonts ve özel fontları derleme zamanında optimize eder. Fontlar self-host edilir, dış ağ istekleri ortadan kalkar ve layout shift önlenir. Bu sayede CLS (Cumulative Layout Shift) metriği iyileşir.

Bundle Analyzer

next/bundle-analyzer paketi ile JavaScript paketinin boyutu görselleştirilir. Hangi kütüphanelerin ne kadar yer kapladığı tespit edilir ve optimizasyon fırsatları belirlenir.

Middleware

Next.js Middleware, bir istek tamamlanmadan önce kod çalıştırmanızı sağlar. Kimlik doğrulama, yönlendirme, A/B testi, coğrafi konum tabanlı içerik ve istek/yanıt başlıkları düzenleme gibi senaryolarda kullanılır. Edge Runtime üzerinde çalıştığı için çok düşük gecikme süreleri ile yanıt verir.

// middleware.js (proje kök dizini)
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Kimlik doğrulama kontrolü
  const token = request.cookies.get('auth-token');
  
  if (!token && request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  // Dil yönlendirmesi
  const locale = request.headers.get('accept-language')?.split(',')[0];
  if (locale?.startsWith('tr') && !request.nextUrl.pathname.startsWith('/tr')) {
    return NextResponse.redirect(new URL(`/tr${request.nextUrl.pathname}`, request.url));
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: ['/((?!api|_next/static|favicon.ico).*)']
};

Kimlik Doğrulama Desenleri

Next.js uygulamalarında kimlik doğrulama için çeşitli yaklaşımlar kullanılabilir.

NextAuth.js (Auth.js)

En popüler kimlik doğrulama çözümü olan NextAuth.js, OAuth sağlayıcıları (Google, GitHub, Twitter), e-posta ile giriş, özel kimlik bilgileri ve JWT veya veritabanı oturumları gibi pek çok özelliği yerleşik olarak destekler. Kurulumu basittir ve çoğu senaryo için yeterli esnekliği sağlar.

Server-Side Authentication

App Router'da Server Components ve Server Actions ile kimlik doğrulama kontrolü sunucu tarafında güvenle yapılabilir. Hassas kontroller istemciye asla ulaşmaz ve güvenlik riski minimuma iner.

Sonuç

Next.js, React ekosisteminin en olgun ve kapsamlı framework'üdür. Dosya tabanlı yönlendirme, çoklu rendering stratejileri, Server Components, yerleşik optimizasyonlar ve zengin ekosistemi ile modern web uygulamaları geliştirmek için güçlü bir temel sunar.

Küçük bir kişisel blogdan büyük ölçekli kurumsal uygulamalara kadar geniş bir yelpazede kullanılabilir. App Router ve Server Components ile gelen yenilikler, web geliştirmenin geleceğine yön vermektedir.

"Next.js, React'ı üretim ortamı için hazır hale getiren çerçevedir. Doğru araçlarla donatılmış bir geliştirici, mimariden çok ürüne odaklanabilir."

Next.js ile projenize başlamak için resmi dokümantasyonu inceleyebilir, create-next-app ile hızlıca bir proje oluşturabilir ve bu rehberdeki kavramları uygulamalı olarak keşfedebilirsiniz.