File Slot Default di NextJS

Dalam pelajaran sebelumnya, kita telah membuat slot dinamis dengan nama info:

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

Namun, ada sebuah masalah. Masalahnya adalah slot kita hanya bekerja untuk dua jenis alamat: /users dan /posts. Jika kita memasukkan alamat lain ke bilah alamat, yang tidak didefinisikan untuk slot kita, maka NextJS akan memberikan error 404.

Untuk menyelesaikan masalah ini, langsung ke dalam folder slot harus diletakkan file khusus default.jsx. Dalam file ini harus ada sebuah komponen yang akan ditampilkan ketika URL yang dimasukkan ke bilah alamat tidak ditetapkan untuk slot kita.

Artinya, dalam kasus kita akan terbentuk struktur file sebagai berikut:

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