NextJS-тегі параллельді маршруттау

NextJS-те сайттың бір бөлігі сұранылған URL-ге байланысты әртүрлі мазмұнды көрсетуіне мүмкіндік бар. Бұл параллельді маршруттау деп аталады.

Мысал арқылы қарастырайық. Бізде келесі сайт макеты бар делік:

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

Біз хедерде динамикалық ақпарат шығарылуын қалаймыз делік. /users URL бойынша пайдаланушылар компоненті, ал /posts URL бойынша посттар компоненті шығарылсын.

Мұндай параллельді маршруттау үшін арнайы бума жасау керек, оның атауын @ таңбасынан бастау керек. Мысал ретінде біздің буманы @info деп атайық.

Бұл бумада екі компонент орналастырамыз. Біріншісі /users/ бумасында пайдаланушыларды көрсету үшін, ал екіншісі /posts/ бумасында посттарды көрсету үшін. Бізде келесі файл құрылымы шығады:

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

Енді бізге сайт макетінде арнайы кірістіру командасын жазу керек. Ол үшін арнайы динамикалық слот қолдану керек.

Бұл не екенін түсіну үшін, алдымен сайт макетіміздің функциясының параметріне назар аударыңыз:

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

Параметр ретінде бізге нысан берілетініне назар аударыңыз, одан біз сайт мазмұнын children айнымалысына бөліп аламыз.

Бұл нысанда басқа кілттер де болуы мүмкін. Олар біз атауын @ таңбасынан бастаған бумаларға сәйкес келеді.

Біздің жағдайда бізде @info бумасы бар, бұл бізде info айнымалысына қол жетімді болатынын білдіреді, ол URL-ге байланысты компоненттердің бірінің - пайдаланушылардың немесе посттардың мәтінін қамтиды. Осы айнымалыны алайық:

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

Енді біз макет үлгісінің ішінде info айнымалысын шығара аламыз. Бұл орынға URL-ге байланысты біздің компоненттердің бірінің мәтіні еніп тұрады:

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