პარალელური როუტინგი 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>
  );
}

დავუშვათ, გვსურს, რომ ჰედერში გამოჩნდეს დინამიური ინფორმაცია. URL /users-მ უნდა გამოიტანოს კომპონენტი მომხმარებლებით, ხოლო URL /posts კომპონენტი პოსტებით.

ასეთი პარალელური როუტინგისთვის საჭიროა განსაკუთრებული ფოლდერის გაკეთება, რომლის სახელიც დაიწყება სიმბოლოთი @. მაგალითისთვის დავარქვათ ჩვენს ფოლდერს @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>
  );
}