Next.js Nedir? Ne işe Yarar?

React.js kütüphanesidir. React.js kullanarak SSR (Server Side Rendering) web uygulamaları geliştirebilmenize imkan tanır. Böylece hem performanslı hem de yüksek düzeyde SEO uyumlu olmuş olur.

Özetle, Server Side Rendering destekli react uygulaması yapmamızı sağlayan kütüphane. Kurulum ile birlikte hiçbir yapılandırma yapmadan Route, SSR ve Code-Splitting gibi zorlu işlemleri hazır olarak barındırır.

React

Next.js avantajları

  • Güçlü SSR (Server Side Render) ve SSG (Static Site Generation) desteği
  • Kolay yapılandırma – Modüler yapısı sayesinde hem özelleştirilebilir hem de genişletilebilir.
  • Otomatik kod bölünmesi (Code Splitting) – sadece kullanıcının ihtiyaç duyduğu block’lar yüklenir.
  • Geniş geliştirici topluluğu ve uzman deneyimi
  • Veri ön yükleme ve uzun süreli işlemler, sunucu tarafında hizmet işçileri ile yönetebilme
  • Sayfa geçişleri yapmadan önce ön yükleme konforu (Prefetching)
  • Dosya tabanlı dinamik yönlendirme (Dosya tabanlı route yönetimi)
  • Material Design desteği
  • Vercel küresel ağı entegrasyonu ile hızlı ve güvenli çalışma
  • Sunucu tarafında API’lar oluşturma ve yönetebilme (API Routes)
  • Güncelleme kolaylığı

Next.js dezavantajları

  • Belirli kurallar ve önceden yapılandırılmış ayarlarla geldiği için bazı özel durumlar için özelleştirilme seçenekleri kısıtlıdır.
  • Büyük boyutlu uygulamalarda ilk yükleme yavaş olabilir.
  • Karmaşık tasarım düzenleri oluşturmak zor olabilir.
  • SSR modu kullanıldığı zaman güvenlik riskleri söz konusu olabilir.
  • SSR modu kullanıldığı zaman sunucu maliyeti artabilir.

Next.js ve React arasındaki farklar

  • React’da SSR yoktur.
  • React dosya tabanlı route yapamaz.
  • React dosya tabanlı sayfa oluşturamaz.
  • React’da code splitting yoktur.

Next.js Kurulum Adımları

  1. NodeJS ve npm kurulumu
    NodeJS kurulumu için tıklayınız. npm, NodeJS ile beraber gelmektedir.
  2. NodeJS kurulumu için gerekli paketin yüklenmesi 
    npx create-next-app@latest

    veya hazır örnek proje kurmak için gerekli komut:

    npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
  3. Kurulum sırasında aşağıdaki istemlere yanıt veriniz. 
    What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
  4. İstemlerden sonra create-next-app adında bir proje oluşturulacak ve gerekli bağımlılıklar yüklenecektir.
  5. Projeyi çalıştırmak için gerekli komut: 
    npm run dev