Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Next.js to potężny framework do tworzenia wydajnych aplikacji React. Jedną z jego funkcji jest możliwość tworzenia niestandardowych układów stron, co pozwala na stworzenie spójnego projektu, który jest łatwy w utrzymaniu i aktualizacji w całej aplikacji.

Tworzenie niestandardowego komponentu układu w Dalej. JS

W folderze o nazwie składniki w swoim projekcie Next.js utwórz Układ.jsx i dodaj następujący kod, aby utworzyć składnik układu.

import Głowa z„następny / głowa”
import nagłówek z„./Nagłówek.jsx”
import Stopka z„./Stopka.jsx”
konst Układ = (dzieci) => (



Moja aplikacja<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <nag></nag><br> {dzieci}<br> <stopka></stopka><br> <<span>/div></span><br>)<br><span>eksportuj</span> <span>domyślny</span> Układ<br> < p>Ten komponent importuje komponenty Header i Footer i <span> akceptuje elementy podrzędne jako rekwizyty. Renderuje <strong>dzieci</strong> pomiędzy komponentami Header i Footer. Gdy zawiniesz stronę z tym układem, nagłówek i stopka będą wyświetlane u góry iu dołu.<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>
<h2 id="using-the-layout-component"> Używanie Składnik układu </h2>
<p>Aby użyć składnika układu, zaimportuj go do składnika strony i użyj, jak pokazano poniżej.</p> <pre> <code><span>importuj</span> Układ <span>z</span> <span>'../components/Layout'</span><br><span>const</span> Strona = <span><span>()</span> =></span> (<br> <uk></uk> <h1>Strona główna<<span>/h1></span><br> <<span>/Układ></span><br>)<br><span>eksportuj</span> <span> default</span> Strona<br>
</h1></code> </pre>
<p>Zastosuje układ do tej strony. Możesz powtórzyć ten proces dla wszystkich stron, na których chcesz zastosować układ.</p>
<p>Aby użyć układu na wszystkich stronach w aplikacjach jednocześnie, zaimportuj komponent układu do pliku <strong>/page/_app.js</strong> i użyj go w następujący sposób.</p> <pre> <code><span>import</span> Układ <span>z rozpiętość> <span>"../components/layout"</span>;<br><span><span>funkcja</span> <span>Moja aplikacja</span>(<span>{ Component, pageProps } rozpiętość>) </span>{ <br> <span>powrót</span> ( <br> <uk> <br> <komponent></komponent> <br> <<span>/Układ> </span><br> ) ;<br>}</uk></span></span></code> </pre>
<p>Przykłady pokazane do tej pory użyj 12-stronicowych folderów Next.js. W Next.js 13 tworzysz układ w folderze aplikacji (w chwili pisania tego tekstu jest to wersja beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Tworzenie niestandardowego układu w folderze aplikacji </h2>
<p>Folder <span>app w Next.js 13 </span> wymaga utworzenia układu głównego u jego podstawy. To jest układ, który Next.js zastosuje do wszystkich stron Twojej aplikacji.</p>
<p>Aby zademonstrować, utwórz plik o nazwie <strong>layout.jsx</strong> i dodaj następujący kod. p> </p>
<pre> <code><span>eksportuj</span> <span>domyślnie</span> <span><span>funkcja</span> <span>RootLayout</span>(<span>{ dzieci } span>) </span>{<br> <span>powrót</span> (<br> "en"</span>><br> {dzieci}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Komponent układu głównego akceptuje i renderuje <strong>dzieci</strong>. Poniżej znajduje się kilka rzeczy, które powinieneś wiedzieć o układzie głównym:</p>
<ul> <li> Musisz umieścić go w folderze aplikacji. </li> <li> Zastępuje <strong>_app.js</strong> i <strong>_document.js</strong> w folderze strony Next.js 12. </li> <li> Musisz jawnie dołączyć znaczniki HTML i body. </li> <li> Domyślnie jest to komponent serwera. </li> </ul>
<p>Jak wspomniano, układ główny ma zastosowanie do wszystkich stron, więc jak tworzyć niestandardowe układy dla różne segmenty trasy?</p>
<p>W folderze aplikacji możesz zdefiniować trasę, tworząc foldery dla każdej trasy człon. Na przykład utworzenie folderu o nazwie <strong>artykuły</strong> odwzorowuje ścieżkę URL <strong>aplikacja/artykuły</strong>. Aby dodać dalsze segmenty trasy, utwórz podfolder w głównym folderze trasy. Na przykład dodanie folderu o nazwie <strong>trendy</strong> w folderze <strong>artykuły</strong> odwzorowuje ścieżkę URL <strong>app/articles/trending</strong>.</p>
<p>Gdy dodasz komponent <strong>layout.jsx</strong> do folderu trasy, będzie on stosowany do wszystkich stron w tym folderze segment trasy i jego podfoldery. Na przykład dodanie elementu układu do folderu <strong>artykuły</strong> będzie miało zastosowanie do wszystkich stron w ścieżce artykułów, w tym do podfolderu <strong>trendy</strong>. Jeśli dodasz również komponent układu w folderze <strong>trends</strong>, układ w folderze artykułów zostanie w nim zagnieżdżony.</p>
<h2 id="advantages-of-using-layouts"> Zalety korzystania z układów </h2>
<p>Next.js umożliwia tworzenie elementów układu, których można ponownie używać w różnych strony. Dzięki temu możesz uzyskać spójny wygląd całej witryny bez powielania kodu na wielu stronach. Ponadto układy pomagają szybko wprowadzać zmiany, ponieważ nie trzeba wprowadzać zmian na każdej stronie.</p></span>