ჩასმული ლეაუტები NextJS-ში

როგორც იცით, საქაღალდეში /app ფაილში /layout.jsx მდებარეობს საიტის ძირითადი ლეაუტი.

სურვილის შემთხვევაში, თუმცა, ჩადგმულ საქაღალდეებში შესაძლებელია საკუთარი ლეაუტების შექმნა. ამ შემთხვევაში გვერდის კონტენტი თავდაპირველად ჩაისვმება ჩასმულ ლეაუტში, შემდეგ კი მიღებული შედეგი ჩაისვმება ძირითად ლეაუტში.

მოდით, ვცადოთ პრაქტიკაში. დავუშვათ, ჩვენი ძირითადი ლეაუტი აქვს შემდეგი სახე:

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

მოდით, გავაკეთოთ კიდევ ერთი, ჩასმული ლეაუტი ყველა კონტენტისთვის საქაღალდიდან /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      message for all users
    </div>
    <div className="content">
      {children}
    </div>
  );
}

როგორც ხედავთ, ამ ლეაუტში ჩვენ არ ვუთითებთ გვერდის ძირითად თეგებს, რადგან ისინი უკვე არის ჩვენს ძირითად საიტის ლეაუტში.

მოდით, ასევე გავაკეთოთ ფაილი კონტენტით მომხმარებლის საჩვენებლად:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

ამ მანიპულაციების შემდეგ ჩვენი ფაილური სტრუქტურა ასე გამოიყურება:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

ახლა, თუ შესაბამის URL-მისამართზე მივმართავთ, NextJS ყველაფერს ერთად აწყობს და ბრაუზერში ჩვენ მივიღებთ შემდეგ საბოლოო HTML კოდს:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>