Часткі сайта ў кампанентах у 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>
);
}
Зрабіце асобныя кампаненты з хэдэрам і футарам сайта.