NextJS-də Paralel Routing

NextJS-də elə etmək olar ki, saytın bir hissəsi sorğu edilən URL-dən asılı olaraq müxtəlif məzmun göstərsin. Buna paralel routing deyilir.

Gəlin bir nümunəyə baxaq. Tutaq ki, saytımızın aşağıdakı layout-u var:

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

Tutaq ki, biz istəyirik ki, header-də dinamik məlumat göstərilsin. Tutaq ki, /users URL-də istifadəçilər komponenti, /posts URL-də isə yazılar komponenti göstərilsin.

Belə paralel routing üçün xüsusi bir qovluq etmək lazımdır, onun adı @ simvolu ilə başlamalıdır. Nümunə üçün qovluğumuzu @info adlandıraq.

Bu qovluqda iki komponent yerləşdirək. Birincisi /users/ qovluğunda istifadəçiləri göstərmək üçün, ikincisi isə /posts/ qovluğunda yazıları göstərmək üçün. Fayl quruluşumuz aşağıdakı kimi olacaq:

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

İndi bizə sayt layout-undə xüsusi əlavə etmə əmri yazmaq lazımdır. Bunun üçün xüsusi dinamik slot istifadə etmək lazımdır.

Bunun nə olduğunu başa düşmək üçün əvvəlcə sayt layout-unumuzun funksiyasının parametrinə baxın:

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

Diqqət edin ki, parametr kimi bizə bir obyekt ötürülür, ondan biz saytın məzmununu children dəyişəninə çıxarırıq.

Bu obyektdə başqa açar sözlər də ola bilər. Onlar adı @ ilə başlayan qovluqlara uyğun gəlir.

Bizim halda @info qovluğumuz var, bu o deməkdir ki, bizə info dəyişəni əlçatan olacaq, URL-dən asılı olaraq komponentlərdən birinin mətni - istifadəçilər və ya yazılar orada olacaq. Gəlin bu dəyişəni əldə edək:

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

İndi layout-un daxilində biz info dəyişənini göstərə bilərik. URL-dən asılı olaraq bu yerə komponentlərimizdən birinin mətni daxil ediləcək:

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