Next.js ile Web Sitesi Nasıl Yapılır? Başlangıç Rehberi
Next.js nedir, neden tercih edilmeli? React tabanlı modern web sitesi geliştirme rehberi. Kurulum, routing, SEO ve Vercel deployment adım adım.
Kamer Can İzvermez
The Kai — Kurucu
thekai.co'yu Next.js ile geliştirdim. Shortlist Creative'i de. Echo Bazaar'ın web sitesini de. Neden hep Next.js? Çünkü hız, SEO ve geliştirici deneyimi açısından şu an en iyi framework. WordPress'ten geliyorsanız veya sıfırdan web geliştirmeye başlıyorsanız, bu yazı tam size göre.
Next.js Nedir?
Next.js, React üzerine inşa edilmiş bir full-stack web framework'tür. Vercel tarafından geliştirilir. React tek başına bir "kütüphane" iken, Next.js routing, SSR (server-side rendering), API routes, image optimization ve daha fazlasını kutudan çıkar şekilde sunar.
Basit anlatımla: React ile web uygulaması yaparsın, Next.js ile tam bir web sitesi yaparsın — SEO'su, performansı ve deployment'ı dahil.
Neden Next.js?
- SEO: Server-side rendering ve static generation ile Google botları sayfanızı tam görür. WordPress kadar iyi, hatta daha iyi SEO.
- Performans: Automatic code splitting, image optimization, font optimization — Google Core Web Vitals skoru neredeyse her zaman 90+.
- Geliştirici deneyimi: Hot reload, TypeScript desteği, file-based routing — hızlı geliştirme.
- Vercel deployment: Git push = otomatik deployment. SSL, CDN, preview URL'leri — hepsi ücretsiz.
- Ekosistem: React'in devasa ekosisteminden faydalanır. Binlerce kütüphane ve component.
Kurulum (5 Dakika)
Terminal açın ve şu komutu çalıştırın: npx create-next-app@latest my-site. TypeScript, Tailwind CSS ve App Router seçeneklerini 'Evet' olarak işaretleyin. Tebrikler, Next.js projeniz hazır.
npm run dev komutuyla localhost:3000'de sitenizi görürsünüz. Dosya yapısı: src/app/ klasörü altında her klasör bir sayfa. page.tsx dosyası o sayfanın içeriği. layout.tsx dosyası tüm sayfalarda ortak olan yapı (navbar, footer).
Önerdiğimiz Tech Stack
- Next.js 15: Framework — routing, SSR, API
- Tailwind CSS v4: Styling — utility-first CSS, responsive tasarım
- Framer Motion: Animasyonlar — scroll efektleri, geçişler
- TypeScript: Tip güvenliği — daha az hata, daha iyi autocomplete
- Vercel: Hosting — ücretsiz, hızlı, güvenilir
Bu tam olarak thekai.co'nun tech stack'i. Ve müşterilerimize de aynı stack'i öneriyoruz. Neden? Çünkü kanıtlanmış, hızlı ve bakım maliyeti düşük.
WordPress vs Next.js
WordPress dünyada en yaygın CMS ama 2026'da ciddi dezavantajları var: yavaş (her sayfa veritabanı sorgusu yapıyor), güvenlik açıkları (eklenti ekosistemi risk), bakım maliyeti (sürekli güncelleme). Next.js ile statik olarak oluşturulan sayfalar çok daha hızlı, güvenli ve bakımsız çalışıyor.
Ne zaman WordPress? Teknik bilginiz sıfırsa ve hızla bir blog açmak istiyorsanız. Ne zaman Next.js? Performans, SEO ve profesyonel görünüm önemliyse — ki önemliyse.
Sık Sorulan Sorular
Next.js öğrenmek zor mu?
HTML/CSS biliyorsanız temel bir site 1-2 haftada yapabilirsiniz. React biliyorsanız Next.js'e geçiş 2-3 gün. Hiç programlama bilmiyorsanız biraz daha zor — ama YouTube'da binlerce ücretsiz kaynak var. Ya da bize bırakın, biz yapalım.
Next.js ile e-ticaret sitesi yapılabilir mi?
Evet. Shopify Hydrogen (Next.js tabanlı), Saleor, Medusa gibi headless e-ticaret çözümleriyle tam entegrasyon mümkün. Ödeme: iyzico, Stripe, PayTR. Stok yönetimi, sepet, sipariş takibi — hepsi yapılabilir.
Hosting ücretsiz mi?
Vercel'de küçük-orta projeler için evet, ücretsiz. Aylık 100GB bandwidth, sınırsız deployment, SSL dahil. Büyük projeler için Pro plan $20/ay. WordPress hosting'den çok daha ucuz ve hızlı.
SEO açısından WordPress'ten iyi mi?
Doğru yapıldığında evet. Next.js'in SSR/SSG desteği, otomatik sitemap, meta tag yönetimi ve Core Web Vitals performansı WordPress'in önünde. thekai.co'nun Google performans skoru 95+ — bunu WordPress ile yakalamak çok zor.