Yükleniyor...

Birazdan kaldığınız yerden devam edeceksiniz.

Next.js ile Full-Stack Uygulama Geliştirme Rehberi

YayınlandıGüncellendi

Next.js kullanarak modern bir full-stack uygulama geliştirmek için kapsamlı bir rehber niteliğinde bir yazıdır. API routes, server-side rendering, authentication ve veritabanı entegrasyonu gibi kritik konulara değinerek, sıfırdan profesyonel bir uygulama geliştirme sürecini adım adım ele alıyoruz. Artık full-stack uygulamaların için sadece Next.js kullanabilirsin.

Next.js ile Full-Stack Uygulama Geliştirme Rehberi

Next.js App Router ile Full-Stack Geliştirmenin Avantajları

  • Sunucu Bileşenleri (Server Components): Sunucu tarafında render edilen bileşenlerle optimize edilmiş performans.
  • API Yönlendirmeleri (API Routes): Next.js içinde backend API’leri oluşturabilme.
  • MongoDB ile NoSQL Veri Yönetimi: Esnek ve ölçeklenebilir veritabanı yapısı.
  • Sunucu Eylemleri (Server Actions): API çağrılarına gerek kalmadan backend işlemleri yapabilme.
  • Docker Kullanımı: Next.js uygulamanızı container içinde çalıştırarak taşınabilir hale getirme.

Next.js App Router ile Proje Kurulumu

Yeni bir Next.js projesi oluşturmak için aşağıdaki komutları çalıştırın:

snippet.sh
bash4 satırUTF-8

Bu adımlardan sonra, http://localhost:3000 adresinden projenizi çalıştırabilirsiniz.


MongoDB ile Veritabanı Entegrasyonu

Next.js projelerinde MongoDB kullanmak için mongoose kütüphanesini kullanacağız.

MongoDB Bağlantısını Oluşturun

/lib/mongodb.js dosyasında aşağıdaki kodları ekleyin:

snippet.js
javascript23 satırUTF-8

API Yönlendirmeleri ile CRUD İşlemleri

MongoDB bağlantısını kullanarak API yönlendirmesi yapalım.

/app/api/users/route.js (GET ve POST İşlemleri)

snippet.js
javascript15 satırUTF-8

Next.js Uygulamasını Docker ile Çalıştırma

Dockerfile Dosyası

snippet.dockerfile
dockerfile19 satırUTF-8

2. Docker ile Çalıştırma

Docker kullanarak Next.js uygulamanızı başlatmak için şu komutları çalıştırın:

Docker imajını oluşturun:

snippet.sh
bash1 satırUTF-8

Docker container'ı başlatın:

snippet.sh
bash1 satırUTF-8

Bu adımlardan sonra, http://localhost:3000 adresinden uygulamanıza erişebilirsiniz.


Next.js’in App Router yapısı, MongoDB ile birleştiğinde güçlü bir full-stack çözüm sunar. API yönlendirmeleri, kimlik doğrulama ve veritabanı yönetimi gibi süreçler, Docker sayesinde bağımsız ve taşınabilir hale gelir.

Bu rehberde MongoDB, Next.js API Routes ve Docker kullanarak modern ve sürdürülebilir bir full-stack uygulama geliştirme sürecini inceledik. 🚀