Next.js — это мощная платформа для создания высокопроизводительных приложений React. Одной из его функций является возможность создавать собственные макеты для ваших страниц, что позволяет вам создавать согласованный дизайн, который легко поддерживать и обновлять в вашем приложении.
Создание пользовательского компонента макета в Next. JS
В папке под названием компоненты в своем проекте Next.js создайте Макет.jsx и добавьте следующий код для создания компонента макета.
Импортировать Голова от'следующий / голова'
Импортировать Заголовок от'./Заголовок.jsx'
Импортировать Нижний колонтитул от'./Нижний колонтитул.jsx'
константа Макет = (дети) => (
Мое приложение</title>
"stylesheet" href="/static/css/style.css" />
</Head>
{children}
</div>
)
экспорт по умолчанию Макет
< p>Этот компонент импортирует компоненты верхнего и нижнего колонтитула и
принимает дочерние элементы как реквизит. Он отображает дочерние элементы между компонентами верхнего и нижнего колонтитула. При переносе страницы с помощью этого макета верхний и нижний колонтитулы будут отображаться вверху и внизу. Использование Компонент макета
Чтобы использовать компонент макета, импортируйте его в компонент страницы и используйте, как показано ниже.
import Макет из '../components/Layout'
const Page = () => (
Главная</h1>
</Layout>
)
экспорт страница по умолчанию
Применяется макет на эту страницу. Вы можете повторить этот процесс для всех страниц, к которым вы хотите применить макет.
Чтобы использовать макет сразу на всех страницах в приложениях, импортируйте компонент макета в файл /page/_app.js и используйте его следующим образом.
import Макет из диапазон> "../components/layout";
функция MyApp({ Component, pageProps } интервал>) промежуток>{
return (
</Layout>
) ;
}
Показанные примеры используйте 12-страничные папки Next.js. В Next.js 13 вы создаете макет в папке приложения (на момент написания он находится в стадии бета-тестирования).
Создание пользовательского макета в папке приложения
Для папки приложения в Next.js 13 необходимо создать корневой макет на его основе. Это макет, который Next.js будет применять ко всем страницам вашего приложения.
Для демонстрации создайте файл с именем layout.jsx и добавьте следующий код. р>
экспорт по умолчанию функция RootLayout({ children } span>) {
возврат (
"en">
{children}</body>
</html>< br/> );
}
Компонент корневого макета принимает и отображает дети. Ниже приведены некоторые вещи, которые вы должны знать о корневом макете:
- Вы должны включить его в папку приложения.
- Он заменяет _app.js и _document.js в папке страницы Next.js 12.
- Вы должны явно включить тег HTML и body.
- По умолчанию это серверный компонент.
Как уже упоминалось, корневой макет применяется ко всем страницам, так как же создать собственные макеты для различные сегменты маршрута?
В папке приложения вы можете определить маршрут, создав папки для каждого маршрута. сегмент. Например, создание папки с именем articles сопоставляется с URL-адресом app/articles. Чтобы добавить дополнительные сегменты маршрута, создайте подпапку в основной папке маршрута. Например, добавление папки с названием популярные в папку статьи сопоставляется с путем URL. app/articles/trending.
Когда вы добавляете компонент layout.jsx в папку маршрута, он будет применяться ко всем страницам в этой папке. сегмент маршрута и его подпапки. Например, добавление компонента макета в папку статьи будет применяться ко всем страницам в маршруте статей, в том числе во вложенной папке популярные. Если вы также добавите компонент макета в папку популярные, макет из папки статей будет вложен в него.
Преимущества использования макетов
Next.js позволяет создавать компоненты макета, которые можно повторно использовать в различных страницы. Это позволяет вам иметь единообразный вид на вашем веб-сайте без дублирования кода на нескольких страницах. Кроме того, макеты помогают быстро вносить изменения, поскольку вам не нужно вносить изменения на каждой странице.