Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Next.js ir spēcīgs ietvars augstas veiktspējas React lietojumprogrammu izveidei. Viena no tā funkcijām ir iespēja izveidot pielāgotus izkārtojumus savām lapām, kas ļauj izveidot konsekventu dizainu, ko ir viegli uzturēt un atjaunināt visā lietojumprogrammā.

Pielāgota izkārtojuma komponenta izveide sadaļā Tālāk. JS

Mapē ar nosaukumu sastāvdaļas savā Next.js projektā izveidojiet Layout.jsx un pievienojiet šādu kodu, lai izveidotu izkārtojuma komponentu.

imports Galva no"nākamais/galva"
imports Virsraksts no'./Header.jsx'
imports Kājene no'./Footer.jsx'
konst Izkārtojums = (bērniem) => (



Mana lietotne<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Galvene></span><br> <galvene></galvene><br> {bērni}<br> <k></k><br> <<span>/div></span><br>)<br><span>eksportēt</span> <span>noklusējuma</span> izkārtojums<br> < p>Šis komponents importē galvenes un kājenes komponentus un <span>pieņem bērnus kā rekvizīti</span>. Tas atveido <strong>bērnus</strong> starp galvenes un kājenes komponentiem. Aptinot lapu ar šo izkārtojumu, augšpusē un apakšā tiks parādīta galvene un kājene.<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"> Izmantojot Izkārtojuma komponents </h2>
<p>Lai izmantotu izkārtojuma komponentu, importējiet to lapas komponentā un izmantojiet to, kā parādīts tālāk.</p> <pre> <code><span>importēt</span> Izkārtojums <span>no</span> <span>'../components/Layout'</span><br><span>const</span> Lapa = <span><span>()</span> =></span> (<br> <izk><br> <h1>Sākums<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>eksportēt</span> <span> noklusējuma</span> lapa<br>
</h1></izk></code> </pre>
<p>Tā tiks lietota šīs lapas izkārtojums. Varat atkārtot šo procesu visās lapās, kurām vēlaties lietot izkārtojumu.</p>
<p>Lai izkārtojumu izmantotu vienlaikus visās lietojumprogrammu lapās, importējiet izkārtojuma komponentu failā <strong>/page/_app.js</strong> un izmantojiet to šādi.</p> <pre> <code><span>importēt</span> Izkārtojums <span>no span> <span>"../components/layout"</span>;<br><span><span>funkcija</span> <span>MyApp</span> (<span>{ Component, pageProps } span>) </span>{ <br> <span>atgriezties</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Līdz šim parādītie piemēri izmantojiet mapes Next.js 12 lappuses. Programmā Next.js 13 izkārtojums tiek izveidots lietotņu mapē (rakstīšanas brīdī tas ir beta versijā).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Pielāgota izkārtojuma izveide lietotņu mapē </h2>
<p>Mapes <span>lietotņu mapē Next.js 13</span> ir nepieciešams izveidot saknes izkārtojumu tās pamatnē. Šis ir izkārtojums, ko Next.js lietos visās jūsu lietojumprogrammas lapās.</p>
<p>Lai demonstrētu, izveidojiet failu ar nosaukumu <strong>layout.jsx</strong> un pievienojiet tālāk norādīto kodu. p> </p>
<pre> <code><span>eksportēt</span> <span>noklusējuma</span> <span><span>funkcija</span> <span>RootLayout</span> (<span>{ bērni } span>) </span>{<br> <span>atgriezties</span> (<br> "lv"</span>><br> {bērni<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Saknes izkārtojuma komponents pieņem un atveido <strong>bērni</strong>. Tālāk ir norādītas dažas lietas, kas jums jāzina par saknes izkārtojumu.</p>
<ul> <li> Tas ir jāiekļauj lietotņu mapē. </li> <li> Tas aizstāj <strong>_app.js</strong> un <strong>_document.js</strong> Next.js 12. lapas mapē. </li> <li> Jums ir skaidri jāiekļauj HTML un body tags. </li> <li> Pēc noklusējuma tas ir servera komponents. </li> </ul>
<p>Kā jau minēts, saknes izkārtojums attiecas uz visām lapām, tāpēc kā izveidot pielāgotus izkārtojumus dažādi maršruta posmi?</p>
<p>Savas lietotnes mapē varat definēt maršrutu, katram maršrutam izveidojot mapes. segmentu. Piemēram, izveidojot mapi ar nosaukumu <strong>raksti</strong>, tiek piesaistīts URL ceļš <strong>lietotne/raksti</strong>. Lai pievienotu papildu maršruta posmus, galvenajā maršruta mapē izveidojiet apakšmapi. Piemēram, mapes <strong>trending</strong> pievienošana <strong>rakstu</strong> mapes kartēm URL ceļam. <strong>app/articles/trending</strong>.</p>
<p>Kad maršruta mapei pievienosit komponentu <strong>layout.jsx</strong>, tas tiks lietots visās tajā esošajās lapās. maršruta segments un tā apakšmapes. Piemēram, izkārtojuma komponenta pievienošana mapei <strong>raksti</strong> attieksies uz visām rakstu maršruta lapām, tostarp tām, kas atrodas apakšmapē <strong>trending</strong>. Ja mapē <strong>trending</strong> pievienosit arī izkārtojuma komponentu, izkārtojums rakstu mapē tiks ligzdots tajā.</p>
<h2 id="advantages-of-using-layouts"> Izkārtojumu izmantošanas priekšrocības </h2>
<p>Next.js ļauj izveidot izkārtojuma komponentus, kurus varat atkārtoti izmantot dažādās lapas. Tas ļauj jums nodrošināt konsekventu izskatu visā vietnē, nedublējot kodu vairākās lapās. Turklāt izkārtojumi palīdz ātri ieviest izmaiņas, jo jums nav jāveic izmaiņas katrā lapā.</p>