Next.js’de Rota Oluşturma: Adım Adım Kılavuz

Next.js’de Rota Oluşturma: Adım Adım Kılavuz

Next.js, React tabanlı bir framework olup, sunucu taraflı oluşturma (SSR) ve statik site oluşturma (SSG) gibi özelliklerle web geliştirmeyi kolaylaştırır. Bununla birlikte, Next.js’in en güçlü yanlarından biri de rota yönetimidir. Bu makalede, Next.js’de rota oluşturmanın farklı yöntemlerini detaylı olarak inceleyeceğiz. Öncelikle, en temel yöntem olan Pages dizinini ele alalım.

Pages Dizini ile Rota Oluşturma

Next.js’in rota sistemi, oldukça basit ve sezgiseldir. Pages dizininizdeki dosya isimleri, otomatik olarak rotalarınızı tanımlar. Örneğin, pages/hakkimizda.js dosyası /hakkimizda adresine karşılık gelir. Bu yöntemi kullanarak, basit ve statik rotaları kolayca oluşturabilirsiniz. Sonuç olarak, karmaşık yapılandırmalara gerek kalmadan, hızlı bir şekilde rotalarınızı tanımlayabilirsiniz. Ayrıca, bu sayede projelerinizin daha temiz ve düzenli görünmesini sağlayabilirsiniz.

Dinamik Rotalar

Statik sayfaların ötesinde, dinamik içerik gerektiren rotalara da ihtiyacınız olabilir. Örneğin, bir blog yazısı gösteren bir rota düşünün. Bu durumda, pages/yazilar/[id].js gibi dinamik bir rota kullanabilirsiniz. Burada [id] parçası, URL’den alınan bir değişkeni temsil eder. Bu sayede, her bir blog yazısı için farklı bir rota oluşturabilirsiniz. Bu yöntemi, veri tabanınızdan veya bir API’den gelen verileri görüntülemek için kullanabilirsiniz.

// pages/yazilar/[id].js
export async function getServerSideProps(context) {
  const id = context.params.id;
  // ... API çağrısı veya veritabanı sorgusu ile yazıyı alın ...
  return { props: { yazi: yaziVerisi } };
}

export default function Yazi({ yazi }) {
  return (
    <div>
      <h1>{yazi.baslik}</h1>
      <p>{yazi.icerik}</p>
    </div>
  );
}

Burada, getServerSideProps fonksiyonu, sunucu tarafında çalışarak, dinamik içeriği oluşturur. Sonrasında, bu içerik props olarak sayfaya iletilir.

API Rotaları

Next.js, API rotaları oluşturmayı da destekler. pages/api dizini altında oluşturulan dosyalar, API endpoint’leri olarak davranır. Bu sayede, sunucu tarafında veri işleme ve API’ler oluşturarak uygulamalarınızı genişletebilirsiniz. Örneğin, bir veri tabanıyla etkileşime geçebilir veya harici bir API’den veri alabilirsiniz.

Bu, Next.js’in sağladığı esneklik ve güçten sadece bir örnektir. Daha fazla bilgi için resmi Next.js dökümanlarına buradan ulaşabilirsiniz. Ayrıca, daha fazla Next.js rehberi için kendi web sitemi fatihsoysal.com adresini ziyaret edebilirsiniz.

Umarım bu makale, Next.js’de rota oluşturma konusunda size yardımcı olmuştur. Herhangi bir sorunuz olursa, lütfen yorumlarda belirtin. Başka bir makalede görüşmek üzere!

#Etiketler

#Next.js #Rota #Routing #Pages #DinamikRota #APIRota #NextjsTutorial #FatihSoysal