Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Next.js je výkonný rámec pro vytváření vysoce výkonných aplikací React. Jednou z jeho funkcí je možnost vytvářet vlastní rozvržení pro vaše stránky, což vám umožní vytvořit konzistentní design, který se snadno udržuje a aktualizuje ve vaší aplikaci.

Vytvoření vlastní komponenty rozvržení v Next. JS

Ve složce s názvem komponenty ve svém projektu Next.js vytvořte Layout.jsx a přidejte následující kód pro vytvoření komponenty rozvržení.

import Hlava z'další/hlava'
import Záhlaví z'./Header.jsx'
import Zápatí z'./Footer.jsx'
konst Rozložení = (děti) => (



Moje aplikace<<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>exportovat</span> <span>výchozí</span> rozvržení<br> < p>Tato komponenta importuje komponenty Header a Footer a <span>přijímá děti jako rekvizity</span>. Vykreslí <strong>děti</strong> mezi komponenty Záhlaví a Zápatí. Když zalomíte stránku s tímto rozvržením, záhlaví a zápatí se zobrazí nahoře a dole.<div>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> Použití Komponenta rozvržení </h2>
<p>Chcete-li použít komponentu rozvržení, importujte ji do komponenty stránky a použijte ji, jak je uvedeno níže.</p> <pre> <code><span>import</span> Rozložení <span>z</span> <span>'../components/Layout'</span><br><span>const</span> Stránka = <span><span>()</span> =></span> (<br> <rozvr><br> <h1>Domovská stránka<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>export</span> <span> default</span> Page<br>
</h1></rozvr></code> </pre>
<p>Použije se rozložení na tuto stránku. Tento proces můžete zopakovat na všechny stránky, na které chcete použít rozložení.</p>
<p>Chcete-li použít rozložení na všech stránkách v aplikacích najednou, importujte komponentu rozvržení do souboru <strong>/page/_app.js</strong> a použijte jej následovně.</p> <pre> <code><span>importovat</span> Rozvržení <span>z rozpětí> <span>"../components/layout"</span>;<br><span><span>funkce</span> <span>MojeAplikace</span>(<span>{ Komponenta, pageProps } span>) </span>{ <br> <span>return</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Dosud zobrazené příklady použijte složky Next.js 12 stránek. V Next.js 13 vytvoříte rozvržení ve složce aplikace (v době psaní je ve verzi beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Vytvoření vlastního rozvržení ve složce aplikace </h2>
<p>Složka <span>app v Next.js 13 </span> vyžaduje, abyste ve své základně vytvořili kořenové rozvržení. Toto je rozvržení, které Next.js použije na všechny stránky vaší aplikace.</p>
<p>Chcete-li to demonstrovat, vytvořte soubor s názvem <strong>layout.jsx</strong> a přidejte následující kód.</p>
<p>Chcete-li to demonstrovat, vytvořte soubor s názvem <strong>layout.jsx</strong>. p> </p>
<pre> <code><span>exportovat</span> <span>výchozí</span> <span><span>funkce</span> <span>RootLayout</span>(<span>{ děti } 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>Kořenová komponenta rozvržení přijímá a vykresluje <strong>děti</strong>. Níže jsou uvedeny některé z věcí, které byste měli vědět o rozvržení kořenového adresáře:</p>
<ul> <li> Musíte jej zahrnout do složky aplikace. </li> <li> Nahrazuje <strong>_app.js</strong> a <strong>_document.js</strong> ve složce stránek Next.js 12. </li> <li> Musíte explicitně zahrnout značku HTML a body. </li> <li> Ve výchozím nastavení je součástí serveru. </li> </ul>
<p>Jak bylo uvedeno, kořenové rozvržení se vztahuje na všechny stránky, jak tedy vytvořit vlastní rozvržení pro různé segmenty trasy?</p>
<p>Ve složce aplikace můžete definovat trasu vytvořením složek pro každou trasu segment. Například vytvoření složky s názvem <strong>articles</strong> mapuje na cestu URL <strong>app/articles</strong>. Chcete-li přidat další segmenty trasy, vytvořte podsložku v hlavní složce trasy. Například přidání složky s názvem <strong>trendy</strong> do složky <strong>articles</strong> mapuje cestu URL <strong>app/articles/trending</strong>.</p>
<p>Když do složky trasy přidáte komponentu <strong>layout.jsx</strong>, bude platit pro všechny stránky v této složce segment trasy a jeho podsložky. Například přidání komponenty rozvržení do složky <strong>articles</strong> bude platit pro všechny stránky v trase článků, včetně stránek v podsložce <strong>trending</strong>. Pokud do složky <strong>trending</strong> přidáte také komponentu rozvržení, rozvržení ve složce s články bude vnořeno do ní.</p>
<h2 id="advantages-of-using-layouts"> Výhody použití rozvržení </h2>
<p>Next.js vám umožňuje vytvářet komponenty rozvržení, které můžete znovu použít v různých stránky. To vám umožní mít konzistentní vzhled celého webu bez duplikace kódu na více stránkách. Rozvržení vám navíc pomohou rychle implementovat změny, protože nemusíte provádět změny na každé stránce.</p>