Съдържание в оформлението на уебсайт в NextJS

Нека разгледаме основното оформление на уебсайта, което започнахме да разглеждаме в предишния урок:

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

Както виждате, оформлението на уебсайта представлява компонент с функция. При това в параметъра на функцията се предава обект, от който извличаме ключа children в съответната променлива. В тази променлива се съхранява съдържанието на файла page.jsx, който съответства на заявения URL.

Тоест във файла layout.jsx у нас се съхранява оформлението на уебсайта, а с помощта на променливата children ние посочваме мястото в оформлението на уебсайта, в което трябва да се вмъкне съдържанието на страницата.

За пример нека оформим съдържанието на страницата в някакъв таг:

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