Next.js Nedir? React Framework'ünün Kapsamlı Başlangıç Rehberi

Modern web geliştirme dünyasında React, kullanıcı arayüzleri oluşturmak için en popüler JavaScript kütüphanelerinden biri haline geldi. Ancak React tek başına bir framework değildir; routing, server-side rendering ve build optimizasyonu gibi konularda ek araçlara ihtiyaç duyarsınız. İşte tam bu noktada Next.js devreye giriyor. Vercel tarafından geliştirilen Next.js, React üzerine inşa edilmiş, production-ready bir full-stack web framework'üdür.

Next.js'in Temel Özellikleri

Next.js, React uygulamalarını bir üst seviyeye taşıyan birçok yerleşik özellik sunar. Bu özellikler, geliştirici deneyimini iyileştirirken aynı zamanda uygulama performansını da artırır.

Server-Side Rendering (SSR): Sayfalar sunucu tarafında render edilerek SEO dostu ve hızlı ilk yükleme sağlanır.
Static Site Generation (SSG): Build zamanında HTML oluşturularak en yüksek performans elde edilir.
App Router: Dosya tabanlı routing sistemi ile kolay ve sezgisel sayfa yönetimi.
API Routes: Aynı proje içinde backend endpoint'leri oluşturabilirsiniz.
Image ve Font Optimizasyonu: Otomatik optimizasyon ile Core Web Vitals skorlarını iyileştirme.
TypeScript Desteği: Sıfır konfigürasyonla TypeScript entegrasyonu.

Next.js Projesi Oluşturma

Yeni bir Next.js projesi oluşturmak son derece kolaydır. create-next-app CLI aracı ile birkaç saniyede başlangıç yapabilirsiniz.

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app
npm run dev

Bu komut size birkaç soru soracaktır:

✔ Would you like to use TypeScript? → Yes
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes
✔ Would you like to use `src/` directory? → Yes
✔ Would you like to use App Router? → Yes
✔ Would you like to customize the default import alias? → No

İpucu: App Router, Next.js'in en güncel ve önerilen routing sistemidir. Yeni projelerde mutlaka App Router tercih edin. Pages Router artık eski (legacy) olarak kabul edilmektedir.

Proje Yapısı

Oluşturulan projenin temel klasör yapısı şu şekildedir:

my-nextjs-app/
├── src/
│   └── app/
│       ├── layout.tsx        # Root layout
│       ├── page.tsx          # Ana sayfa (/)
│       ├── globals.css       # Global stiller
│       └── favicon.ico
├── public/                   # Statik dosyalar
├── next.config.js            # Next.js konfigürasyonu
├── tailwind.config.ts        # Tailwind konfigürasyonu
├── tsconfig.json             # TypeScript konfigürasyonu
└── package.json

İlk Sayfanızı Oluşturma

Next.js App Router'da her sayfa, app klasörü altındaki bir page.tsx dosyasıdır. Ana sayfanızı düzenleyelim:

// src/app/page.tsx
export default function HomePage() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">
        Next.js ile Merhaba Dünya!
      </h1>
      <p className="mt-4 text-lg text-gray-600">
        İlk Next.js uygulamanıza hoş geldiniz.
      </p>
    </main>
  );
}

Layout Sistemi

Next.js'te layout'lar, birden fazla sayfa arasında paylaşılan UI bileşenleridir. Root layout, tüm sayfalar için geçerlidir:

// src/app/layout.tsx
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

export const metadata: Metadata = {
  title: 'My Next.js App',
  description: 'Next.js ile oluşturulmuş modern web uygulaması',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="tr">
      <body className={inter.className}>
        <nav className="bg-gray-800 text-white p-4">
          <a href="/">Ana Sayfa</a>
          <a href="/about" className="ml-4">Hakkında</a>
        </nav>
        {children}
      </body>
    </html>
  );
}

Yeni Sayfa Ekleme

About sayfası oluşturmak için app/about klasörü altına bir page.tsx dosyası ekleyin:

// src/app/about/page.tsx
export default function AboutPage() {
  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Hakkımızda</h1>
      <p className="mt-4">
        Bu sayfa Next.js App Router ile oluşturuldu.
      </p>
    </div>
  );
}

Bilgi: Next.js App Router'da yeni bir sayfa eklemek için sadece ilgili klasörü oluşturup içine page.tsx dosyası koymanız yeterlidir. Herhangi bir route konfigürasyonu gerekmez.

Next.js vs Diğer Frameworkler

Özellik	Next.js	Create React App	Remix
SSR	✅ Yerleşik	❌ Yok	✅ Yerleşik
SSG	✅ Yerleşik	❌ Yok	❌ Sınırlı
File-based Routing	✅ Var	❌ Yok	✅ Var
API Routes	✅ Var	❌ Yok	✅ Loader/Action
Image Optimization	✅ Yerleşik	❌ Manuel	❌ Manuel

Geliştirme Ortamı ve Hot Reload

Next.js, Fast Refresh özelliği ile geliştirme deneyimini mükemmelleştirir. Kod değişiklikleriniz anında tarayıcıda yansır ve bileşen state'i korunur.

# Geliştirme sunucusunu başlat
npm run dev

# Production build oluştur
npm run build

# Production sunucusunu başlat
npm run start

# Lint kontrolü yap
npm run lint

Uyarı: npm run dev sadece geliştirme ortamı içindir. Production'da mutlaka npm run build ardından npm run start kullanın. Development modunda performans optimizasyonları devre dışıdır.

Next.js Ekosistemi

Next.js ile sıklıkla kullanılan araçlar ve kütüphaneler şunlardır:

Tailwind CSS: Utility-first CSS framework'ü
Prisma: TypeScript-first ORM
NextAuth.js: Authentication çözümü
Zustand / Jotai: State management
React Query (TanStack Query): Server state yönetimi
Zod: Schema validation
Vercel: Deployment platformu

Sonuç

Next.js, React ile modern web uygulamaları geliştirmek için en güçlü ve kapsamlı framework'lerden biridir. Dosya tabanlı routing, server-side rendering, API routes ve otomatik optimizasyonlar gibi yerleşik özellikleriyle geliştirici verimliliğini önemli ölçüde artırır. Bu rehber ile temel kavramları öğrendiniz; bundan sonraki yazılarda her konuyu derinlemesine inceleyeceğiz.

Next.js Nedir? React Framework'ünün Kapsamlı Başlangıç Rehberi