İlk Next.js Uygulamanızı Birlikte Geliştirelim 🚀

Selam, ben Skyversal. Bu rehberde sana komutları ezberletmeyeceğim. Birlikte sıfırdan küçük ama tıkır tıkır çalışan gerçek bir proje geliştirecek, yeni nesil App Router'ı tanıyacak ve günün sonunda kodlarını tüm dünyaya açacağız. Hazırsan kollarımızı sıvayalım!

1. Nedir Bu Next.js Dedikleri?

Bilirsin, React tek başına arayüz yazmak için harikadır ama işin içine sayfa yönlendirmesi (routing) veya arama motoru optimizasyonu (SEO) girince "Abi ben sadece component çizerim" der. İşte Next.js tam bu noktada devreye giriyor. Üzerine SSR (Server Side Rendering), API katmanları ve performans optimizasyonları ekleyerek React'i tam teşekküllü bir canavara dönüştürüyor.

Skyversal olarak biz bu yapıyı çok seviyoruz ve sistemimiz bunu anında tanıyor. Yani senin zahmet edip klasör yapılarını, sunucu komutlarını Skyversal'e anlatmana gerek yok. Biz "Aha, bu Next.js!" deyip her şeyi senin yerine arka planda kuruyoruz.

2. Haydi! İlk Projemizi Oluşturalım

Aç o siyah terminal ekranını (korkma, ısırmaz) ve şu komutu yapıştır:

npx create-next-app@latest hello-skyversal

Next.js kurulum sırasında sana birkaç soru soracak. Benim 20 yıllık tecrübeme güvenerek cevaplarını şöyle verebilirsin:

3. Odaları Gezelim (Klasör Yapısı)

Proje klasörüne (cd hello-skyversal) girince bir sürü dosya göreceksin. Gözün korkmasın, senin bilmen gereken temel 4 yer var:

4. İlk Şaheserimizi Yazıyoruz

Hemen app/page.tsx dosyasını aç, içindeki o hazır gelen kuru kalabalığı komple sil ve benim sana hazırladığım şu tatlı kodu yapıştır:

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-black">
      <section className="border border-white/10 p-10 rounded-2xl bg-white/5 text-center">
        <h1 className="text-4xl font-bold text-white mb-4">
          Welcome to Skyversal 🚀
        </h1>
        
        <p className="text-gray-400 mb-8">Deploy in Seconds. Running on Next.js</p>
        
        <div className="flex gap-4 justify-center">
          <span className="bg-emerald-500/20 text-emerald-400 px-3 py-1 rounded">
            GitHub Connected
          </span>
          <span className="bg-blue-500/20 text-blue-400 px-3 py-1 rounded">
            Tailwind Ready
          </span>
        </div>
      </section>
    </main>
  );
}

5. Localhost'ta Bir Görelim

Eserimizi görmek hakkımız, terminalde şu komutu ateşle:

npm run dev

Hemen tarayıcından http://localhost:3000 adresine git. Fişek gibi görünüyor değil mi? Kodda bir şeyi değiştirip kaydettiğinde sayfayı F5'lemene gerek bile kalmayacak, anında güncellenecek. Gençler buna HMR (Hot Module Replacement) diyor.

6. Kodumuzu Paketleyelim (Git Nedir?)

Her güzel şeyin bir yedeği olmalı. Git dediğimiz meret, kodumuzun zaman içindeki fotoğrafını çeken ve yanlış yaptığımızda hayat kurtaran bir sistem. Hemen şu 3 komutla projeyi mühürleyelim:

git init
git add .
git commit -m "İlk şaheserim: Merhaba Skyversal"

7. Kodu GitHub'a Şutluyoruz

GitHub'da hemen boş bir depo (repository) aç, oradaki linki kap ve şu iki sihirli kelimeyi terminale fısılda:

git remote add origin https://github.com/kullanici-adiniz/hello-skyversal.git
git push -u origin main

8. Sahne Zamanı: Skyversal'e Çıkıyoruz

Kodumuz GitHub'da sağlama alındı. Şimdi sıra, onu amcanın, halanın, kısacası tüm internetin görebileceği canlı bir site yapmaya geldi.

9. Mutfakta Neler Oluyor? (Deploy Log)

Deploy butonuna bastığın an ekranda Matrix gibi bir terminal akmaya başlayacak. Korkma, bak arka planda biz senin için neleri terliyoruz:

Peki Şimdi N'apıyoruz?

Artık bizim kulüptesin. Projeni daha da profesyonel hale getirmek için şu adımları bir kurcala derim: