Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Next.js on võimas raamistik suure jõudlusega Reacti rakenduste loomiseks. Üks selle funktsioonidest on võimalus luua oma lehtede jaoks kohandatud paigutusi, mis võimaldavad teil luua ühtse kujunduse, mida on lihtne kogu rakenduses hooldada ja värskendada.

Kohandatud paigutuse komponendi loomine jaotises Edasi. JS

Kaustas nimega komponendid oma Next.js projektis loo Layout.jsx ja lisage paigutuskomponendi loomiseks järgmine kood.

importida Pea alates'järgmine/pea'
importida Päis alates'./Header.jsx'
importida Jalus alates'./Footer.jsx'
konst Paigutus = (lapsed) => (



Minu rakendus<<span>/title></span><br> <link rel="<span">"laadileht" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <p></p>
<br> {lapsed}<br> <jalus></jalus><br> <<span>/div></span><br>)<br><span>eksport</span> <span>vaikepaigutus</span> Paigutus<br> < p>See komponent impordib päise ja jaluse komponendid ning <span>aktsepteerib lapsi kui rekvisiidid</span>. See renderdab <strong>lapsed</strong> päise ja jaluse komponentide vahele. Kui murrate lehe selle paigutusega, kuvatakse päis ja jalus üleval ja all.<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"> Kasutades Paigutuse komponent </h2>
<p>Küljenduse komponendi kasutamiseks importige see lehe komponendiks ja kasutage seda allpool näidatud viisil.</p> <pre> <code><span>importige</span> Paigutus <span>alates</span> <span>'../components/Layout'</span><br><span>const</span> Leht = <span><span>()</span> =></span> (<br> <paigutus><br> <h1>Avaleht<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>eksport</span> <span> vaikimisi</span> leht<br>
</h1></paigutus></code> </pre>
<p>See rakendab selle lehe paigutus. Saate seda toimingut korrata kõikidel lehtedel, millele soovite paigutust rakendada.</p>
<p>Paigutuse kasutamiseks korraga kõikidel rakenduste lehtedel importige paigutuskomponent faili <strong>/page/_app.js</strong> ja kasutage seda järgmiselt.</p> <pre> <code><span>impordi</span> Paigutus <span>kohast span> <span>"../components/layout"</span>;<br><span><span>funktsioon</span> <span>Minu rakendus</span> (<span>{ Component, pageProps } span>) </span>{ <br> <span>tagasi</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Seni näidatud näited kasutage Next.js 12 lehekülje kaustu. Rakenduses Next.js 13 loote paigutuse rakenduse kaustas (kirjutamise seisuga on see beetaversioonis).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Rakenduse kaustas kohandatud paigutuse loomine </h2>
<p><span>Rakenduse kaustas Next.js 13 </span> on vaja luua juurpaigutuse alus. See on paigutus, mida Next.js rakendab teie rakenduse kõikidele lehtedele.</p>
<p>Esitamiseks looge fail nimega <strong>layout.jsx</strong> ja lisage järgmine kood.</p> p> <pre> <code><span>eksport</span> <span>vaikeseade</span> <span><span>funktsioon</span> <span>RootLayout</span> (<span>{ last } span>) </span>{<br> <span>tagasi</span> (<br> "et"</span>><br> {lapsed}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Juurpaigutuse komponent aktsepteerib ja renderdab <strong>lapsed</strong>. Allpool on mõned asjad, mida peaksite juurpaigutuse kohta teadma.</p>
<ul> <li> Peate selle rakenduse kausta lisama. </li> <li> See asendab faili Next.js 12 lehekaustas <strong>_app.js</strong> ja <strong>_document.js</strong>. </li> <li> Peate selgesõnaliselt lisama HTML-i ja body-märgendi. </li> <li> Vaikimisi on see serverikomponent. </li> </ul>
<p>Nagu mainitud, kehtib juurpaigutus kõikidele lehtedele, seega kuidas luua kohandatud paigutusi erinevad marsruudilõigud?</p>
<p>Oma rakenduse kaustas saate marsruudi määrata, luues iga marsruudi jaoks kaustad segment. Näiteks kausta nimega <strong>artiklid</strong> loomine seostub URL-i teega <strong>rakendus/artiklid</strong>. Täiendavate marsruudilõikude lisamiseks looge marsruudi põhikaustas alamkaust. Näiteks lisades URL-i teele kausta nimega <strong>populaarne</strong> kausta <strong>artiklid</strong> sisse. <strong>app/articles/trending</strong>.</p>
<p>Kui lisate marsruudikausta komponendi <strong>layout.jsx</strong>, rakendub see kõigile selle lehtedele marsruudilõik ja selle alamkaustad. Näiteks küljenduse komponendi lisamine kausta <strong>artiklid</strong> rakendub kõigile artiklite marsruudi lehtedele, sealhulgas alamkausta <strong>populaarsed</strong> lehtedele. Kui lisate küljenduse komponendi ka kausta <strong>populaarsed</strong>, pesastatakse artiklite kausta paigutus sellesse.</p>
<h2 id="advantages-of-using-layouts"> Paigutuste kasutamise eelised </h2>
<p>Next.js võimaldab teil luua paigutuse komponente, mida saate erinevatel eesmärkidel uuesti kasutada lehekülgi. See võimaldab teil oma veebisaidil ühtlast pilku vaadata, ilma koodi mitmel lehel dubleerimata. Lisaks aitavad paigutused teil muudatusi kiiresti rakendada, kuna te ei pea igal lehel muudatusi tegema.</p>