В Next.js 13 вы можете использовать компонент `next/head` для передачи свойств из страницы в общий макет.
Давайте рассмотрим пример:
В вашем макете `app/layout.tsx` вы можете принять параметры или свойства (`props`), которые хотите передать из страницы:
```tsx
import Head from 'next/head';
type LayoutProps = {
title: string;
hideFooter: boolean;
};
const Layout: React.FC<LayoutProps> = ({ title, hideFooter, children }) => {
return (
<>
<Head>
<title>{title}</title>
</Head>
<header>Заголовок</header>
<main>{children}</main>
{!hideFooter && <footer>Футер</footer>}
</>
);
};
export default Layout;
```
Затем, в вашей странице (`pages/index.tsx`, например), вы можете передать необходимые свойства в компонент макета:
```tsx
import Layout from '../app/layout';
const HomePage: React.FC = () => {
const breadcrumbs = ['Главная', 'Страница'];
const hideFooter = true;
return (
<Layout title="Моя страница" hideFooter={hideFooter}>
<h1>Привет, мир!</h1>
{/* Ваш контент страницы */}
</Layout>
);
};
export default HomePage;
```
В приведенном выше примере мы передаем свойство `title` с помощью `Head` компонента из пакета `next/head`, а также свойства `hideFooter` из страницы в компонент `Layout`. Вы также можете передать дополнительные свойства, такие как `breadcrumbs` массив, если они доступны на всех страницах.
Надеюсь, это поможет вам передать свойства из страницы в общий макет в Next.js 13.