Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Next.js, yüksek performanslı React uygulamaları oluşturmak için güçlü bir çerçevedir. Özelliklerinden biri, uygulamanız genelinde bakımı ve güncellenmesi kolay tutarlı bir tasarım oluşturmanıza olanak tanıyan sayfalarınız için özel düzenler oluşturma yeteneğidir.

İleri'de Özel Düzen Bileşeni Oluşturma. JS

adlı klasörde bileşenler Next.js projenizde oluşturun Düzen.jsx ve düzen bileşenini oluşturmak için aşağıdaki kodu ekleyin.

içe aktarmak KAFA itibaren"sonraki / kafa"
içe aktarmak Başlık itibaren'./Başlık.jsx'
içe aktarmak Altbilgi itibaren'./Altbilgi.jsx'
sabit Düzen = (çocuklar) => (



Uygulamam<<span>/title></span><br> <link rel="<span">"stil sayfası" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <ba></ba><br> {children}<br> <altbilgi></altbilgi><br> <<span>/div></span><br>)<br><span>dışa aktarma</span> <span>varsayılan</span> Düzen<br> < p>Bu bileşen, Üstbilgi ve Altbilgi bileşenlerini içe aktarır ve <span>alt öğeleri şu şekilde kabul eder: aksesuarlar</span><div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- deniza1 -->
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3781984532523932" data-ad-slot="1606568164" 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>. Üstbilgi ve Altbilgi bileşenleri arasında <strong>alt öğeleri</strong> oluşturur. Bu Düzen ile bir sayfayı kaydırdığınızda, Üst Bilgi ve Alt Bilgi üstte ve altta görüntülenecektir.<h2 id="using-the-layout-component"> Düzen Bileşeni </h2>
<p>Düzen bileşenini kullanmak için, onu bir sayfa bileşenine aktarın ve aşağıda gösterildiği gibi kullanın.</p> <pre> <code><span>içe aktar</span> Düzen <span>dan</span> <span>'../components/Layout'</span><br><span>const</span> Sayfa = <span><span>()</span> =></span> (<br> <d><br> <h1>Ana Sayfa<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>dışa aktarma</span> <span> varsayılan</span> Sayfa<br>
</h1></d></code> </pre>
<p>Uygulayacaktır düzeni bu sayfaya Düzeni uygulamak istediğiniz tüm sayfalarda bu işlemi tekrarlayabilirsiniz.</p>
<p>Düzeni uygulamalardaki tüm sayfalarda aynı anda kullanmak için içe aktarın düzen bileşenini <strong>/page/_app.js</strong> dosyasına yerleştirin ve aşağıdaki gibi kullanın.</p> <pre> <code><span>mizanpajı</span> <span>dan</span> yayılma> <span>"../components/layout"</span>;<br><span><span>işlev</span> <span>Uygulamam</span>(<span>{ Bileşen, pageProps }</span> açıklık>) </span>{ <br> <span>dönüş</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></code> </pre>
<p>Şimdiye kadar gösterilen örnekler Next.js 12 sayfa klasörlerini kullanın. Next.js 13'te, düzeni uygulama klasöründe oluşturursunuz (yazılırken beta sürümündedir).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Uygulama Klasöründe Özel Düzen Oluşturma </h2>
<p>Next.js 13'teki <span>app klasörü </span>, temelinde bir kök düzen oluşturmanızı gerektirir. Bu, Next.js'nin uygulamanızın tüm sayfalarına uygulayacağı düzendir.</p>
<p>Göstermek için <strong>layout.jsx</strong> adlı bir dosya oluşturun ve aşağıdaki kodu ekleyin.</p>
<p> p> </p>
<pre> <code><span>dışa aktarma</span> <span>varsayılan</span> <span><span>işlev</span> <span>RootLayout</span>(<span>{ çocuk }</span> yayılma>) </span>{<br> <span>dönüş</span> (<br> "tr"><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Kök düzen bileşeni, <strong>çocuklar</strong>. Kök düzeni hakkında bilmeniz gereken bazı şeyler aşağıdadır:</p>
<ul> <li> Bunu uygulama klasörüne eklemelisiniz. </li> <li> Next.js 12'nin sayfa klasöründeki <strong>_app.js</strong> ve <strong>_document.js</strong>'nin yerini alır. </li> <li> HTML ve gövde etiketini açık bir şekilde eklemeniz gerekir. </li> <li> Varsayılan olarak bir sunucu bileşenidir. </li> </ul>
<p>Belirtildiği gibi, kök sayfa düzeni tüm sayfalar için geçerlidir, peki sayfalar için özel düzenleri nasıl oluşturabilirsiniz? farklı rota segmentleri?</p>
<p>Uygulama klasörünüzde, her rota için klasörler oluşturarak bir rota tanımlayabilirsiniz. bölüm. Örneğin, <strong>articles</strong> adlı bir klasör oluşturmak, <strong>app/articles</strong> URL yolu ile eşleşir. Daha fazla rota segmenti eklemek için ana rota klasörü içinde bir alt klasör oluşturun. Örneğin, <strong>makaleler</strong> klasörü içine <strong>trend</strong> adlı bir klasör eklemek, URL yolu ile eşleşir. <strong>app/articles/trending</strong>.</p>
<p>Bir rota klasörüne bir <strong>layout.jsx</strong> bileşeni eklediğinizde, bu bileşen içindeki tüm sayfalara uygulanır rota segmenti ve alt klasörleri. Örneğin, <strong>makaleler</strong> klasörüne bir düzen bileşeni eklemek, <strong>trend</strong> alt klasöründekiler dahil olmak üzere makaleler rotasındaki tüm sayfalara uygulanacaktır. Ayrıca <strong>trend</strong> klasörüne bir düzen bileşeni eklerseniz, makaleler klasöründeki düzen bunun içine yerleşir.</p>
<h2 id="advantages-of-using-layouts"> Düzenleri Kullanmanın Avantajları </h2>
<p>Next.js, farklı düzenlerde yeniden kullanabileceğiniz düzen bileşenleri oluşturmanıza olanak tanır sayfalar. Bu, kodu birden çok sayfada çoğaltmadan web sitenizde tutarlı bir görünüme sahip olmanızı sağlar. Ayrıca düzenler, her sayfada değişiklik yapmanız gerekmediğinden değişiklikleri hızla uygulamanıza yardımcı olur.</p>