NextJS'te Paralel Yönlendirme

NextJS'te, sitenin bir bölümünün istenen URL'ye bağlı olarak farklı içerik göstermesi sağlanabilir. Buna paralel yönlendirme denir.

Bir örnek üzerinden inceleyelim. Sitemizin aşağıdaki düzene sahip olduğunu varsayalım:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Diyelim ki başlıkta (header) dinamik bilgilerin gösterilmesini istiyoruz. /users URL'sinde kullanıcıların, /posts URL'sinde ise gönderilerin gösterildiği bir bileşen olsun.

Bu tür bir paralel yönlendirme için adı @ sembolü ile başlayan özel bir klasör oluşturulmalıdır. Örnek olarak klasörümüze @info adını verelim.

Bu klasörün içine iki bileşen yerleştireceğiz. Birincisi /users/ klasöründe kullanıcıları göstermek için, ikincisi ise /posts/ klasöründe gönderileri göstermek için. Dosya yapımız aşağıdaki gibi olacaktır:

• /app//@info//users/page.jsx/posts/page.jsx

Şimdi sitemizin düzeninde (layout) özel bir ekleme komutu yazmamız gerekiyor. Bunun için özel bir dinamik slot kullanılmalıdır.

Bunun ne olduğunu anlamak için öncelikle sitemizin düzen fonksiyonunun parametresine bakalım:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

Parametre olarak bir nesnenin iletildiğine ve bu nesneden sitenin içeriğini children değişkenine çıkardığımıza dikkat edin.

Bu nesnede başka anahtarlar da bulunabilir. Bunlar, adı @ ile başlayan klasörlere karşılık gelir.

Bizim durumumuzda @info klasörümüz var, bu da info değişkenine erişebileceğimiz anlamına gelir. Bu değişken, URL'ye bağlı olarak bileşenlerden birinin (kullanıcılar veya gönderiler) içeriğini taşır. Bu değişkeni alalım:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

Şimdi düzenin içinde info değişkenini gösterebiliriz. URL'ye bağlı olarak buraya bileşenlerimizden birinin içeriği eklenecektir:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}