Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.
Next.js er et kraftig rammeverk for å bygge høyytende React-applikasjoner. En av funksjonene er muligheten til å lage tilpassede oppsett for sidene dine, slik at du kan lage et konsistent design som er enkelt å vedlikeholde og oppdatere på tvers av applikasjonen.
Opprette en egendefinert layoutkomponent i Next. JS
I mappen som heter komponenter i Next.js-prosjektet, opprette Layout.jsx og legg til følgende kode for å lage layoutkomponenten.
import Hode fra'neste/hode'
import Overskrift fra'./Header.jsx'
import Bunntekst fra'./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> <footer></footer><br> <<span>/div></span><br>)<br><span>eksport</span> <span>standard</span> layout<br> < p>Denne komponenten importerer topptekst- og bunntekstkomponentene og <span>godtar underordnede som rekvisitter</span>. Den gjengir <strong>barnene</strong> mellom topptekst- og bunntekstkomponentene. Når du bryter en side med denne layouten, vil topptekst og bunntekst vises øverst og nederst.<div>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> Ved å bruke Layout-komponent </h2>
<p>For å bruke layout-komponenten, importer den til en sidekomponent og bruk 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 bruke layout til denne siden. Du kan gjenta denne prosessen på alle sidene du vil bruke layouten.</p>
<p>For å bruke layouten på tvers av alle sidene i applikasjonene samtidig, importerer du layoutkomponenten til <strong>/page/_app.js</strong>-filen og bruk den som følger.</p> <pre> <code><span>importer</span> Layout <span>fra</span> span> <span>"../components/layout"</span>;<br><span><span>funksjon</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>Eksemplene som er vist så langt bruk mappene Next.js 12 sider. I Next.js 13 lager du oppsettet i app-mappen (i skrivende stund er den i beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Opprette et tilpasset oppsett i appmappen </h2>
<p><span>appmappen i Next.js 13 </span>krever at du oppretter et rotoppsett i basen. Dette er oppsettet som Next.js vil bruke på alle sidene i applikasjonen din.</p>
<p>For å demonstrere, lag en fil med navnet <strong>layout.jsx</strong> og legg til følgende kode. p> </p>
<pre> <code><span>eksport</span> <span>standard</span> <span><span>funksjon</span> <span>RootLayout</span>(<span>{ barn } span>) </span>{<br> <span>retur</span> (<br> "no"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Rotlayoutkomponenten godtar og gjengir <strong>barn</strong>. Nedenfor er noen av tingene du bør vite om et rotoppsett:</p>
<ul> <li> Du må inkludere det i app-mappen. </li> <li> Den erstatter <strong>_app.js</strong> og <strong>_document.js</strong> i sidemappen til Next.js 12. </li> <li> Du må eksplisitt inkludere HTML- og body-taggen. </li> <li> Det er en serverkomponent som standard. </li> </ul>
<p>Som nevnt gjelder rotoppsettet for alle sider, så hvordan lager du tilpassede oppsett for forskjellige rutesegmenter?</p>
<p>I appmappen din kan du definere en rute ved å opprette mapper for hver rute segmentet. Hvis du for eksempel oppretter en mappe kalt <strong>artikler</strong>, tilordnes URL-banen <strong>appen/artikler</strong>. For å legge til flere rutesegmenter, opprette en undermappe i hovedrutemappen. Hvis du for eksempel legger til en mappe kalt <strong>trending</strong> i mappen <strong>artiklene</strong>, tilordnes URL-banen <strong>app/articles/trending</strong>.</p>
<p>Når du legger til en <strong>layout.jsx</strong>-komponent i en rutemappe, vil den gjelde for alle sidene innenfor den rutesegmentet og dets undermapper. Hvis du for eksempel legger til en layoutkomponent i mappen <strong>artikler</strong>, vil det gjelde alle sidene i artikkelruten, inkludert de i undermappen <strong>trending</strong>. Hvis du også legger til en layoutkomponent i <strong>trending</strong>-mappen, vil layouten i artikkelmappen bli nestet i den.</p>
<h2 id="advantages-of-using-layouts"> Fordeler ved å bruke layouter </h2>
<p>Next.js lar deg lage layoutkomponenter som du kan gjenbruke på tvers av forskjellige sider. Dette lar deg ha et konsistent utseende på nettstedet ditt uten å duplisere kode på flere sider. I tillegg hjelper layouter deg med å implementere endringer raskt fordi du ikke trenger å gjøre endringer på hver side.</p>