Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Next.js — это мощная платформа для создания высокопроизводительных приложений React. Одной из его функций является возможность создавать собственные макеты для ваших страниц, что позволяет вам создавать согласованный дизайн, который легко поддерживать и обновлять в вашем приложении.

Создание пользовательского компонента макета в Next. JS

В папке под названием компоненты в своем проекте Next.js создайте Макет.jsx и добавьте следующий код для создания компонента макета.

Импортировать Голова от'следующий / голова'
Импортировать Заголовок от'./Заголовок.jsx'
Импортировать Нижний колонтитул от'./Нижний колонтитул.jsx'
константа Макет = (дети) => (



Мое приложение<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {children}<br> <footer></footer><br> <<span>/div></span><br>)<br><span>экспорт</span> <span>по умолчанию</span> Макет<br> < p>Этот компонент импортирует компоненты верхнего и нижнего колонтитула и <div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6975751975873345" crossorigin="anonymous"></script>
<!-- den1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6975751975873345" data-ad-slot="1357082842" data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<span>принимает дочерние элементы как реквизит</span>. Он отображает <strong>дочерние элементы</strong> между компонентами верхнего и нижнего колонтитула. При переносе страницы с помощью этого макета верхний и нижний колонтитулы будут отображаться вверху и внизу.<h2 id="using-the-layout-component"> Использование Компонент макета </h2>
<p>Чтобы использовать компонент макета, импортируйте его в компонент страницы и используйте, как показано ниже.</p> <pre> <code><span>import</span> Макет <span>из</span> <span>'../components/Layout'</span><br><span>const</span> Page = <span><span>()</span> =></span> (<br> <br> <h1>Главная<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>экспорт</span> <span> страница по умолчанию</span><br>
</h1></code> </pre>
<p>Применяется макет на эту страницу. Вы можете повторить этот процесс для всех страниц, к которым вы хотите применить макет.</p>
<p>Чтобы использовать макет сразу на всех страницах в приложениях, импортируйте компонент макета в файл <strong>/page/_app.js</strong> и используйте его следующим образом.</p> <pre> <code><span>import</span> Макет <span>из диапазон> <span>"../components/layout"</span>;<br><span><span>функция</span> <span>MyApp</span>(<span>{ Component, pageProps } интервал>) промежуток>{ <br> <span>return</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></span></code> </pre>
<p>Показанные примеры используйте 12-страничные папки Next.js. В Next.js 13 вы создаете макет в папке приложения (на момент написания он находится в стадии бета-тестирования).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Создание пользовательского макета в папке приложения </h2>
<p>Для <span>папки приложения в Next.js 13 </span> необходимо создать корневой макет на его основе. Это макет, который Next.js будет применять ко всем страницам вашего приложения.</p>
<p>Для демонстрации создайте файл с именем <strong>layout.jsx</strong> и добавьте следующий код. р> </p>
<pre> <code><span>экспорт</span> <span>по умолчанию</span> <span><span>функция</span> <span>RootLayout</span>(<span>{ children } span>) </span>{<br> <span>возврат</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Компонент корневого макета принимает и отображает <strong>дети</strong>. Ниже приведены некоторые вещи, которые вы должны знать о корневом макете:</p>
<ul> <li> Вы должны включить его в папку приложения. </li> <li> Он заменяет <strong>_app.js</strong> и <strong>_document.js</strong> в папке страницы Next.js 12. </li> <li> Вы должны явно включить тег HTML и body. </li> <li> По умолчанию это серверный компонент. </li> </ul>
<p>Как уже упоминалось, корневой макет применяется ко всем страницам, так как же создать собственные макеты для различные сегменты маршрута?</p>
<p>В папке приложения вы можете определить маршрут, создав папки для каждого маршрута. сегмент. Например, создание папки с именем <strong>articles</strong> сопоставляется с URL-адресом <strong>app/articles</strong>. Чтобы добавить дополнительные сегменты маршрута, создайте подпапку в основной папке маршрута. Например, добавление папки с названием <strong>популярные</strong> в папку <strong>статьи</strong> сопоставляется с путем URL. <strong>app/articles/trending</strong>.</p>
<p>Когда вы добавляете компонент <strong>layout.jsx</strong> в папку маршрута, он будет применяться ко всем страницам в этой папке. сегмент маршрута и его подпапки. Например, добавление компонента макета в папку <strong>статьи</strong> будет применяться ко всем страницам в маршруте статей, в том числе во вложенной папке <strong>популярные</strong>. Если вы также добавите компонент макета в папку <strong>популярные</strong>, макет из папки статей будет вложен в него.</p>
<h2 id="advantages-of-using-layouts"> Преимущества использования макетов </h2>
<p>Next.js позволяет создавать компоненты макета, которые можно повторно использовать в различных страницы. Это позволяет вам иметь единообразный вид на вашем веб-сайте без дублирования кода на нескольких страницах. Кроме того, макеты помогают быстро вносить изменения, поскольку вам не нужно вносить изменения на каждой странице.</p>