Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Next.js är ett kraftfullt ramverk för att bygga högpresterande React-applikationer. En av dess funktioner är möjligheten att skapa anpassade layouter för dina sidor så att du kan skapa en konsekvent design som är lätt att underhålla och uppdatera i hela din applikation.

Skapa en anpassad layoutkomponent i nästa. JS

I mappen som heter komponenter i ditt Next.js-projekt, skapa Layout.jsx och lägg till följande kod för att skapa layoutkomponenten.

importera Huvud från'nästa/huvud'
importera Rubrik från'./Header.jsx'
importera Sidfot från'./Footer.jsx'
konst Layout = (barn) => (



Min app<<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> <sidfot></sidfot><br> <<span>/div></span><br>)<br><span>exportera</span> <span>standard</span> layout<br> < p>Denna komponent importerar sidhuvuds- och sidfotskomponenterna och <span>accepterar underordnade som rekvisita</span>. Det återger <strong>barnen</strong> mellan sidhuvud- och sidfotskomponenterna. När du avslutar en sida med den här layouten, kommer sidhuvudet och sidfoten att visas överst och längst ned.<div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- deniza1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3781984532523932" data-ad-slot="1606568164" 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"> Använda Layoutkomponent </h2>
<p>För att använda layoutkomponenten, importera den till en sidkomponent och använd den som visas nedan.</p> <pre> <code><span>importera</span> Layout <span>från</span> <span>'../components/Layout'</span><br><span>const</span> Sida = <span><span>()</span> =></span> (<br> <layout><br> <h1>Hem<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>export</span> <span> standard</span> sida<br>
</h1></layout></code> </pre>
<p>Den kommer att tillämpa layout till denna sida. Du kan upprepa denna process på alla sidor som du vill använda layouten.</p>
<p>Om du vill använda layouten på alla sidor i applikationerna samtidigt, importera layoutkomponenten till <strong>/page/_app.js</strong>-filen och använd den enligt följande.</p> <pre> <code><span>importera</span> Layout <span>från span> <span>"../components/layout"</span>;<br><span><span>funktion</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>retur</span> ( <br> <layout> <br> <komponent></komponent> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Exemplen som visats hittills använd mapparna Next.js 12 sidor. I Next.js 13 skapar du layouten i app-mappen (när du skriver är den i betaversion).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Skapa en anpassad layout i appmappen </h2>
<p><span>appmappen i Next.js 13 </span>kräver att du skapar en rotlayout i basen. Det här är layouten som Next.js kommer att tillämpa på alla sidor i din applikation.</p>
<p>För att demonstrera, skapa en fil med namnet <strong>layout.jsx</strong> och lägg till följande kod. p> </p>
<pre> <code><span>export</span> <span>standard</span> <span><span>funktion</span> <span>RootLayout</span>(<span>{ barn } span>) </span>{<br> <span>retur</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Rotlayoutkomponenten accepterar och renderar <strong>barn</strong>. Nedan är några av de saker du bör veta om en rotlayout:</p>
<ul> <li> Du måste inkludera den i appmappen. </li> <li> Den ersätter <strong>_app.js</strong> och <strong>_document.js</strong> i sidmappen i Next.js 12. </li> <li> Du måste uttryckligen inkludera HTML- och body-taggen. </li> <li> Det är en serverkomponent som standard. </li> </ul>
<p>Som nämnts gäller rotlayouten för alla sidor, så hur skapar du anpassade layouter för olika ruttsegment?</p>
<p>I din app-mapp kan du definiera en rutt genom att skapa mappar för varje rutt segmentet. Till exempel, skapa en mapp som heter <strong>artiklar</strong> mappar till URL-sökvägen <strong>app/artiklar</strong>. För att lägga till ytterligare ruttsegment, skapa en undermapp i huvudruttmappen. Att till exempel lägga till en mapp som heter <strong>trend</strong> i mappen <strong>artiklar</strong> mappas till URL-sökvägen <strong>app/artiklar/trending</strong>.</p>
<p>När du lägger till en <strong>layout.jsx</strong>-komponent i en ruttmapp kommer den att gälla för alla sidor inom den ruttsegment och dess undermappar. Om du till exempel lägger till en layoutkomponent i mappen <strong>artiklar</strong> kommer det att gälla alla sidor i artikelrutten, inklusive de i undermappen <strong>trending</strong>. Om du även lägger till en layoutkomponent i mappen <strong>trending</strong> kommer layouten i artikelmappen att kapslas in i den.</p>
<h2 id="advantages-of-using-layouts"> Fördelar med att använda layouter </h2>
<p>Next.js låter dig skapa layoutkomponenter som du kan återanvända på olika sidor. Detta gör att du kan ha ett konsekvent utseende på din webbplats utan att duplicera kod över flera sidor. Dessutom hjälper layouter dig att implementera ändringar snabbt eftersom du inte behöver göra ändringar på varje sida.</p>