Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Next.js je zmogljivo ogrodje za izdelavo visoko zmogljivih aplikacij React. Ena od njegovih funkcij je zmožnost ustvarjanja postavitev po meri za vaše strani, kar vam omogoča ustvarjanje doslednega dizajna, ki ga je enostavno vzdrževati in posodabljati v vaši aplikaciji.

Ustvarjanje komponente postavitve po meri v Naprej. JS

V mapi z imenom komponente v svojem projektu Next.js ustvarite Layout.jsx in dodajte naslednjo kodo, da ustvarite komponento postavitve.

uvoz glava od'naprej/glava'
uvoz Glava od'./Header.jsx'
uvoz Noga od'./Footer.jsx'
konst Postavitev = (otroci) => (



Moja aplikacija<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Glava></span><br> <glava></glava><br> {children}<br> <noga></noga><br> <<span>/div></span><br>)<br><span>izvozi</span> <span>privzeto</span> Postavitev<br> < p>Ta komponenta uvozi komponente glave in noge in <span>sprejema podrejene kot rekviziti</span>. Upodobi <strong>otroke</strong> med komponentama glave in noge. Ko stran zavijete s to postavitvijo, bosta glava in noga prikazani na vrhu in na dnu.<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"> Uporaba Komponenta postavitve </h2>
<p>Če želite uporabiti komponento postavitve, jo uvozite v komponento strani in jo uporabite, kot je prikazano spodaj.</p> <pre> <code><span>uvoz</span> Postavitev <span>iz</span> <span>'../components/Layout'</span><br><span>const</span> Stran = <span><span>()</span> =></span> (<br> <postavitev><br> <h1>Domov<<span>/h1></span><br> <<span>/Postavitev></span><br>)<br><span>izvoz</span> <span> privzeta</span> stran<br>
</h1></postavitev></code> </pre>
<p>Uporabila bo postavitev na to stran. Ta postopek lahko ponovite za vse strani, za katere želite uporabiti postavitev.</p>
<p>Če želite postavitev uporabiti na vseh straneh v aplikacijah hkrati, uvozite komponento postavitve v datoteko <strong>/page/_app.js</strong> in jo uporabite na naslednji način.</p> <pre> <code><span>uvozi</span> Postavitev <span>iz razpon> <span>"../components/layout"</span>;<br><span><span>funkcija</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>vrnitev</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Do sedaj prikazani primeri uporabite mape Next.js 12 strani. V Next.js 13 ustvarite postavitev v mapi aplikacije (med pisanjem je v različici beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Ustvarjanje postavitve po meri v mapi aplikacij </h2>
<p>Mapa <span>aplikacij v Next.js 13 </span>zahteva, da na njeni osnovi ustvarite korensko postavitev. To je postavitev, ki jo bo Next.js uporabil za vse strani vaše aplikacije.</p>
<p>Za predstavitev ustvarite datoteko z imenom <strong>layout.jsx</strong> in dodajte naslednjo kodo. p> </p>
<pre> <code><span>izvoz</span> <span>privzeto</span> <span><span>funkcija</span> <span>RootLayout</span>(<span>{ otrok } span>) </span>{<br> <span>vrnitev</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Komponenta korenske postavitve sprejme in upodablja <strong>otroci</strong>. Spodaj je nekaj stvari, ki jih morate vedeti o korenski postavitvi:</p>
<ul> <li> Vključiti jo morate v mapo aplikacije. </li> <li> Zamenja <strong>_app.js</strong> in <strong>_document.js</strong> v mapi strani Next.js 12. </li> <li> Izrecno morate vključiti HTML in oznako telesa. </li> <li> Privzeto je komponenta strežnika. </li> </ul>
<p>Kot že omenjeno, korenska postavitev velja za vse strani, torej kako ustvarite postavitve po meri za različne segmente poti?</p>
<p>V mapi aplikacije lahko določite pot tako, da ustvarite mape za vsako pot segment. Na primer, ustvarjanje mape z imenom <strong>članki</strong> se preslika v pot URL <strong>app/članki</strong>. Če želite dodati nadaljnje segmente poti, ustvarite podmapo v glavni mapi poti. Na primer, dodajanje mape z imenom <strong>trending</strong> znotraj mape <strong>articles</strong> se preslika v pot URL <strong>app/articles/trending</strong>.</p>
<p>Ko dodate komponento <strong>layout.jsx</strong> v mapo poti, bo veljala za vse strani znotraj te segment poti in njegove podmape. Na primer, dodajanje komponente postavitve v mapo <strong>članki</strong> bo veljalo za vse strani na poti člankov, vključno s tistimi v podmapi <strong>trending</strong>. Če dodate tudi komponento postavitve v mapo <strong>priljubljeno</strong>, bo postavitev v mapi s članki ugnezdena v njej.</p>
<h2 id="advantages-of-using-layouts"> Prednosti uporabe postavitev </h2>
<p>Next.js vam omogoča ustvarjanje komponent postavitev, ki jih lahko znova uporabite v različnih strani. To vam omogoča dosleden pogled na vaše spletno mesto brez podvajanja kode na več straneh. Poleg tega vam postavitve pomagajo hitro izvesti spremembe, ker vam ni treba spreminjati vsake strani.</p>