NextJS'te Varsayılan Slot Dosyası

Önceki derste, adı info olan dinamik bir slot yaptık:

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>
  );
}

Ancak bir sorun var. Bizim slotumuz sadece iki tip adres için çalışıyor: /users ve /posts. Eğer adres çubuğuna slotumuzun tanımlanmadığı başka bir adres yazılırsa, NextJS 404 hatası verecektir.

Sorunu çözmek için doğrudan slot klasörünün içine default.jsx adlı özel bir dosya koyulmalıdır. Bu dosyada, adres çubuğuna slotumuz için belirlenmemiş bir URL yazıldığında gösterilecek bir bileşen olmalıdır.

Yani bizim durumumuzda dosya yapısı şu şekilde olacaktır:

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