საიტის ნაწილები კომპონენტებში NextJS-ში

წინა გაკვეთილში ჩვენ ვწერდით ტექსტს საიტის ნაწილების პირდაპირ ლეაუთის ფაილში:

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

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

მაგალითისთვის გამოვყოთ საიტის ჰედერი ცალკე კომპონენტში. შევქმნათ შესაბამისი ფაილი:

comp/header/header.jsxexport default function Header() {
  return <>
    header
  </>;
}

იმპორტირებოთ ჩვენი კომპონენტი ლეაუთის ფაილში:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  
}

გამოვსახოთ ჩვენი კომპონენტის ტექსტი მისი სახელის მქონე ტეგის საშუალებით:

app/layout.jsximport Header from '@/comp/header/header.jsx';

export default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          <Header />
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}