I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Next.js è un potente framework per la creazione di applicazioni React ad alte prestazioni. Una delle sue funzionalità è la possibilità di creare layout personalizzati per le tue pagine, consentendoti di creare un design coerente facile da mantenere e aggiornare in tutta la tua applicazione.

Creazione di un componente di layout personalizzato in Next. JS

Nella cartella denominata componenti nel tuo progetto Next.js, crea Layout.jsx e aggiungi il codice seguente per creare il componente di layout.

importare Testa da'successivo/testa'
importare Intestazione da'./Intestazione.jsx'
importare Piè di pagina da'./Piè di pagina.jsx'
cost Disposizione = (bambini) => (



La mia 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>esporta</span> <span>predefinito</span> Layout<br> < p>Questo componente importa i componenti Intestazione e Piè di pagina e <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>
<span>accetta elementi secondari come oggetti di scena</span>. Rende i <strong>figli</strong> tra i componenti Intestazione e Piè di pagina. Quando avvolgi una pagina con questo layout, l'intestazione e il piè di pagina verranno visualizzati in alto e in basso.<h2 id="using-the-layout-component"> Utilizzo del Componente layout </h2>
<p>Per utilizzare il componente layout, importalo in un componente pagina e utilizzalo come mostrato di seguito.</p> <pre> <code><span>import</span> Layout <span>da</span> <span>'../components/Layout'</span><br><span>const</span> Pagina = <span><span>()</span> =></span> (<br> <layout><br> <h1>Home<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>esportazione</span> <span> default</span> Pagina<br>
</h1></layout></code> </pre>
<p>Applicherà il layout di questa pagina. Puoi ripetere questo processo a tutte le pagine a cui desideri applicare il layout.</p>
<p>Per utilizzare il layout su tutte le pagine delle applicazioni contemporaneamente, importa il componente layout nel file <strong>/page/_app.js</strong> e utilizzalo come segue.</p> <pre> <code><span>import</span> Layout <span>from span> <span>"../components/layout"</span>;<br><span><span>funzione</span> <span>MyApp</span>(<span>{ Component, pageProps }</span> span>) </span>{ <br> <span>ritorno</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></code> </pre>
<p>Gli esempi mostrati finora utilizzare le cartelle di 12 pagine Next.js. In Next.js 13, crei il layout nella cartella dell'app (al momento della scrittura, è in versione beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Creazione di un layout personalizzato nella cartella dell'app </h2>
<p>La <span>cartella dell'app in Next.js 13 </span> richiede la creazione di un layout principale alla sua base. Questo è il layout che Next.js applicherà a tutte le pagine della tua applicazione.</p>
<p>Per dimostrarlo, crea un file denominato <strong>layout.jsx</strong> e aggiungi il seguente codice. p> </p>
<pre> <code><span>export</span> <span>default</span> <span><span>function</span> <span>RootLayout</span>(<span>{ children } span>) </span>{<br> <span>return</span> (<br> "it"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Il componente di layout radice accetta e visualizza il <strong>bambini</strong>. Di seguito sono riportate alcune delle cose che dovresti sapere su un layout root:</p>
<ul> <li> Devi includerlo nella cartella dell'app. </li> <li> Sostituisce <strong>_app.js</strong> e <strong>_document.js</strong> nella cartella della pagina di Next.js 12. </li> <li> Devi includere esplicitamente l'HTML e il tag body. </li> <li> È un componente server per impostazione predefinita. </li> </ul>
<p>Come accennato, il layout principale si applica a tutte le pagine, quindi come si creano layout personalizzati per diversi segmenti di percorso?</p>
<p>Nella cartella dell'app, puoi definire un percorso creando cartelle per ogni percorso segmento. Ad esempio, la creazione di una cartella chiamata <strong>articoli</strong> viene associata al percorso dell'URL <strong>app/articoli</strong>. Per aggiungere ulteriori segmenti di percorso, creare una sottocartella all'interno della cartella principale del percorso. Ad esempio, l'aggiunta di una cartella chiamata <strong>trend</strong> all'interno della cartella <strong>articoli</strong> viene mappata al percorso dell'URL <strong>app/articles/trending</strong>.</p>
<p>Quando aggiungi un componente <strong>layout.jsx</strong> a una cartella di percorso, verrà applicato a tutte le pagine all'interno di quella segmento di rotta e relative sottocartelle. Ad esempio, l'aggiunta di un componente di layout alla cartella <strong>articoli</strong> verrà applicata a tutte le pagine nel percorso degli articoli, comprese quelle nella sottocartella <strong>trend</strong>. Se aggiungi anche un componente di layout nella cartella <strong>trend</strong>, il layout nella cartella degli articoli verrà nidificato al suo interno.</p>
<h2 id="advantages-of-using-layouts"> Vantaggi dell'utilizzo dei layout </h2>
<p>Next.js ti consente di creare componenti di layout che puoi riutilizzare in diversi pagine. Ciò ti consente di avere un aspetto coerente in tutto il tuo sito Web senza duplicare il codice su più pagine. Inoltre, i layout ti aiutano a implementare rapidamente le modifiche perché non è necessario apportare modifiche a ogni pagina.</p>