.NET Backend + Next.js Frontend: Tek Solution, Tek F5

Mevzu: .NET API ve Next.js frontend'i ayrı dünyalar olmaktan çıkarıp, tek bir Visual Studio Solution'ı altında birleştirmek. Nasıl Yapıyoruz? Görünürlük: Solution içine boş bir .csproj (örn: Motorum.Frontend) ekleyip, gerçek frontend klasörünü bu projeye "link" olarak bağlıyoruz. Böylece kodlar tek ağaçta görünüyor. Otomasyon (Launcher): Bir konsol uygulaması yazıyoruz. F5'e bastığında önce API'yi, ardından npm run dev ile frontend'i ayağa kaldırıyor. Sonuç: Yeni gelen developer için "Neyi, nasıl çalıştıracağım?" derdi bitiyor. Tek tıkla (F5) tüm sistem hazır. Kısacası: Ayrı klasörlerde kalsalar da, Visual Studio içinden tek bir proje gibi yönetip "Tek F5" konforuna geçiyoruz.

Senaryo: Backend’in .NET (ayrı klasör), frontend’in Next.js (ayrı klasör). Visual Studio’da sadece backend görünüyor. İstiyoruz ki ikisi aynı solution içinde görünsün, F5’e basınca ikisi birlikte ayağa kalksın, takım repo’yu çekince tek yerden çalıştırsın.

“Olmaz” değil — sadece biraz düzen istiyor.

Neden Bu Önemli?

Proje büyüdüğünde:

Yeni gelen developer “nerede bu frontend?” demez.
Tek yerden debug ve çalıştırma yapılır.
Environment karmaşası azalır.
Repo düzenli ve öngörülebilir görünür.

Küçük bir mimari karar, uzun vadede ciddi konfor sağlar.

Klasör Yapısı (Değişmeden Kalabilir)

Backend ve frontend ayrı klasörde kalır; sadece solution tarafına iki şey ekliyoruz.

Frontend’i Solution’a “Göstermek”

Frontend bir .NET projesi değil; ama Visual Studio’da görünür olmasını istiyoruz. İşte en pratik yol:

Solution’a “Existing Project” ile .csproj Eklemek

Frontend dosya ağacını solution içinde görmek için ayrı bir “Frontend” projesi (örn. Motorum.Frontend) açıp, bu projede gerçek kodları repo kökündeki frontend/ klasörüne Content link ile bağlıyoruz.

Örnek .csproj (Sadece görünürlük ve build geçmesi için):

Tek F5 ile İkisini Birden Başlatmak: Launcher Projesi

F5’e basınca hem API hem Next.js’in ayağa kalkması için Launcher projesi en temiz yoldur.

Bu proje gerçek bir .NET konsol uygulamasıdır (OutputType = Exe).
Görevleri:

dotnet run --project .../Motorum.Api ile API’yi başlatır.
Kısa bir bekleme süresi (API'nin ısınması için).
frontend klasöründe npm run dev komutunu tetikler.
Enter’a basıldığında tüm process ağacını kapatır.

Sonuç

.NET backend ve Next.js frontend ayrı klasörlerde kalmaya devam edebilir. Ancak onları tek bir Solution altında birleştirmek, özellikle ekibe yeni katılanlar ve günlük geliştirme süreci için devasa bir konfor sağlar.

Bu kurulum, Motorum projesinde uyguladığımız ve verim aldığımız bir yapıdır. Denemenizi öneririm!