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

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:
bash
```
cd /Applications/ServBay/www
npx create-next-app@latest servbay-next-app
```
1
2
Proje adı olarak (örneğin, servbay-next-app) belirleyin ve diğer seçenekleri ihtiyaçlarınıza göre seçin.
Bağımlılıkları Yükleme
Proje dizinine girin ve bağımlılıkları yükleyin:
bash
```
cd servbay-next-app
npm install
```
1
2

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

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:
javascript
```
export default function Home() {
  return (
    <div>
      <h1>Hello ServBay!</h1>
    </div>
  );
}
```
1
2
3
4
5
6
7

Geliştirme Moduna Geçiş

Geliştirme Sunucusunu Çalıştırma
Geliştirme sunucusunu başlatın ve portu belirtin (örneğin: 8585):
bash
```
npm run dev -- -p 8585
```
1
Bu komut, yerel olarak bir geliştirme sunucusu başlatacak ve 8585 portunu açacaktır.
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.
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

Üretim Sürümünü Oluşturma
Geliştirme tamamlandığında, aşağıdaki komutu kullanarak üretim sürümünü oluşturun:
bash
```
npm run build
npm run export
```
1
2
Oluşturma tamamlandığında, üretilen statik dosyalar out dizininde olacak.
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
Ü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.