Қисмҳои сомона дар компонентҳо дар NextJS

Дар дарси қаблӣ мо матнро қисмҳои сомонаро рост дар файли макет навишта будем:

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

Аммо, ин метавонад ғайримувофиқ бошад дар он ҳолате, ки қисмҳои сомона дар баргирандаи сер код ва матн бошанд. Аз ин рӯ, одатан қисмҳои сомона дар файлҳои ҷудогонаи компонентҳо мебароранд.

Барои мисол, биёед header-и сомонаро дар компоненти ҷудогона барем. Файли мувофиқ созем:

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