Párhuzamos útválasztás a NextJS-ben

A NextJS-ben lehetővé tehető, hogy a webhely egy része különböző tartalmat jelenítsen meg a kért URL-től függően. Ezt párhuzamos útválasztásnak nevezzük.

Nézzük meg egy példán keresztül. Tegyük fel, hogy a webhelyünknek a következő elrendezése van:

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

Tegyük fel, hogy a fejlécben dinamikus információkat szeretnénk megjeleníteni. Tegyük fel, hogy a /users URL-en a felhasználók komponense jelenik meg, a /posts URL-en pedig a bejegyzések komponense.

Ehhez a párhuzamos útválasztáshoz létre kell hozni egy speciális mappát, aminek a neve a @ karakterrel kezdődik. A példa kedvéért nevezzük el a mappánkat @info-nak.

Ebben a mappában helyezzünk el két komponenst. Az első a felhasználók megjelenítéséhez a /users/ mappában, a második a bejegyzések megjelenítéséhez a /posts/ mappában. A következő fájlszerkezetet kapjuk:

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

Most a webhely elrendezésében írnunk kell egy speciális parancsot a beillesztéshez. Ehhez egy speciális dinamikus slot-ot kell használni.

Ahhoz, hogy megértsük, mi ez, először nézzük meg a webhely elrendezésünket létrehozó függvény paraméterét:

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

Figyeljük meg, hogy a paraméter egy objektum, amelyből kivonjuk a webhely tartalmát a children változóba.

Ebben az objektumban más kulcsok is lehetnek. Ezek azokhoz a mappákhoz kapcsolódnak, amelyek neve a @ karakterrel kezdődik.

Esetünkben van egy @info mappánk, ami azt jelenti, hogy hozzáférünk egy info változóhoz, amely a URL-től függően az egyik komponens - a felhasználók vagy a bejegyzések - szövegét tartalmazza. Kérjük le ezt a változót:

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

Most az elrendezés belsejében kiírhatjuk a info változót. Ide fog beszúródni a URL-től függően az egyik komponensünk szövege:

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