Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Next.js adalah framework yang kuat untuk membangun aplikasi React berperforma tinggi. Salah satu fiturnya adalah kemampuan untuk membuat tata letak khusus untuk halaman Anda yang memungkinkan Anda membuat desain konsisten yang mudah dipelihara dan diperbarui di seluruh aplikasi Anda.

Membuat Komponen Tata Letak Kustom di Berikutnya. JS

Di folder bernama komponen di proyek Next.js Anda, buat Layout.jsx dan tambahkan kode berikut untuk membuat komponen tata letak.

impor Kepala dari'berikutnya/kepala'
impor Tajuk dari'./Header.jsx'
impor Catatan kaki dari'./Footer.jsx'
const Tata letak = (anak-anak) => (



Aplikasi Saya<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {anak-anak}<br> <footer></footer><br> <<span>/div></span><br>)<br><span>ekspor</span> <span>default</span> Tata Letak<br> < p>Komponen ini mengimpor komponen Header dan Footer dan <span>menerima turunan sebagai alat peraga</span>. Itu merender <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>anak-anak</strong> di antara komponen Header dan Footer. Saat Anda membungkus halaman dengan Layout ini, Header, dan Footer akan ditampilkan di bagian atas dan bawah.<h2 id="using-the-layout-component"> Menggunakan Komponen Tata Letak </h2>
<p>Untuk menggunakan komponen tata letak, impor ke komponen halaman dan gunakan seperti yang ditunjukkan di bawah ini.</p> <pre> <code><span>import</span> Tata Letak <span>dari</span> <span>'../components/Layout'</span><br><span>const</span> Halaman = <span><span>()</span> =></span> (<br> <tata letak><br> <h1>Beranda<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>ekspor</span> <span> default</span> Halaman<br>
</h1></tata></code> </pre>
<p>Ini akan menerapkan tata letak ke halaman ini. Anda dapat mengulangi proses ini ke semua halaman yang tata letaknya ingin Anda terapkan.</p>
<p>Untuk menggunakan tata letak di semua halaman dalam aplikasi sekaligus, impor komponen layout ke dalam file <strong>/page/_app.js</strong> dan gunakan sebagai berikut.</p> <pre> <code><span>import</span> Layout <span>from rentang> <span>"../components/layout"</span>;<br><span><span>fungsi</span> <span>MyApp</span>(<span>{ Komponen, pageProps } rentang>) </span>{ <br> <span>return</span> ( <br> <tata letak> <br> <komponen></komponen> <br> <<span>/Layout> </span><br> ) ;<br>}</tata></span></span></code> </pre>
<p>Contoh yang ditampilkan sejauh ini gunakan folder Next.js 12 halaman. Di Next.js 13, Anda membuat layout di folder app (saat penulisan, masih dalam versi beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Membuat Tata Letak Kustom di Folder Aplikasi </h2>
<p>Folder <span>aplikasi di Next.js 13 </span>mengharuskan Anda membuat tata letak akar di dasarnya. Ini adalah layout yang akan diterapkan Next.js ke semua halaman aplikasi Anda.</p>
<p>Untuk mendemonstrasikan, buat file bernama <strong>layout.jsx</strong> dan tambahkan kode berikut. p> </p>
<pre> <code><span>export</span> <span>default</span> <span><span>function</span> <span>RootLayout</span>(<span>{ children } span>) </span>{<br> <span>kembali</span> (<br> "en"</span>><br> {anak-anak}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Komponen tata letak root menerima dan merender <strong>anak-anak</strong>. Di bawah ini adalah beberapa hal yang harus Anda ketahui tentang tata letak root:</p>
<ul> <li> Anda harus memasukkannya ke dalam folder app. </li> <li> Ini menggantikan <strong>_app.js</strong> dan <strong>_document.js</strong> di folder halaman Next.js 12. </li> <li> Anda harus menyertakan tag HTML dan body secara eksplisit. </li> <li> Ini adalah komponen server secara default. </li> </ul>
<p>Seperti yang disebutkan, tata letak root berlaku untuk semua halaman, jadi bagaimana Anda membuat tata letak khusus untuk segmen rute yang berbeda?</p>
<p>Di folder aplikasi, Anda dapat menentukan rute dengan membuat folder untuk setiap rute segmen. Misalnya, membuat folder bernama <strong>artikel</strong> dipetakan ke jalur URL <strong>aplikasi/artikel</strong>. Untuk menambahkan segmen rute lebih lanjut, buat subfolder di dalam folder rute utama. Misalnya, menambahkan folder bernama <strong>trending</strong> di dalam folder <strong>artikel</strong> akan dipetakan ke jalur URL <strong>app/articles/trending</strong>.</p>
<p>Bila Anda menambahkan komponen <strong>layout.jsx</strong> ke folder rute, itu akan diterapkan ke semua halaman di dalamnya segmen rute dan subfoldernya. Misalnya, menambahkan komponen tata letak ke folder <strong>artikel</strong> akan berlaku untuk semua halaman di rute artikel, termasuk yang ada di subfolder <strong>trending</strong>. Jika Anda juga menambahkan komponen tata letak di folder <strong>trending</strong>, tata letak di folder artikel akan bersarang di dalamnya.</p>
<h2 id="advantages-of-using-layouts"> Keuntungan Menggunakan Tata Letak </h2>
<p>Next.js memungkinkan Anda membuat komponen tata letak yang dapat digunakan kembali di berbagai halaman. Ini memungkinkan Anda memiliki tampilan yang konsisten di seluruh situs web Anda tanpa menduplikasi kode di beberapa halaman. Selain itu, tata letak membantu Anda menerapkan perubahan dengan cepat karena Anda tidak perlu melakukan perubahan pada setiap halaman.</p>