Запіс на курсы па HTML, CSS, JavaScript, PHP, Python, фрэймворкам і CMS,
а таксама: дапамога ў пошуку працы і заказаў, стажыроўка на рэальных праектах→
⊗jsnxPmLtPC 39 of 57 menu

Часткі сайта ў кампанентах у NextJS

У папярэднім уроке мы пісалі тэкст часткаў сайта прама ў файле макета:

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

Гэта, аднак, можа быць незручным у тым выпадку, калі часткі сайта ўтрымліваюць шмат кода і тэксту. Таму звычайна часткі сайта выносяць у асобныя файлы кампанентаў.

Давайце для прыкладу вынясем хэдэр сайта ў асобны кампанент. Зробім адпаведны файл:

export default function Header() { return <> header </>; }

Імпартуем наш кампанент у файле з макетам:

import Header from '@/comp/header/header.jsx'; export default function RootLayout({children}) { }

Выведзем тэкст нашага кампанента з дапамогай тэга з яго імем:

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

Зрабіце асобныя кампаненты з хэдэрам і футарам сайта.

byru