Oletuspaikatiedosto NextJS:ssä

Edellisessä oppitunnissa teimme dynaamisen paikan nimeltä 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>
  );
}

On kuitenkin ongelma. Asia on siinä, että paikkamme toimii vain kahden tyyppisille osoitteille: /users ja /posts. Jos osoiteriville kirjoitetaan jokin toinen osoite, jolle paikkaamme ei ole määritelty, NextJS näyttää 404 virheen.

Ongelman ratkaisemiseksi tulee suoraan paikan kansioon sijoittaa erityinen tiedosto default.jsx. Tässä tiedostossa tulee olla komponentti, jota näytetään, kun osoiteriville on kirjoitettu URL, joka ei ole määritelty paikallemme.

Eli meidän tapauksessamme saadaan seuraava tiedostorakenne:

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