ServBay’de Next.js Projesi Oluşturma ve Çalıştırma

Genel Bakış

Next.js, Vercel tarafından geliştirilen ve sürdürülen, modern ve yüksek performanslı web uygulamaları oluşturmak için yaygın olarak kullanılan güçlü bir React çatısıdır. React üzerine birçok hazır özelliği geliştiriciler için sunar ve karmaşık uygulamaların geliştirilme sürecini büyük ölçüde kolaylaştırır.

Next.js Nedir?

Next.js, sunucu tarafı render (SSR) ve statik site oluşturma (SSG) gibi birden fazla render stratejisini destekleyen popüler bir açık kaynak React çatısıdır. Bu özellikler uygulama performansını artırır, kullanıcı deneyimini geliştirir ve arama motoru görünürlüğünü optimize eder. Next.js ayrıca dosya sistemi yönlendirmesi, API yolları, kod bölme, CSS Modules gibi birçok fonksiyonu bir arada sunarak kapsamlı bir geliştirme deneyimi sağlar.

Next.js’in Başlıca Özellikleri ve Avantajları

• Çoklu Render Stratejisi Desteği: Sunucu tarafı render (SSR), statik site oluşturma (SSG), istemci tarafı render (CSR) ve hibrit render desteği ile geliştirici, ihtiyacına uygun stratejiyi seçebilir.
• Dosya Sistemi Yönlendirmesi: pages veya app klasör yapısına bağlı olarak otomatik yönlendirme üretir, basit ve sezgisel bir yapı sunar.
• API Yolları: Next.js projelerinde kolayca kendi API uç noktalarınızı oluşturmanıza imkan tanır, tam yığın geliştirme için idealdir.
• Otomatik Kod Bölme: Sayfa seviyesinde kod bölme ile sadece o anki sayfada ihtiyaç duyulan JavaScript yüklenir ve yükleme hızı optimize edilir.
• Gelişmiş Görsel Bileşeni (next/image): Görsel boyutlandırma, format ve yükleme stratejisini otomatik optimize ederek performansı artırır.
• Dahili CSS ve Sass Desteği: Stil yönetimini kolay ve verimli bir şekilde gerçekleştirmenizi sağlar.
• Hızlı Yenileme (Fast Refresh): Geliştirme sırasında neredeyse anlık kod güncelleme sağlar.

Next.js ile geliştiriciler, yüksek performanslı, ölçeklenebilir ve kolay bakım yapılabilir modern web uygulamalarını çok daha verimli bir şekilde inşa edebilirler.

ServBay ile Next.js Projesi Çalıştırma

ServBay, Node.js ve çeşitli dilleri/araçları barındıran entegre bir yerel web geliştirme ortamı sunar. ServBay’in Node.js desteği ile birlikte site yönetimi fonksiyonları (ters proxy ve statik dosya servisi dahil), Next.js projelerinin kurulumu, geliştirilmesi ve dağıtımı oldukça kolaydır.

Bu rehberde, ServBay ortamında bir Next.js projesinin oluşturulmasını, geliştirme modunda ters proxy aracılığıyla çalıştırılmasını, ve üretim modunda statik dosya servisi ile dağıtımını adım adım göstereceğiz.

Ön Koşullar

Başlamadan önce aşağıdaki adımların tamamlandığından emin olun:

1. macOS sisteminizde ServBay’i başarıyla kurmuş olmalısınız.
2. ServBay’in Yazılım Paketleri yönetim paneli üzerinden ihtiyaç duyulan Node.js yazılım paketini indirip etkinleştirmiş olmalısınız. Node.js kurulumu yapmadıysanız, ServBay ile Node.js Ortamı Kullanımı dökümanını inceleyiniz.

Uygulama Adımları

1. Next.js Projesi Oluşturma

İlk olarak yeni bir Next.js projesi başlatmamız gerekiyor.

1. Terminali açın ve ServBay’in varsayılan web dizinine gidin:

   cd /Applications/ServBay/www

2. create-next-app ile projeyi başlatın: Aşağıdaki komutu çalıştırarak yeni bir Next.js projesi oluşturun. Proje adının servbay-next-app olmasını öneriyoruz; bu adla /Applications/ServBay/www klasörü altında yeni bir klasör oluşacaktır.

   npx create-next-app@latest servbay-next-app

   npx, Node.js paket komutlarını çalıştırmayı sağlayan bir araçtır ve create-next-app@latest en güncel Next.js başlatma aracını kullanır. Terminalde gösterilen seçeneklere göre yapılandırmayı tamamlayın (örneğin TypeScript, ESLint, Tailwind CSS, App Router kullanımı gibi).

3. Proje klasörüne girin ve bağımlılıkları yükleyin:

   cd servbay-next-app
   npm install

   npm install komutu, projenin package.json dosyasındaki tanıma göre gerekli tüm bağımlılıkları yükler.

2. Proje Çıktı İçeriğini Güncelleyin (Opsiyonel)

Projeyi başarıyla çalıştırıp çalıştırmadığınızı doğrulamak için ana sayfa içeriğini kısaca değiştirebilirsiniz.

1. pages/index.js dosyasını açın (Pages Router kullandıysanız). App Router seçtiyseniz app/page.js dosyasını düzenleyin. Burada örnek olarak Pages Router kullandık:

   # Tercih ettiğiniz editörde dosyayı açın, örneğin VS Code
   code pages/index.js

2. Dosyanın içeriğini değiştirin ve sayfada "Hello ServBay!" yazısını gösterin. Mevcut kodu aşağıdakine benzer şekilde düzenleyin:

   // pages/index.js (Pages Router)
   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
         <p>Bu sayfa ServBay üzerinden çalışıyor.</p>
       </div>
     );
   }

   App Router kullanıyorsanız (app/page.js), dosya yapısı biraz farklı olabilir ancak temelde <h1> etiketinin içeriğini benzer şekilde güncelleyebilirsiniz.

