Next.js Nedir? React'in Geleceği ve Modern Web Geliştirme

Web geliştirme dünyası sürekli evrim geçiriyor. React tek başına güçlü bir kütüphane olsa da, production-ready uygulamalar için daha fazlasına ihtiyaç var. İşte tam bu noktada Next.js devreye giriyor.

Next.js Nedir?

Next.js, Vercel tarafından geliştirilen ve React üzerine inşa edilmiş bir full-stack web framework'üdür. 2016'da piyasaya sürülmesinden bu yana, React ekosisteminin en popüler framework'ü haline geldi.

Basitçe söylemek gerekirse: Next.js = React + Routing + SSR + Tooling

React size component'ler ve state yönetimi sağlarken, Next.js bunun üzerine:

• Dosya tabanlı routing sistemi
• Server-side rendering (SSR)
• Static site generation (SSG)
• API routes ile backend işlevselliği
• Otomatik code splitting
• Image ve font optimizasyonu

ekler.

Neden Next.js Kullanmalısınız?

1. SEO Dostu

Geleneksel React uygulamaları client-side rendering (CSR) kullanır. Bu, içeriğin JavaScript çalıştıktan sonra render edilmesi demektir. Arama motorları için bu bir problem:

// Geleneksel React - Google bunu görmekte zorlanır
function Page() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data').then(res => setData(res));
  }, []);
  
  return <div>{data?.title}</div>;
}

Next.js ile server-side rendering kullanarak içeriği HTML olarak sunarsınız:

// Next.js - Google bunu mükemmel indeksler
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  
  return <div>{data.title}</div>;
}

2. Mükemmel Performans

Next.js, performansı varsayılan olarak optimize eder:

• Otomatik code splitting: Her sayfa sadece ihtiyacı olan JavaScript'i yükler
• Prefetching: Viewport'taki linkler otomatik olarak ön yüklenir
• Image optimization: next/image ile otomatik WebP/AVIF dönüşümü
• Font optimization: Google Fonts bile self-host edilir

3. Full-Stack Geliştirme

Next.js ile hem frontend hem backend tek projede:

// app/api/users/route.ts - API endpoint
export async function GET() {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create(body);
  return Response.json(user);
}

4. Vercel ile Mükemmel Entegrasyon

Vercel, Next.js'in yaratıcısı olduğu için deploy işlemi inanılmaz basit:

git push origin main
# Otomatik olarak production'a deploy edilir

Next.js'in Temel Kavramları

App Router vs Pages Router

Next.js 13 ile birlikte gelen App Router, modern React özelliklerini (Server Components, Streaming, Suspense) kullanır:

app/
├── layout.tsx        # Root layout
├── page.tsx          # Ana sayfa (/)
├── about/
│   └── page.tsx      # /about
├── blog/
│   ├── page.tsx      # /blog
│   └── [slug]/
│       └── page.tsx  # /blog/nextjs-nedir

Pages Router ise eski yöntem:

pages/
├── index.tsx         # /
├── about.tsx         # /about
├── blog/
│   ├── index.tsx     # /blog
│   └── [slug].tsx    # /blog/nextjs-nedir

💡 Öneri: Yeni projeler için App Router kullanın. Daha modern, daha performanslı.

Server Components vs Client Components

Next.js 13+ ile component'ler varsayılan olarak Server Component'tir:

// Server Component (varsayılan)
// - Sunucuda render edilir
// - Direkt veritabanına erişebilir
// - useState, useEffect KULLANILAMAZ
async function ProductList() {
  const products = await db.products.findMany();
  return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

Etkileşimli component'ler için Client Component kullanılır:

'use client'; // Bu direktif ile client component olur

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Rendering Stratejileri

Next.js dört farklı rendering stratejisi sunar:

// Static Generation (SSG)
export const dynamic = 'force-static';

// Server-side Rendering (SSR)
export const dynamic = 'force-dynamic';

// Incremental Static Regeneration (ISR)
export const revalidate = 3600; // 1 saat

Next.js ile Proje Başlatma

Kurulum

npx create-next-app@latest my-app

Kurulum sırasında sorulacak sorular:

• TypeScript? → Evet (kesinlikle)
• ESLint? → Evet
• Tailwind CSS? → Evet (önerilir)
• src/ directory? → Evet
• App Router? → Evet
• Import alias? → Evet (@/*)

Dosya Yapısı

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx      # Root layout
│   │   ├── page.tsx        # Ana sayfa
│   │   └── globals.css     # Global stiller
│   ├── components/         # Paylaşılan component'ler
│   └── lib/                # Utility fonksiyonlar
├── public/                 # Statik dosyalar
├── next.config.ts          # Next.js config
└── package.json

İlk Sayfanız

// src/app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center">
      <h1 className="text-4xl font-bold">
        Merhaba Next.js! 👋
      </h1>
    </main>
  );
}

Next.js vs Diğer Framework'ler

Gerçek Dünya Örnekleri

Next.js kullanan büyük şirketler:

• Netflix - Jobs sitesi
• TikTok - Web uygulaması
• Twitch - Marketing siteleri
• Nike - E-ticaret
• Notion - Web uygulaması

Biz de Digitexa olarak tüm projelerimizde Next.js kullanıyoruz. MEF Üniversitesi, Stuudy ve E-Kuralkan gibi projeler Next.js ile geliştirildi.

Next.js Öğrenme Yol Haritası

1. Temel React bilgisi (component'ler, hooks, state)
2. Next.js App Router (routing, layouts, loading states)
3. Data Fetching (server components, fetch, caching)
4. Server Actions (form handling, mutations)
5. API Routes (REST endpoints, middleware)
6. Deployment (Vercel, Docker, Node.js)

Sonuç

Next.js, modern web geliştirmenin standartlarını belirliyor. SEO, performans ve geliştirici deneyimi açısından rakipsiz bir framework. React biliyorsanız, Next.js öğrenmek doğal bir sonraki adım.

Eğer detaylı bilgi istiyorsanız, Next.js teknoloji sayfamıza göz atabilirsiniz. Orada daha teknik detaylar, kod örnekleri ve best practice'ler bulacaksınız.

Next.js ile projenizi geliştirmek ister misiniz? Bizimle iletişime geçin ve ücretsiz danışmanlık alın.