Rinnakkaisreititys NextJS:ssä

NextJS:ssä voidaan tehdä niin, että osa sivustosta näyttää eri sisältöä riippuen pyydetystä URL-osoitteesta. Tätä kutsutaan rinnakkaiseksi reititykseksi.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava sivuston layout:

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

Oletetaan, että haluamme headeriin dynaamista tietoa. URL-osoitteessa /users tulostetaan komponentti käyttäjillä, ja URL-osoitteessa /posts komponentti postauksilla.

Tällaista rinnakkaista reititystä varten on tehtävä erityinen kansio, jonka nimi alkaa merkillä @. Esimerkiksi nimetään kansiomme @info.

Tähän kansioon sijoitamme kaksi komponenttia. Ensimmäinen käyttäjien näyttämiseen kansiossa /users/, ja toinen postausten näyttämiseen kansiossa /posts/. Saamme seuraavan tiedostorakenteen:

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

Nyt meidän on layoutissa kirjoitettava erityiskomento lisäystä varten. Tätä varten on käytettävä erityistä dynaamista slottia.

Ymmärtääksesi mitä tämä on, katso ensin layout-funktiomme parametria:

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

Huomaa, että parametrina meille välitetään objekti, josta poimimme sivuston sisällön muuttujaan children.

Tässä objektissa voi olla myös muita avaimia. Ne vastaavat kansioita, joiden nimi on alkanut merkillä @.

Meidän tapauksessamme meillä on kansio @info, mikä tarkoittaa, että meillä on käytettävissä muuttuja info, joka URL-osoitteesta riippuen sisältää tekstin jommastakummasta komponentista - käyttäjät tai postaukset. Haetaan tämä muuttuja:

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

Nyt layoutin merkintäkielessä voimme tulostaa muuttujan info. Tähän kohtaan URL-osoitteesta riippuen lisätään teksti jostakin komponenteistamme:

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