Next.js 15 Sıfırdan Başlangıç

Gereksinimler

Next.js 15 geliştirmeye başlamak için aşağıdaki araçlara ihtiyacınız var:

• Node.js v18.17+ (LTS önerilir) — nodejs.org
• VS Code — code.visualstudio.com
• Git (opsiyonel ama önerilir)

Node.js Sürümünü Kontrol Etme

# Sürümü kontrol et
node -v    # v20.x veya üzeri çıkmalı
npm -v     # 10.x veya üzeri çıkmalı

Yeni Proje Oluşturma

npx create-next-app@latest benim-projem

Kurulum sihirbazı size şu soruları soracak:

✔ Would you like to use TypeScript? › Yes   (önerilir)
✔ Would you like to use ESLint? › Yes
✔ Would you like to use Tailwind CSS? › Yes  (önerilir)
✔ Would you like your code inside a `src/` directory? › No
✔ Would you like to use App Router? (recommended) › Yes  ← ÖNEMLİ
✔ Would you like to use Turbopack? › Yes
✔ Would you like to customize the import alias? › No

Proje Dosya Yapısı

benim-projem/
├── app/                    ← App Router klasörü
│   ├── layout.tsx          ← Kök layout (tüm sayfalarda ortak)
│   ├── page.tsx            ← Ana sayfa (/)
│   └── globals.css         ← Global stiller
├── public/                 ← Statik dosyalar (resim, favicon)
├── components/             ← Yeniden kullanılabilir bileşenler
├── next.config.ts          ← Next.js yapılandırması
├── tailwind.config.ts      ← Tailwind yapılandırması
├── tsconfig.json           ← TypeScript yapılandırması
└── package.json

Geliştirme Sunucusunu Başlatma

cd benim-projem
npm run dev

Tarayıcınızda http://localhost:3000 adresine giderek uygulamanızı görün.

VS Code Eklentileri

• ES7+ React/Redux/React-Native snippets — hızlı kod şablonları
• Tailwind CSS IntelliSense — otomatik tamamlama
• Prettier — kod biçimlendirme
• GitLens — Git entegrasyonu

İlk Değişikliği Yapın

app/page.tsx dosyasını açıp aşağıdaki kodla değiştirin:

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <h1 className="text-4xl font-bold text-blue-600">
        Merhaba, Next.js 15! 🚀
      </h1>
    </main>
  );
}

Dosyayı kaydettiğinizde tarayıcı otomatik yenilenecek (HMR - Hot Module Replacement).