Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Next.js moćan je okvir za izgradnju visokoučinkovitih React aplikacija. Jedna od njegovih značajki je mogućnost stvaranja prilagođenih izgleda za vaše stranice što vam omogućuje stvaranje dosljednog dizajna koji je lako održavati i ažurirati u vašoj aplikaciji.

Stvaranje prilagođene komponente izgleda u Dalje. JS

U mapi pod nazivom komponente u svom projektu Next.js stvorite Izgled.jsx i dodajte sljedeći kod za izradu komponente izgleda.

uvoz glava iz'sljedeća/glava'
uvoz Zaglavlje iz'./Header.jsx'
uvoz Podnožje iz'./Footer.jsx'
konst Izgled = (djece) => (



Moja aplikacija<<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>izvoz</span> <span>zadano</span> Izgled<br> < p>Ova komponenta uvozi komponente zaglavlja i podnožja i <span>prihvaća djecu kao rekviziti</span>. Renderira <strong>djecu</strong> između komponenti zaglavlja i podnožja. Kada omotate stranicu ovim izgledom, zaglavlje i podnožje bit će prikazani na vrhu i 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"> Korištenje Komponenta izgleda </h2>
<p>Da biste koristili komponentu izgleda, uvezite je u komponentu stranice i upotrijebite je kao što je prikazano u nastavku.</p> <pre> <code><span>uvoz</span> Izgled <span>od</span> <span>'../components/Layout'</span><br><span>const</span> Stranica = <span><span>()</span> =></span> (<br> <izgled><br> <h1>Početna<<span>/h1></span><br> <<span>/Izgled></span><br>)<br><span>izvoz</span> <span> zadana</span> Stranica<br>
</h1></izgled></code> </pre>
<p>Primijenit će raspored na ovu stranicu. Ovaj postupak možete ponoviti na svim stranicama na koje želite primijeniti izgled.</p>
<p>Da biste koristili raspored na svim stranicama u aplikacijama odjednom, uvezite komponentu izgleda u datoteku <strong>/page/_app.js</strong> i koristite je na sljedeći način.</p> <pre> <code><span>uvezi</span> Izgled <span>iz raspon> <span>"../components/layout"</span>;<br><span><span>funkcija</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>povratak</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Do sada prikazani primjeri koristite mape Next.js 12 stranica. U Next.js 13, kreirate izgled u mapi aplikacije (u trenutku pisanja je u beta verziji).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Stvaranje prilagođenog izgleda u mapi aplikacije </h2>
<p>Mapa <span>aplikacije u Next.js 13 </span>zahtijeva da napravite korijenski izgled u njenoj osnovi. Ovo je izgled koji će Next.js primijeniti na sve stranice vaše aplikacije.</p>
<p>Za demonstraciju stvorite datoteku pod nazivom <strong>layout.jsx</strong> i dodajte sljedeći kod. p> </p>
<pre> <code><span>izvoz</span> <span>zadana</span> <span><span>funkcija</span> <span>RootLayout</span>(<span>{ djece } span>) </span>{<br> <span>povratak</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Komponenta korijenskog izgleda prihvaća i prikazuje <strong>djeca</strong>. Ispod su neke od stvari koje biste trebali znati o korijenskom rasporedu:</p>
<ul> <li> Morate ga uključiti u mapu aplikacije. </li> <li> Zamjenjuje <strong>_app.js</strong> i <strong>_document.js</strong> u mapi stranice Next.js 12. </li> <li> Morate izričito uključiti HTML i oznaku tijela. </li> <li> To je komponenta poslužitelja prema zadanim postavkama. </li> </ul>
<p>Kao što je spomenuto, korijenski izgled primjenjuje se na sve stranice, pa kako stvoriti prilagođene izglede za različite segmente rute?</p>
<p>U mapi svoje aplikacije možete definirati rutu stvaranjem mapa za svaku rutu segment. Na primjer, stvaranje mape pod nazivom <strong>articles</strong> preslikava se na URL putanju <strong>app/articles</strong>. Za dodavanje daljnjih segmenata rute, stvorite podmapu unutar glavne mape rute. Na primjer, dodavanje mape pod nazivom <strong>u trendu</strong> unutar mape <strong>članci</strong> preslikava se na put URL-a <strong>app/articles/trending</strong>.</p>
<p>Kada dodate komponentu <strong>layout.jsx</strong> u mapu rute, ona će se primijeniti na sve stranice unutar nje segment rute i njegove podmape. Na primjer, dodavanje komponente izgleda u mapu <strong>članci</strong> primjenjivat će se na sve stranice u ruti članaka, uključujući one u podmapi <strong>u trendu</strong>. Ako također dodate komponentu izgleda u <strong>trending</strong> mapu, izgled u mapi članaka bit će ugniježđen unutar nje.</p>
<h2 id="advantages-of-using-layouts"> Prednosti korištenja izgleda </h2>
<p>Next.js vam omogućuje stvaranje komponenti izgleda koje možete ponovno koristiti u različitim stranice. To vam omogućuje dosljedan izgled cijele web stranice bez dupliciranja koda na više stranica. Osim toga, izgledi vam pomažu da brzo implementirate promjene jer ne morate mijenjati svaku stranicu.</p>