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

Next.js nedir?

Next.js, Vercel tarafından geliştirilen ve statik ve sunucu tarafı render edilmiş React uygulamaları oluşturmak için kullanılan bir React çerçevesidir. Sunucu tarafı render (SSR), statik site oluşturma (SSG), API yönlendirme, yerleşik CSS ve Sass desteği gibi pek çok hazır özellik sunar. Bu sayede, geliştiriciler modern web uygulamalarını daha verimli bir şekilde oluşturabilirler.

Next.js'nin Başlıca Özellikleri ve Avantajları

• Sunucu Tarafı Render (SSR): Sayfa yükleme hızını ve SEO performansını artırır.
• Statik Site Oluşturma (SSG): Statik sayfaları önceden render ederek performans ve kullanıcı deneyimini iyileştirir.
• Otomatik Kod Parçalama: Sadece geçerli sayfa için gerekli olan JavaScript kodunu yükleyerek performansı optimize eder.
• Yerleşik Yönlendirme: Dosya sistemine dayalı yönlendirme, ekstra yapılandırma gerekmez.
• API Yönlendirme: Aynı projede API uç noktaları oluşturulabilir.
• Yerleşik CSS ve Sass Desteği: Stilleri kolayca yönetmeyi sağlar.

Next.js kullanarak, geliştiriciler modern ve hızlı tepki veren web uygulamalarını daha verimli bir şekilde oluşturabilirler.

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

Bu makalede, ServBay'in sunduğu Node.js ortamını kullanarak bir Next.js projesi oluşturup çalıştıracağız. ServBay'in 'host' özelliğini kullanarak bir web sunucusu kuracağız ve geriye proxy yönlendirme ve statik dosya servisi yoluyla projeye erişimi sağlayacağız.

Next.js Projesi Oluşturma

1. Projeyi Başlatma

   İlk olarak, ServBay tarafından sağlanan Node.js ortamını yüklediğinizden emin olun. Sonra, aşağıdaki komutları kullanarak yeni bir Next.js projesi başlatın:

   cd /Applications/ServBay/www
   npx create-next-app@latest servbay-next-app

   Proje adı olarak (örneğin, servbay-next-app) belirleyin ve diğer seçenekleri ihtiyaçlarınıza göre seçin.

2. Bağımlılıkları Yükleme

   Proje dizinine girin ve bağımlılıkları yükleyin:

   cd servbay-next-app
   npm install

Next.js Proje Çıkış İçeriğini Değiştirme

1. pages/index.js Dosyasını Değiştirme

   pages/index.js dosyasını açın ve içeriği "Hello ServBay!" mesajını gösterecek şekilde değiştirin:

   export default function Home() {
     return (
       <div>
         <h1>Hello ServBay!</h1>
       </div>
     );
   }

Geliştirme Moduna Geçiş

1. Geliştirme Sunucusunu Çalıştırma

   Geliştirme sunucusunu başlatın ve portu belirtin (örneğin: 8585):

   npm run dev -- -p 8585

   Bu komut, yerel olarak bir geliştirme sunucusu başlatacak ve 8585 portunu açacaktır.

2. ServBay Host Geriye Proxy Yapılandırması

   ServBay'in 'host' özelliğini kullanarak geliştirme sunucusuna geriye proxy ile erişim sağlayın. ServBay 'host' ayarlarında yeni bir geriye proxy ekleyin:

   • Adı: My first Next.js dev site
   • Alan adı: servbay-next-test.dev
   • Host Türü: Geriye Proxy
   • IP: 127.0.0.1
   • Port: 8585

   Ayrıntılı kurulum adımları için Nodejs geliştirici sitesi ekleme belgesine bakın.

3. Geliştirme Moduna Erişim

   Tarayıcınızı açın ve https://servbay-next-test.dev adresine giderek projeyi anında görün. ServBay, özel alan adları ve ücretsiz SSL sertifikaları sunduğu için daha yüksek güvenlik sağlayacaktır.

Üretim Sürümünü Oluşturma

1. Üretim Sürümünü Oluşturma

   Geliştirme tamamlandığında, aşağıdaki komutu kullanarak üretim sürümünü oluşturun:

   npm run build
   npm run export

   Oluşturma tamamlandığında, üretilen statik dosyalar out dizininde olacak.

2. Statik Dosya Hizmetinin Ayarlanması

   ServBay'in 'host' özelliğini kullanarak üretim sürümüne statik dosya hizmeti yoluyla erişim sağlayın. ServBay 'host' ayarlarında yeni bir statik web sitesi ekleyin:

   • Adı: My first Next.js production site
   • Alan adı: servbay-next-test.prod
   • Host Türü: Statik
   • Web Sitesi Kök Dizini: /Applications/ServBay/www/servbay-next-app/out

3. Üretim Moduna Erişim

   Tarayıcınızı açın ve https://servbay-next-test.prod adresine giderek üretim sürümünü görün. ServBay’in özel alan adı ve ücretsiz SSL sertifikaları ile siteniz daha yüksek güvenlik ve güvenilirlik kazanacaktır.

Bu adımlarla, başarılı bir şekilde bir Next.js projesi oluşturup çalıştırdınız ve ServBay'in sunduğu özellikleri kullanarak projenizi yönettiniz ve erişim sağladınız.