Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Next.js on tehokas kehys tehokkaiden React-sovellusten rakentamiseen. Yksi sen ominaisuuksista on kyky luoda sivuillesi mukautettuja asetteluja, joiden avulla voit luoda yhtenäisen ulkoasun, jota on helppo ylläpitää ja päivittää koko sovelluksessasi.

Mukautetun asettelukomponentin luominen seuraavassa. JS

Kansiossa nimeltä komponentit luo Next.js-projektissasi Layout.jsx ja lisää seuraava koodi luodaksesi asettelukomponentin.

tuonti Pää alkaen"seuraava/pää"
tuonti Otsikko alkaen'./Header.jsx'
tuonti Alatunniste alkaen'./Footer.jsx'
konst Asettelu = (lapset) => (



Oma sovellus<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <otsikko></otsikko><br> {lapset}<br> <alatunniste></alatunniste><br> <<span>/div></span><br>)<br><span>vienti</span> <span>oletus</span> Asettelu<br> < p>Tämä komponentti tuo ylä- ja alatunnistekomponentit ja <span>hyväksyy alat rekvisiitta</span>. Se hahmontaa <strong>lapset</strong> ylä- ja alatunnistekomponenttien väliin. Kun käärit sivun tällä asettelulla, ylä- ja alareunassa näytetään ylä- ja alatunniste.<div>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> Asettelukomponentti </h2>
<p>Jos haluat käyttää asettelukomponenttia, tuo se sivukomponenttiin ja käytä sitä alla kuvatulla tavalla.</p> <pre> <code><span>tuo</span> Asettelu <span>alkaen</span> <span>'../components/Layout'</span><br><span>const</span> Sivu = <span><span>()</span> =></span> (<br> <asettelu><br> <h1>Etusivu<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>vienti</span> <span> oletus</span>-sivu<br>
</h1></asettelu></code> </pre>
<p>Se käyttää asettelu tälle sivulle. Voit toistaa tämän prosessin kaikille sivuille, joille haluat käyttää asettelua.</p>
<p>Jos haluat käyttää asettelua kaikilla sovellusten sivuilla kerralla, tuo asettelukomponentti <strong>/page/_app.js</strong>-tiedostoon ja käytä sitä seuraavasti.</p> <pre> <code><span>tuo</span> Asettelu <span>alkaen span> <span>"../components/layout"</span>;<br><span><span>toiminto</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>palautus</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Tähän mennessä näytetyt esimerkit käytä Next.js 12-sivuisia kansioita. Next.js 13:ssa luot asettelun sovelluskansioon (kirjoitettaessa se on beta-vaiheessa).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Mukautetun asettelun luominen sovelluskansioon </h2>
<p>Next.js 13:n <span>sovelluskansio </span> edellyttää, että luot juuriasettelun sen pohjaan. Tämä on asettelu, jota Next.js käyttää kaikilla sovelluksesi sivuilla.</p>
<p>Esittelyä varten luo tiedosto nimeltä <strong>layout.jsx</strong> ja lisää seuraava koodi.</p> p> <pre> <code><span>vienti</span> <span>oletus</span> <span><span>toiminto</span> <span>RootLayout</span>(<span>{ lapsia } span>) </span>{<br> <span>palautus</span> (<br> "fi"</span>><br> {lapset}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Juuriasettelukomponentti hyväksyy ja tekee <strong>lapset</strong>. Alla on joitain asioita, jotka sinun tulee tietää juuriasettelusta:</p>
<ul> <li> Sinun on sisällytettävä se sovelluskansioon. </li> <li> Se korvaa kohdat <strong>_app.js</strong> ja <strong>_document.js</strong> Next.js 12:n sivukansiossa. </li> <li> Sinun on sisällytettävä erikseen HTML- ja body-tunniste. </li> <li> Se on oletuksena palvelinkomponentti. </li> </ul>
<p>Kuten mainittiin, juuriasettelu koskee kaikkia sivuja, joten miten luot mukautettuja asetteluja eri reittiosuuksia?</p>
<p>Voit määrittää reitin sovelluskansiossasi luomalla kansiot kullekin reitille segmentti. Esimerkiksi <strong>artikkelit</strong>-nimisen kansion luominen yhdistää URL-polkuun <strong>sovellus/artikkelit</strong>. Jos haluat lisätä muita reittiosuuksia, luo alikansio pääreittikansioon. Esimerkiksi <strong>trending</strong>-nimisen kansion lisääminen <strong>artikkelit</strong>-kansiokarttojen sisään URL-polkuun <strong>app/articles/trending</strong>.</p>
<p>Kun lisäät <strong>layout.jsx</strong>-komponentin reittikansioon, se koskee kaikkia sen sivuja reittisegmentti ja sen alikansiot. Esimerkiksi asettelukomponentin lisääminen <strong>artikkelit</strong>-kansioon koskee kaikkia artikkelireitin sivuja, mukaan lukien <strong>trendaavat</strong>-alikansion sivut. Jos lisäät myös asettelukomponentin <strong>trendingissä</strong>-kansioon, artikkelikansion asettelu sisällytetään siihen.</p>
<h2 id="advantages-of-using-layouts"> Asettelujen käytön edut </h2>
<p>Next.js: n avulla voit luoda asettelukomponentteja, joita voit käyttää uudelleen erilaisissa sivuja. Näin voit tarkastella verkkosivustoasi johdonmukaisesti ilman koodin kopioimista useille sivuille. Lisäksi asettelut auttavat sinua toteuttamaan muutokset nopeasti, koska sinun ei tarvitse tehdä muutoksia jokaiselle sivulle.</p>