Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Next.js este un cadru puternic pentru construirea de aplicații React de înaltă performanță. Una dintre caracteristicile sale este capacitatea de a crea machete personalizate pentru paginile dvs., permițându-vă să creați un design consistent, ușor de întreținut și actualizat în aplicația dvs.

Crearea unei componente de aspect personalizat în Next. JS

În folderul numit componente în proiectul dvs. Next.js, creați Layout.jsx și adăugați următorul cod pentru a crea componenta de aspect.

import Cap din„următorul/cap”
import Antet din„./Header.jsx”
import Subsol din„./Footer.jsx”
const Aspect = (copii) => (



Aplicația mea<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {copii}<br> <footer></footer><br> <<span>/div></span><br>)<br><span>export</span> <span>implicit</span> Aspect<br> < p>Această componentă importă componentele Antet și Subsol și <span>acceptă copii ca recuzită</span>. Redă <strong>copiii</strong> între componentele Antet și Subsol. Când includeți o pagină cu acest aspect, antetul și subsolul vor fi afișate în partea de sus și de jos.<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>
<h2 id="using-the-layout-component"> Folosind Componentă aspect </h2>
<p>Pentru a utiliza componenta aspect, importați-o într-o componentă de pagină și utilizați-o așa cum se arată mai jos.</p> <pre> <code><span>import</span> Aspect <span>din</span> <span>„../components/Layout”</span><br><span>const</span> Pagina = <span><span>()</span> =></span> (<br> <layout><br> <h1>Acasă<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>export</span> <span> implicit</span> Pagina<br>
</h1></layout></code> </pre>
<p>Se va aplica aspectul acestei pagini. Puteți repeta acest proces pentru toate paginile pentru care doriți să aplicați aspectul.</p>
<p>Pentru a utiliza aspectul în toate paginile din aplicații simultan, importați componenta de aspect în fișierul <strong>/page/_app.js</strong> și utilizați-o după cum urmează.</p> <pre> <code><span>import</span> Layout <span>din</span> span> <span>"../components/layout"</span>;<br><span><span>funcție</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>întoarce</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></code> </pre>
<p>Exemplele prezentate până acum utilizați folderele Next.js de 12 pagini. În Next.js 13, creați aspectul în folderul aplicației (în momentul scrierii, este în versiune beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Crearea unui aspect personalizat în dosarul de aplicații </h2>
<p>Dosarul <span>aplicația din Next.js 13 </span> necesită să creați un aspect rădăcină la baza acestuia. Acesta este aspectul pe care Next.js îl va aplica tuturor paginilor aplicației dvs.</p>
<p>Pentru a demonstra, creați un fișier numit <strong>layout.jsx</strong> și adăugați următorul cod. p> </p>
<pre> <code><span>export</span> <span>implicit</span> <span><span>funcție</span> <span>RootLayout</span>(<span>{ copii } span>) </span>{<br> <span>întoarce</span> (<br> „ro”</span>><br> {copii}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Componenta de aspect rădăcină acceptă și redă <strong>copii</strong>. Mai jos sunt câteva dintre lucrurile pe care ar trebui să le știți despre un aspect rădăcină:</p>
<ul> <li> Trebuie să îl includeți în folderul aplicației. </li> <li> Înlocuiește <strong>_app.js</strong> și <strong>_document.js</strong> în folderul de pagină al Next.js 12. </li> <li> Trebuie să includeți în mod explicit eticheta HTML și body. </li> <li> Este o componentă de server în mod implicit. </li> </ul>
<p>Așa cum sa menționat, aspectul rădăcină se aplică tuturor paginilor, deci cum creați machete personalizate pentru diferite segmente de rută?</p>
<p>În dosarul aplicației, puteți defini o rută creând dosare pentru fiecare rută segment. De exemplu, crearea unui dosar numit <strong>articole</strong> se asociază cu calea URL <strong>aplicație/articole</strong>. Pentru a adăuga alte segmente de rută, creați un subdosar în folderul principal de rută. De exemplu, adăugarea unui dosar numit <strong>Trending</strong> în interiorul folderului <strong>articole</strong> se mapează la calea URL <strong>app/articles/trending</strong>.</p>
<p>Când adăugați o componentă <strong>layout.jsx</strong> la un dosar de rută, aceasta se va aplica tuturor paginilor din acel segment de rută și subfolderele acestuia. De exemplu, adăugarea unei componente de aspect în dosarul <strong>articole</strong> se va aplica tuturor paginilor din ruta articolelor, inclusiv celor din subdosarul <strong>Trending</strong>. Dacă adăugați și o componentă de aspect în folderul <strong>Trending</strong>, aspectul din folderul articole va fi imbricat în acesta.</p>
<h2 id="advantages-of-using-layouts"> Avantajele utilizării layout-urilor </h2>
<p>Next.js vă permite să creați componente de aspect pe care le puteți reutiliza în diferite pagini. Acest lucru vă permite să aveți o imagine consecventă pe site-ul dvs. fără a duplica codul pe mai multe pagini. În plus, aspectele vă ajută să implementați rapid modificări, deoarece nu trebuie să faceți modificări în fiecare pagină.</p>