Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

A Next.js egy hatékony keretrendszer a nagy teljesítményű React alkalmazások létrehozásához. Egyik funkciója az, hogy egyéni elrendezéseket hozhat létre az oldalakhoz, így konzisztens kialakítást hozhat létre, amely könnyen karbantartható és frissíthető az alkalmazásban.

Egyéni elrendezési összetevő létrehozása a Következőben. JS

nevű mappában alkatrészek a Next.js projektben hozza létre Layout.jsx és adja hozzá a következő kódot az elrendezési összetevő létrehozásához.

import Fej tól től'következő/fej'
import Fejléc tól től'./Header.jsx'
import Lábléc tól től'./Footer.jsx'
const Elrendezés = (gyermekek) => (



Saját alkalmazás<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <fejl></fejl><br> {gyerekek}<br> <l></l><br> <<span>/div></span><br>)<br><span>exportálás</span> <span>alapértelmezett</span> elrendezés<br> < p>Ez az összetevő importálja a fejléc és lábléc összetevőket, és <span>elfogadja a gyermekeket mint kellékek</span><div>
<a href="https://greatfon.com">instagram viewer</a>
</div>. A <strong>gyermekeket</strong> a fejléc és a lábléc komponensek közé jeleníti meg. Ha egy oldalt ezzel az elrendezéssel burkol, a fejléc és a lábléc felül és alul jelenik meg.<h2 id="using-the-layout-component"> A Elrendezési összetevő </h2>
<p>Az elrendezés összetevő használatához importálja azt egy oldalösszetevőbe, és használja az alábbiak szerint.</p> <pre> <code><span>importálás</span> Elrendezés <span>tól</span> <span>'../components/Layout'</span><br><span>const</span> oldal = <span><span>()</span> =></span> (<br> <elrendez><br> <h1>Főoldal<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>exportálás</span> <span> alapértelmezett</span> oldal<br>
</h1></elrendez></code> </pre>
<p>Alkalmazza a az oldal elrendezését. Ezt a folyamatot megismételheti az összes olyan oldalon, amelyen alkalmazni szeretné az elrendezést.</p>
<p>Ha az elrendezést az alkalmazások összes oldalán egyszerre szeretné használni, importálja az elrendezés összetevőt a <strong>/page/_app.js</strong> fájlba, és használja az alábbiak szerint.</p> <pre> <code><span>importálás</span> Elrendezés <span>honnan span> <span>"../components/layout"</span>;<br><span><span>függvény</span> <span>SajátApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>vissza</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Az eddig bemutatott példák használja a Next.js 12 oldalas mappáit. A Next.js 13-ban az elrendezést az alkalmazás mappájában kell létrehozni (az írás pillanatában béta állapotban van).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Egyéni elrendezés létrehozása az alkalmazásmappában </h2>
<p>A Next.js 13-ban található <span>alkalmazásmappa </span> megköveteli, hogy hozzon létre egy gyökérelrendezést az alján. Ez az az elrendezés, amelyet a Next.js az alkalmazás összes oldalára alkalmazni fog.</p>
<p>A bemutatáshoz hozzon létre egy <strong>layout.jsx</strong> nevű fájlt, és adja hozzá a következő kódot.</p> p> <pre> <code><span>exportálás</span> <span>alapértelmezett</span> <span><span>függvény</span> <span>RootLayout</span>(<span>{ gyermek } span>) </span>{<br> <span>visszaküldés</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>A gyökérelrendezés összetevő elfogadja és megjeleníti a <strong>gyermekek</strong>. Az alábbiakban felsorolunk néhány dolgot, amit a gyökérelrendezésről tudnia kell:</p>
<ul> <li> Fel kell vennie az alkalmazás mappájába. </li> <li> A Next.js 12 oldalmappájában lecseréli az <strong>_app.js</strong> és <strong>_document.js</strong> fájlokat. </li> <li> A HTML- és a body taget kifejezetten fel kell venni. </li> <li> Alapértelmezés szerint egy kiszolgáló összetevő. </li> </ul>
<p>Mint már említettük, a gyökérelrendezés minden oldalra vonatkozik, így hogyan hozhat létre egyéni elrendezéseket különböző útvonalszakaszokat?</p>
<p>Az alkalmazás mappájában úgy határozhat meg egy útvonalat, hogy minden útvonalhoz hoz létre mappákat szegmens. Például egy <strong>cikkek</strong> nevű mappa létrehozása leképezi az <strong>alkalmazás/cikk</strong> URL-útvonalat. További útvonalszakaszok hozzáadásához hozzon létre egy almappát a fő útvonalmappában. Például egy <strong>trending</strong> nevű mappa hozzáadása a <strong>cikkek</strong> mappaleképezésekhez az URL-útvonalhoz <strong>app/articles/trending</strong>.</p>
<p>Amikor hozzáad egy <strong>layout.jsx</strong> összetevőt egy útvonalmappához, az az azon belüli összes oldalra érvényes lesz. útvonalszakasz és almappái. Például, ha egy elrendezési összetevőt ad hozzá a <strong>cikkek</strong> mappához, az a cikkek útvonalának összes oldalára vonatkozik, beleértve a <strong>felkapott</strong> almappában lévőket is. Ha a <strong>felkapott</strong> mappába egy elrendezési összetevőt is hozzáad, a cikkek mappában lévő elrendezés beágyazódik abba.</p>
<h2 id="advantages-of-using-layouts"> Az elrendezések használatának előnyei </h2>
<p>A Next.js lehetővé teszi olyan elrendezési komponensek létrehozását, amelyeket többféleképpen is felhasználhat oldalakat. Ez lehetővé teszi, hogy egységesen áttekintse webhelyét anélkül, hogy több oldalon megkettőzné a kódot. Ezenkívül az elrendezések segítenek a változtatások gyors végrehajtásában, mivel nem kell minden oldalt módosítania.</p>