Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Next.js е мощна рамка за изграждане на високопроизводителни React приложения. Една от функциите му е възможността да създавате персонализирани оформления за вашите страници, което ви позволява да създадете последователен дизайн, който е лесен за поддръжка и актуализиране във вашето приложение.

Създаване на персонализиран компонент на оформлението в Next. JS

В папката с име компоненти във вашия проект Next.js създайте Layout.jsx и добавете следния код, за да създадете компонента за оформление.

импортиране Глава от"следваща/глава"
импортиране Заглавка от'./Header.jsx'
импортиране Долен колонтитул от'./Footer.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> Страница = <span><span>()</span> =></span> (<br> <br> <h1>Начало<<span>/h1></span><br> <<span>/Оформление></span><br>)<br><span>експортиране</span> <span> страница по подразбиране</span><br>
</h1></code> </pre>
<p>Ще приложи оформление към тази страница. Можете да повторите този процес за всички страници, към които искате да приложите оформлението.</p>
<p>За да използвате оформлението във всички страници в приложенията наведнъж, импортирайте компонента на оформлението във файла <strong>/page/_app.js</strong> и го използвайте по следния начин.</p> <pre> <code><span>импортиране</span> Оформление <span>от span> <span>"../components/layout"</span>;<br><span><span>функция</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>връщане</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Примерите, показани досега използвайте папките Next.js с 12 страници. В 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> </p>
<pre> <code><span>export</span> <span>по подразбиране</span> <span><span>функция</span> <span>RootLayout</span>(<span>{ деца } 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>статии</strong>, се съпоставя с URL пътя <strong>приложение/статии</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>