3. Geliştirme Moduna Geçin

Geliştirme esnasında, Next.js’in kendi geliştirme sunucusu (sıcak modül değişimi ve hızlı yenileme desteği ile birlikte) tercih edilir; bu sayede kod güncellemelerini anlık görmeniz kolaylaşır. ServBay’in ters proxy özelliği, harici bir domain’i yerelde çalışan geliştirme sunucusuna yönlendirmek için idealdir.

1. Next.js geliştirme sunucusunu başlatın: Proje kök klasöründe (/Applications/ServBay/www/servbay-next-app) aşağıdaki komutu çalıştırın:

   npm run dev -- -p 8585

   Bu komut, Next.js geliştirme sunucusunu başlatır ve -- -p 8585 parametresi ile 8585 portunda dinlemesini sağlar. Dilerseniz kullanmadığınız başka bir portu da seçebilirsiniz.

2. ServBay sitesini yapılandırın (ters proxy ile): ServBay uygulamasını açıp Site Yönetimi paneline gidin. Yeni bir site ekleyin ve aşağıdaki gibi ayarları girin:

   • İsim: My first Next.js dev site (veya tercihinize uygun bir isim)
   • Domain: servbay-next-dev.servbay.demo (yerel test domaini olarak .servbay.demo uzantısı önerilir)
   • Site Türü: Ters Proxy (Reverse Proxy) seçin
   • Proxy IP: 127.0.0.1 (lokal loopback adresi)
   • Proxy Portu: 8585 (Next.js geliştirme sunucusunun portu)

   Ayarları tamamladıktan sonra kaydedin ve ServBay’in değişiklikleri uygulamasını bekleyin. ServBay, ayarlarınıza bağlı olarak Caddy veya Nginx ile servbay-next-dev.servbay.demo isteklerini otomatik olarak 127.0.0.1:8585 adresine yönlendirecektir.

   Ayrıntılı kurulum için ServBay’de Node.js Geliştirme Sitesi Ekleme belgesini de inceleyebilirsiniz.

3. Geliştirme sitesini ziyaret edin: Tarayıcınızı açıp belirlediğiniz domaini https://servbay-next-dev.servbay.demo adresinden ziyaret edin.

   ServBay, eklenen domainler için otomatik SSL sertifikası (ServBay User CA ile) oluşturduğu için yerel geliştirme sitenize HTTPS üzerinden güvenli bir şekilde erişebilirsiniz ve tarayıcı uyarısı almazsınız. Ayrıca, özel domainler ve ücretsiz SSL sertifikaları ServBay ile kolayca yönetilebilir.

4. Üretim Versiyonunu Derleyip Statik Site Olarak Dağıtma

Next.js projeniz geliştirme sürecini tamamladıktan sonra, genellikle optimize edilmiş bir üretim sürümünü oluşturmak istersiniz. Statik çıktı verecek biçimde ayarlanmış Next.js projeleri için (ör. output: 'export' veya next export komutu ile), ServBay’in statik site servisi idealdir.

1. Next.js üretim versiyonunu derleyin ve statik dosyaları dışa aktarın: Proje ana dizininde (/Applications/ServBay/www/servbay-next-app) aşağıdaki komutu çalıştırın:

   npm run build
   npm run export

   • npm run build komutu, Next.js projenizi derler ve optimize edilmiş bir üretim yapısı (genellikle .next dizinine) çıkartır.
   • npm run export komutu (uyumlu Next.js ayarı veya eski versiyonlar için) ya da output: 'export' ayarı, derlenen uygulamayı tamamen statik HTML, CSS ve JavaScript dosyalarına dönüştürür ve bunları out adlı bir klasöre yerleştirir.

2. ServBay sitesi yapılandırması (statik dosya servisi): ServBay uygulamasını açıp Site Yönetimine geçin. Yeni bir site oluşturun ve aşağıdaki gibi ayarları girin:

   • İsim: My first Next.js production site (veya istediğiniz bir ad)
   • Domain: servbay-next-prod.servbay.demo (.servbay.demo uzantısının kullanılmasını öneririz)
   • Site Türü: Statik (Static) seçin
   • Site Kök Dizini: Next.js’in dışa aktardığı statik dosyaların bulunduğu out klasörünün tam yolunu yazın: /Applications/ServBay/www/servbay-next-app/out

   Ayarları tamamlayıp değişiklikleri kaydettiğinizde, ServBay web sunucusu dosyaları doğrudan /Applications/ServBay/www/servbay-next-app/out klasöründen sunacak şekilde yapılandırılacaktır.

3. Üretim sitesini ziyaret edin: Tarayıcınızda oluşturduğunuz domaini https://servbay-next-prod.servbay.demo adresinden açın. Next.js ile derlenip dışa aktarılan statik site içeriğini burada göreceksiniz.

   Yine, ServBay’in özelleştirilebilir domain ve otomatik SSL konfigürasyonu sayesinde yerel üretim siteniz de HTTPS üzerinden güvenli olarak servis edilir.

Özet

Bu adımları takip ederek, ServBay yerel geliştirme ortamında başarılı şekilde bir Next.js projesi oluşturdunuz; ayrıca geliştirme modunda ServBay’in ters proxy özelliği ile canlı önizleme yaptınız ve üretim sürümünü derleyip ServBay’in statik dosya servisiyle dağıttınız. ServBay’in bütünleşik yapısı ve pratik site yönetimi arayüzü, Next.js projelerinin yerel geliştirme ve test sürecini büyük ölçüde kolaylaştırır.