Προκαθορισμένο αρχείο υποδοχής στο NextJS

Στο προηγούμενο μάθημα δημιουργήσαμε μια δυναμική υποδοχή με όνομα 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>
  );
}

Υπάρχει, ωστόσο, ένα πρόβλημα. Το θέμα είναι ότι η υποδοχή μας λειτουργεί μόνο για δύο τύπους διευθύνσεων: /users και /posts. Εάν, however, πληκτρολογήσουμε στη γραμμή διευθύνσεων μια άλλη διεύθυνση, για την οποία η υποδοχή μας δεν έχει οριστεί, τότε το NextJS θα επιστρέψει ένα σφάλμα 404.

Για να λυθεί το πρόβλημα, απευθείας στον φάκελο της υποδοχής πρέπει να τοποθετήσουμε ένα ειδικό αρχείο default.jsx. Σε αυτό το αρχείο πρέπει να υπάρχει ένα component, που θα εμφανίζεται όταν στη γραμμή διευθύνσεων εισαχθεί ένα URL, που δεν έχει οριστεί για την υποδοχή μας.

Δηλαδή, στην περίπτωσή μας θα προκύψει η ακόλουθη δομή αρχείων:

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