Next.js Nedir ve Ne İşe Yarar? #
Next.js, React tabanlı bir framework olup, sunucu tarafı renderlama (Server Side Rendering - SSR), statik site oluşturma (Static Site Generation - SSG) ve tam dinamik renderlama gibi özellikler sunar. React uygulamalarını daha performanslı ve SEO dostu hale getirmek için geliştirilmiştir. Vercel tarafından desteklenmektedir ve modern web geliştirme araçlarını bir araya getiren bir ekosistem sunar.
| Özellik | React | Next.js (App Router) |
| Routing | Kendi sisteminizi kurmanız lazım. | Dosya tabanlı yönlendirme, otomatik. |
| SEO Desteği | Sınırlı (Çünkü kullanıcının browser'ında yaşıyor.) | SSR ve SSG ile SEO’ya tam destek. |
| Performans | İlk yükleme genelde biraz yavaş. | Statik içerik oluşturma ve önbellekleme ile hız canavarı. |
Next.js ile Neler Yapabiliriz? #
Next.js ile yapabileceklerinizin sınırı yok! Blog siteleri, e-ticaret siteleri, kurumsal web sayfaları ve hatta kompleks SaaS projeleri... Tüm bunları kolaylıkla geliştirebilirsiniz. Hadi bir örnekle bu özellikleri detaylandıralım.
App Router ile Dosya Tabanlı Yönlendirme #
Next.js 13 versiyonu üzerinde App Rotuer kullanıyorsanız, bir sayfa oluşturmak için yapmanız gereken şey bir klasör oluşturup (adını seçerken route adınızın bu olacağını unutmayın) klasörün içinde bir page.tsx / page.jsx dosyası oluşturmak.
📂 Klasör yapısı:
📜 Kod Örneği: app/page.tsx
Kod Örneği: app/blog/[slug]/page.tsx
Samimi Not: Okuyarak bir şey anlamadıysanız youtube videomla birlikte bir blog oluşturalım ? Next.js Öğren
Sunucu Tarafı Veri Getirme (Server Actions) #
Bir diğer harika özellik: Server Actions. Artık API endpoint yazmakla uğraşmadan direkt sunucudan veri çekebilirsiniz. Tabii bu Next.js'in sağladığı değil React Server Component'lerin özelliğidir. (Özetle; server tarafında çalışan componentler. Bunların sayesinde databaseinize veya diğer apilara istek atabilirsiniz.)
📜 Kod Örneği: Sunucu tarafında veri getirme
Statik ve Dinamik Sayfalar (SSG & SSR) #
Eğer içerikleriniz sabitse Static Site Generation (SSG) kullanabilir, her kullanıcıya özel içerikler gerekiyorsa Server Side Rendering (SSR) seçebilirsiniz.
📜 Kod Örneği: SSG
Neden Next.js? #
Şimdi sorabilirsiniz: “Peki, neden React değil de Next.js?” İşte cevabı:
- Performans: Sunucu tarafı renderlama ve statik site oluşturma ile hız kazanırsınız.
- SEO Dostu: Arama motorları dinamik içeriklerinizi de kolayca indeksler.
- Geliştirme Kolaylığı: App Router ve diğer özellikler sayesinde az kodla çok iş yaparsınız.
Sonuç #
Next.js, özellikle App Router ile modern web geliştirme deneyimini bir üst seviyeye çıkarıyor. React’ın sadeliğini korurken, eksik olan tüm parçaları tamamlıyor. Ancak şunu da unutmamak lazım ki Nextjs React.js üzerine kurulmuş bir framework. Reactjs de Javascript dilinde yazılmış bir kütüphane. Merdivenleri sırasıyla çıkmanızı, temellerinizi iyi oluşturmanızı şiddetle tavsiye ediyorum dostlarım. Nextjs bugün hype olur yarın başka bir framework gelir. Ancak web standartları her zaman sabit kalır.
