Next.js Nedir? Uygulama Geliştiriciler İçin Sade Rehber

Next.js, React ile web siteleri ve web uygulamaları geliştirmek için bir çatıdır. React arayüzün yapı taşlarını verir: düğmeler, formlar, listeler. Next.js bunların etrafındaki web sitesinin geri kalanını ekler: sayfalar ve URL’ler, sayfaları okunmaya hazır olarak sunucuda render etmek, veri yüklemek ve aynı projede arka uç kodu çalıştırmak. Açık kaynaklıdır, Vercel adlı şirket tarafından geliştirilir ve React siteleri yapmanın en yaygın yollarından biridir.

Yapay zekâyla yapı kurarken Next.js neden önemli?

Bir yapay zekâ oluşturucuya bir uygulamayı anlattığınızda, teknik bir temel seçmesi gerekir. Bu seçim, daha sonra önem verdiğiniz şeyleri etkiler:

• Arama görünürlüğü. Google’da sıralanması gereken herkese açık bir site, gerçek HTML göndermekten fayda sağlar; Next.js bunu iyi yapar.
• Arka ucun nerede yaşadığı. Next.js, ön yüz sayfalarının ve sunucu kodunun (“bu formu kaydet” ya da “ödeme API’sini çağır” gibi) aynı projede durmasına izin verir.
• Barındırma. Sunucu özellikleri olan bir Next.js uygulamasının çalışacağı bir sunucuya ihtiyacı vardır; düz bir Vite uygulaması ise statik dosyalar olarak sunulabilir.

Mythex yeni projeleri varsayılan olarak Vite + React + TypeScript + Tailwind ile başlatır ve siz istediğinizde Next.js kullanır; ilk isteminizde “Next.js kullan” demeniz yeterlidir (teknolojinin nasıl seçildiği). Bu yüzden bunu ne zaman istemeye değer olduğunu bilmek faydalıdır.

Günlük bir benzetme

React bir kutu dolusu kaliteli Lego parçasıysa, Next.js talimatları, taban plakası ve kapı ile tesisat parçaları da dahil olan bir Lego setine benzer.

Aynı evi düz parçalardan da yapabilirsiniz; ama odaların nasıl bağlanacağına, ön kapının nereye geleceğine ve suyun nasıl gireceğine kendiniz karar vermeniz gerekir. Next.js bu kararları standart bir biçimde sizin için alır; böylece her Next.js projesi benzer bir düzende olur ve yeni bir geliştirici (ya da bir yapay zekâ) hızla yolunu bulabilir.

Next.js’in React’e neler eklediği

Next.js’te sayfaları düzenlemenin iki yolu vardır. App Router (app/ klasörü) daha yenisidir ve sunucu bileşenlerini destekler. Pages Router (pages/ klasörü) özgün olanıdır ve hâlâ desteklenir. Yeni projeler genellikle App Router kullanır. Yapay zekâ oluşturucunuzun kodu ya da bir eğitim size tanıdık gelmiyorsa, sebebi çoğu zaman budur.

Çalışılmış bir örnek: yerel kafelerin herkese açık bir dizini

Şehrinizdeki kafeleri listeleyen, her kafe için bir sayfası olan ve arama sonuçlarında görünmesini istediğiniz bir site düşünün.

Bir kafe için bir Next.js sayfası kabaca şöyle görünebilir:

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

Biri (ya da Google) /cafes/blue-door adresini ziyaret ettiğinde olanlar:

1. Next.js URL’yi o dosyayla eşleştirir. [slug] klasörü “herhangi bir kafe” anlamına gelir.
2. Bileşen sunucuda çalışır, kafeyi veritabanından okur ve HTML’i oluşturur.
3. Tarayıcı, kafenin adı ve adresi zaten içinde olan eksiksiz bir sayfa alır; veri için JavaScript’in beklenmesi gerekmez.

Düz bir istemci tarafı React uygulamasında ise tarayıcı önce neredeyse boş bir sayfa alır, sonra JavaScript’i indirir, sonra kafeyi getirir ve sonra gösterir. Arama motorları bunu çoğu zaman işleyebilir, ama tam oluşmuş bir sayfa daha güvenilirdir. Bkz. yapay zekâyla yapılmış web siteleri için SEO.

Buna karşılık, bir girişin arkasındaki yalnızca personele açık bir panel düşünün: arama motorları zaten onu göremez, dolayısıyla sunucu tarafı render çok fayda sağlamaz ve daha basit bir Vite uygulaması çoğu zaman daha uygundur.

Temel terimler

Yaygın yanlış anlamalar

• “Next.js, React’in yerini alır.” Almaz. React’i kullanır. Bileşenleriniz hâlâ React bileşenleridir.
• “Next.js her zaman daha iyi seçimdir.” Daha yeteneklidir, ama anlaşılması da daha fazla şey gerektirir. Sunucu tarafı render, önbellekleme ve sunucu ile istemci kodu arasındaki fark, kafa karıştırıcı hataların sık kaynaklarıdır. Büyük ölçüde giriş arkasında çalışan bir uygulama için düz bir React uygulaması genellikle daha basittir.
• “Next.js yalnızca Vercel’de çalışır.” Açık kaynaklıdır ve herhangi bir Node.js sunucusunda ya da bir Docker konteynerinde çalışabilir. Sunucu özelliklerini kullanmazsanız tam statik dışa aktarım da mümkündür.
• “Next.js kullanmak iyi SEO’yu garanti eder.” Okunabilir sayfaları kolaylaştırır. Sıralamalar yine başlıklara, içeriğe, hıza ve bağlantılara bağlıdır.
• “Next.js’te sunucu kodu otomatik olarak gizlidir.” İstemci için işaretlenen kod tarayıcıya iner. Gizli bilgiler yalnızca sunucu tarafı kodda kalmalı ve ortam değişkenlerinde tutulmalıdır.

Yapay zekâ oluşturucunuzdan ne isteyin

• “Next.js’i App Router ile kullan” — istersen ilk isteminde.
• “Hangi sayfalar sunucuda render ediliyor, hangileri statik ve hangileri tarayıcıda çalışıyor — ve neden?”
• “Herkese açık pazarlama ve listeleme sayfalarını, doğru başlık ve açıklamalarla sunucu tarafında render edilmiş ya da statik yap.”
• “API anahtarlarını yalnızca sunucu tarafı kodda ve ortam değişkenlerinde tut. Her birinin nerede okunduğunu göster.”
• “Bu uygulamanın Next.js’e ihtiyacı var mı, yoksa yapmak istediğimiz şey için Vite + React daha basit olur mu?”

Mythex’te Next.js

Mythex varsayılan olarak Vite + React + TypeScript + Tailwind kullanır ve isteminizde belirttiğinizde Next.js’e geçer; bunu erken söylemek, sonradan değiştirmekten daha az kredi harcatır. Uygulamayı canlı Önizlemede görürsünüz; Yayımla ise hosting’i kendiniz kurmadan uygulamayı canlı bir URL’ye koyar. Mythex dokümanları, istemci tarafında render edilen tek sayfalık uygulamaların SEO açısından sunucu tarafında render edilmiş ya da statik HTML’den daha zayıf olduğunu belirtir; bu yüzden arama önemliyse bunu baştan söylemeye değer (uygulamanız için SEO).

Sorular