Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Next.js je výkonný rámec na vytváranie vysokovýkonných aplikácií React. Jednou z jeho funkcií je schopnosť vytvárať vlastné rozloženia pre vaše stránky, čo vám umožní vytvoriť konzistentný dizajn, ktorý sa ľahko udržiava a aktualizuje vo vašej aplikácii.

Vytvorenie vlastného komponentu rozloženia v ďalšom. JS

V priečinku s názvom komponentov vo svojom projekte Next.js vytvorte Layout.jsx a pridajte nasledujúci kód na vytvorenie komponentu rozloženia.

importovať Hlava od'ďalší/hlava'
importovať Hlavička od'./Header.jsx'
importovať Päta od'./Footer.jsx'
konšt Rozloženie = (deti) => (



Moja aplikácia<<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>exportovať</span> <span>predvolené</span> rozloženie<br> < p>Tento komponent importuje komponenty Hlavička a Päta a <span>akceptuje deti ako rekvizity</span>. Vykresľuje <strong>deti</strong> medzi komponentmi Hlavička a Päta. Keď zalomíte stránku s týmto rozložením, hlavička a päta sa zobrazia hore a dole.<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"> Pomocou Komponent rozloženia </h2>
<p>Ak chcete použiť komponent rozloženia, importujte ho do komponentu stránky a použite ho, ako je uvedené nižšie.</p> <pre> <code><span>import</span> Rozloženie <span>z</span> <span>'../components/Layout'</span><br><span>const</span> Stránka = <span><span>()</span> =></span> (<br> <rozlo><br> <h1>Domov<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>export</span> <span> default</span> Page<br>
</h1></rozlo></code> </pre>
<p>Použije sa rozloženie na túto stránku. Tento proces môžete zopakovať na všetkých stránkach, na ktorých chcete použiť rozloženie.</p>
<p>Ak chcete rozloženie použiť na všetkých stránkach v aplikáciách naraz, importujte komponent rozloženia do súboru <strong>/page/_app.js</strong> a použite ho nasledovne.</p> <pre> <code><span>importovať</span> Rozloženie <span>z rozpätie> <span>"../components/layout"</span>;<br><span><span>funkcia</span> <span>Moja aplikácia</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>návrat</span> ( <br> <layout> <br> <komponent></komponent> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Doteraz zobrazené príklady použite priečinky Next.js s 12 stránkami. V Next.js 13 vytvoríte rozloženie v priečinku aplikácie (v čase písania je vo verzii beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Vytvorenie vlastného rozloženia v priečinku aplikácie </h2>
<p>Priečinok <span>app v Next.js 13 </span> vyžaduje, aby ste v jeho základni vytvorili koreňové rozloženie. Toto je rozloženie, ktoré Next.js použije na všetky stránky vašej aplikácie.</p>
<p>Na ukážku vytvorte súbor s názvom <strong>layout.jsx</strong> a pridajte nasledujúci kód.</p>
<p>Na ukážku vytvorte súbor s názvom <strong>layout.jsx</strong>. p> </p>
<pre> <code><span>exportovať</span> <span>predvolené</span> <span><span>funkcia</span> <span>RootLayout</span>(<span>{ deti } span>) </span>{<br> <span>návrat</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Koreňový komponent rozloženia prijíma a vykresľuje <strong>deti</strong>. Nižšie sú uvedené niektoré z vecí, ktoré by ste mali vedieť o koreňovom rozložení:</p>
<ul> <li> Musíte ho zahrnúť do priečinka aplikácie. </li> <li> Nahrádza <strong>_app.js</strong> a <strong>_document.js</strong> v priečinku stránok Next.js 12. </li> <li> Musíte explicitne zahrnúť značku HTML a body. </li> <li> Štandardne je to serverový komponent. </li> </ul>
<p>Ako už bolo spomenuté, koreňové rozloženie sa vzťahuje na všetky stránky, takže ako vytvoríte vlastné rozloženia pre rôzne segmenty trasy?</p>
<p>V priečinku aplikácie môžete definovať trasu vytvorením priečinkov pre každú trasu segment. Napríklad vytvorenie priečinka s názvom <strong>články</strong> sa namapuje na cestu URL <strong>aplikácia/články</strong>. Ak chcete pridať ďalšie segmenty trasy, vytvorte podpriečinok v hlavnom priečinku trasy. Napríklad pridanie priečinka s názvom <strong>trendy</strong> do priečinka <strong>články</strong> sa namapuje na cestu URL <strong>app/articles/trending</strong>.</p>
<p>Keď pridáte komponent <strong>layout.jsx</strong> do priečinka trasy, použije sa na všetky stránky v tomto priečinku segment trasy a jej podpriečinky. Napríklad pridanie komponentu rozloženia do priečinka <strong>články</strong> sa použije na všetky stránky v trase článkov vrátane tých v podpriečinku <strong>trendy</strong>. Ak pridáte aj komponent rozloženia do priečinka <strong>trendy</strong>, rozloženie v priečinku s článkami bude vnorené do neho.</p>
<h2 id="advantages-of-using-layouts"> Výhody použitia rozloženia </h2>
<p>Next.js vám umožňuje vytvárať komponenty rozloženia, ktoré môžete znova použiť v rôznych stránky. To vám umožní mať konzistentný vzhľad na vašich webových stránkach bez duplikovania kódu na viacerých stránkach. Rozloženia vám navyše pomôžu rýchlo implementovať zmeny, pretože nemusíte robiť zmeny na každej stránke.</p>