Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Next.js is een krachtig raamwerk voor het bouwen van goed presterende React-applicaties. Een van de functies is de mogelijkheid om aangepaste lay-outs voor uw pagina's te maken, zodat u een consistent ontwerp kunt maken dat gemakkelijk te onderhouden en bij te werken is in uw hele applicatie.

Een aangepaste lay-outcomponent maken in Next. JS

In de map met de naam componenten in uw Next.js-project, create Lay-out.jsx en voeg de volgende code toe om de lay-outcomponent te maken.

importeren Hoofd van'volgende/hoofd'
importeren Koptekst van'./Header.jsx'
importeren Voettekst van'./Voettekst.jsx'
const Indeling = (kinderen) => (



Mijn 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>exporteren</span> <span>standaard</span> Lay-out<br> < p>Deze component importeert de kop- en voettekstcomponenten en <span>accepteert kinderen als rekwisieten</span>. Het geeft de <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>
<strong>kinderen</strong> weer tussen de kop- en voettekstcomponenten. Wanneer u een pagina omwikkelt met deze lay-out, worden de koptekst en voettekst boven en onder weergegeven.<h2 id="using-the-layout-component"> Lay-outcomponent </h2>
<p>Om de lay-outcomponent te gebruiken, importeert u deze in een paginacomponent en gebruikt u deze zoals hieronder weergegeven.</p> <pre> <code><span>importeren</span> Lay-out <span>van</span> <span>'../components/Layout'</span><br><span>const</span> Page = <span><span>()</span> =></span> (<br> <lay-out><br> <h1>Startpagina<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>exporteren</span> <span> standaard</span> pagina<br>
</h1></lay-out></code> </pre>
<p>Het zal de lay-out van deze pagina. U kunt dit proces herhalen op alle pagina's waarop u de lay-out wilt toepassen.</p>
<p>Als u de lay-out voor alle pagina's in de toepassingen tegelijk wilt gebruiken, importeert u de lay-outcomponent in het bestand <strong>/page/_app.js</strong> en gebruik het als volgt.</p> <pre> <code><span>import</span> lay-out <span>uit span> <span>"../components/layout"</span>;<br><span><span>function</span> <span>MyApp</span>(<span>{ Component, pageProps } span>) </span>{ <br> <span>return</span> (<br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>De tot nu toe getoonde voorbeelden gebruik de mappen Next.js 12 pagina's. In Next.js 13 maakt u de lay-out in de app-map (op het moment van schrijven is deze in bèta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Een aangepaste lay-out maken in de app-map </h2>
<p>De <span>app-map in Next.js 13 </span>vereist dat u een hoofdlay-out aan de basis maakt. Dit is de lay-out die Next.js zal toepassen op alle pagina's van uw applicatie.</p>
<p>Om te demonstreren, maakt u een bestand met de naam <strong>layout.jsx</strong> en voegt u de volgende code toe. p> </p>
<pre> <code><span>exporteren</span> <span>standaard</span> <span><span>functie</span> <span>RootLayout</span>(<span>{ kinderen } span>) </span>{<br> <span>retour</span> (<br> "nl"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>De root-layoutcomponent accepteert en geeft de <strong>kinderen</strong>. Hieronder vindt u enkele dingen die u moet weten over een rootlay-out:</p>
<ul> <li> U moet deze opnemen in de app-map. </li> <li> Het vervangt <strong>_app.js</strong> en <strong>_document.js</strong> in de paginamap van Next.js 12. </li> <li> U moet expliciet de HTML- en body-tag opnemen. </li> <li> Het is standaard een servercomponent. </li> </ul>
<p>Zoals gezegd is de hoofdlay-out van toepassing op alle pagina's, dus hoe maak je aangepaste lay-outs voor verschillende routesegmenten?</p>
<p>In je app-map kun je een route definiëren door voor elke route mappen te maken segment. Als u bijvoorbeeld een map met de naam <strong>articles</strong> maakt, wordt deze toegewezen aan het URL-pad <strong>app/articles</strong>. Om meer routesegmenten toe te voegen, maakt u een submap binnen de hoofdroutemap. Als u bijvoorbeeld een map met de naam <strong>trending</strong> toevoegt in de map <strong>articles</strong>, wordt deze toegewezen aan het URL-pad <strong>app/articles/trending</strong>.</p>
<p>Wanneer u een component <strong>layout.jsx</strong> toevoegt aan een routemap, is deze van toepassing op alle pagina's in die map routesegment en zijn submappen. Het toevoegen van een lay-outcomponent aan de map <strong>articles</strong> is bijvoorbeeld van toepassing op alle pagina's in de artikelenroute, inclusief die in de submap <strong>trending</strong>. Als u ook een lay-outcomponent toevoegt aan de map <strong>trending</strong>, wordt de lay-out in de map artikelen daarin genest.</p>
<h2 id="advantages-of-using-layouts"> Voordelen van het gebruik van lay-outs </h2>
<p>Met Next.js kunt u lay-outcomponenten maken die u op verschillende Pagina's. Hierdoor kunt u uw website consistent bekijken zonder code over meerdere pagina's te dupliceren. Bovendien helpen lay-outs u om wijzigingen snel door te voeren, omdat u niet op elke pagina wijzigingen hoeft aan te brengen.</p>