Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Next.js er en kraftfuld ramme til at bygge højtydende React-applikationer. En af dens funktioner er muligheden for at skabe brugerdefinerede layouts til dine sider, så du kan skabe et ensartet design, der er nemt at vedligeholde og opdatere på tværs af din applikation.

Oprettelse af en brugerdefineret layoutkomponent i Next. JS

I mappen navngivet komponenter i dit Next.js-projekt skal du oprette Layout.jsx og tilføj følgende kode for at oprette layoutkomponenten.

importere Hoved fra'næste/hoved'
importere Header fra'./Header.jsx'
importere Sidefod fra'./Footer.jsx'
konst Layout = (børn) => (



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> <footer></footer><br> <<span>/div></span><br>)<br><span>eksport</span> <span>standard</span> layout<br> < p>Denne komponent importerer sidehoved- og sidefodskomponenterne og <span>accepterer underordnede som rekvisitter</span>. Det gengiver <strong>underordnede</strong> mellem sidehoved- og sidefodskomponenterne. Når du ombryder en side med dette layout, vil sidehoved og sidefod blive vist øverst og nederst.<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"> Brug af Layoutkomponent </h2>
<p>For at bruge layoutkomponenten skal du importere den til en sidekomponent og bruge den som vist nedenfor.</p> <pre> <code><span>import</span> Layout <span>fra</span> <span>'../components/Layout'</span><br><span>const</span> Side = <span><span>()</span> =></span> (<br> <layout><br> <h1>Hjem<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>eksport</span> <span> standard</span> side<br>
</h1></layout></code> </pre>
<p>Den vil anvende layout til denne side. Du kan gentage denne proces på alle de sider, du vil anvende layoutet.</p>
<p>Hvis du vil bruge layoutet på tværs af alle siderne i applikationerne på én gang, skal du importere layoutkomponenten ind i filen <strong>/page/_app.js</strong> og brug den som følger.</p> <pre> <code><span>importer</span> Layout <span>fra</span> 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></code> </pre>
<p>Eksemplerne vist indtil videre brug mapperne Next.js 12 sider. I Next.js 13 opretter du layoutet i app-mappen (i skrivende stund er den i beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Oprettelse af et brugerdefineret layout i appmappen </h2>
<p><span>appmappen i Next.js 13 </span>kræver, at du opretter et rodlayout i bunden. Dette er det layout, som Next.js vil anvende på alle siderne i din applikation.</p>
<p>For at demonstrere skal du oprette en fil med navnet <strong>layout.jsx</strong> og tilføje følgende kode. p> </p>
<pre> <code><span>eksport</span> <span>standard</span> <span><span>funktion</span> <span>RootLayout</span>(<span>{ børn } span>) </span>{<br> <span>retur</span> (<br> "da"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Rodlayoutkomponenten accepterer og gengiver <strong>børn</strong>. Nedenfor er nogle af de ting, du bør vide om et root-layout:</p>
<ul> <li> Du skal inkludere det i app-mappen. </li> <li> Det erstatter <strong>_app.js</strong> og <strong>_document.js</strong> i sidemappen i Next.js 12. </li> <li> Du skal eksplicit inkludere HTML- og body-tagget. </li> <li> Det er en serverkomponent som standard. </li> </ul>
<p>Som nævnt gælder rodlayoutet for alle sider, så hvordan opretter du tilpassede layouts til forskellige rutesegmenter?</p>
<p>I din app-mappe kan du definere en rute ved at oprette mapper for hver rute segment. For eksempel, oprettelse af en mappe kaldet <strong>artikler</strong> er knyttet til URL-stien <strong>app/artikler</strong>. For at tilføje yderligere rutesegmenter skal du oprette en undermappe i hovedrutemappen. Tilføjelse af en mappe kaldet <strong>trend</strong> inde i mappen <strong>artikler</strong> tilknyttes f.eks. URL-stien <strong>app/articles/trending</strong>.</p>
<p>Når du føjer en <strong>layout.jsx</strong>-komponent til en rutemappe, gælder den for alle sider inden for den pågældende rutesegment og dets undermapper. For eksempel vil tilføjelse af en layoutkomponent til mappen <strong>artikler</strong> gælde for alle sider i artikelruten, inklusive dem i undermappen <strong>trending</strong>. Hvis du også tilføjer en layoutkomponent i mappen <strong>trend</strong>, vil layoutet i artiklermappen blive indlejret i den.</p>
<h2 id="advantages-of-using-layouts"> Fordele ved at bruge layouts </h2>
<p>Next.js giver dig mulighed for at oprette layoutkomponenter, som du kan genbruge på tværs af forskellige sider. Dette giver dig mulighed for at få et ensartet udseende på tværs af dit websted uden at duplikere kode på tværs af flere sider. Derudover hjælper layouts dig med at implementere ændringer hurtigt, fordi du ikke behøver at foretage ændringer på hver side.</p>