Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Next.js ist ein leistungsstarkes Framework zum Erstellen leistungsstarker React-Anwendungen. Eine seiner Funktionen ist die Möglichkeit, benutzerdefinierte Layouts für Ihre Seiten zu erstellen, mit denen Sie ein konsistentes Design erstellen können, das in Ihrer Anwendung einfach zu pflegen und zu aktualisieren ist.

Erstellen einer benutzerdefinierten Layoutkomponente in Next. JS

In dem Ordner namens Komponenten erstellen Sie in Ihrem Next.js-Projekt Layout.jsx und fügen Sie den folgenden Code hinzu, um die Layoutkomponente zu erstellen.

importieren Kopf aus'weiter/Kopf'
importieren Header aus'./Header.jsx'
importieren Fusszeile aus'./Footer.jsx'
konst Anordnung = (Kinder) => (



Meine App<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <header></header><br> {Kinder}<br> <footer></footer><br> <<span>/div></span><br>)<br><span>exportieren</span> <span>Standard</span>-Layout<br> < p>Diese Komponente importiert die Header- und Footer-Komponenten und <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>akzeptiert Kinder als Requisiten</span>. Es rendert die <strong>untergeordneten Elemente</strong> zwischen den Header- und Footer-Komponenten. Wenn Sie eine Seite mit diesem Layout umbrechen, werden Kopf- und Fußzeile oben und unten angezeigt.<h2 id="using-the-layout-component"> Unter Verwendung von Layoutkomponente </h2>
<p>Um die Layoutkomponente zu verwenden, importieren Sie sie in eine Seitenkomponente und verwenden Sie sie wie unten gezeigt.</p> <pre> <code><span>import</span> Layout <span>von</span> <span>'../components/Layout'</span><br><span>const</span> Page = <span><span>()</span> =></span> (<br> <layout><br> <h1>Home<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>exportieren</span> <span> default</span> Seite<br>
</h1></layout></code> </pre>
<p>Es wird die angewendet Layout zu dieser Seite. Sie können diesen Vorgang auf alle Seiten wiederholen, auf die Sie das Layout anwenden möchten.</p>
<p>Um das Layout auf allen Seiten in den Anwendungen gleichzeitig zu verwenden, importieren Sie es die Layout-Komponente in die Datei <strong>/page/_app.js</strong> und verwenden Sie sie wie folgt.</p> <pre> <code><span>import</span> Layout <span>from Spanne> <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>Die bisher gezeigten Beispiele Verwenden Sie die 12-Seiten-Ordner von Next.js. In Next.js 13 erstellen Sie das Layout im App-Ordner (zum Zeitpunkt des Schreibens befindet es sich in der Beta-Phase).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Erstellen eines benutzerdefinierten Layouts im App-Ordner </h2>
<p>Für den <span>App-Ordner in Next.js 13 </span>müssen Sie an seiner Basis ein Stammlayout erstellen. Dies ist das Layout, das Next.js auf alle Seiten Ihrer Anwendung anwendet.</p>
<p>Erstellen Sie zur Demonstration eine Datei namens <strong>layout.jsx</strong> und fügen Sie den folgenden Code hinzu.</p> p> <pre> <code><span>export</span> <span>default</span> <span><span>function</span> <span>RootLayout</span>(<span>{ children } span>) </span>{<br> <span>zurück</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>Die Root-Layout-Komponente akzeptiert und rendert die <strong>Kinder</strong>. Nachfolgend finden Sie einige Dinge, die Sie über ein Root-Layout wissen sollten:</p>
<ul> <li> Sie müssen es in den App-Ordner aufnehmen. </li> <li> Es ersetzt <strong>_app.js</strong> und <strong>_document.js</strong> im Seitenordner von Next.js 12. </li> <li> Sie müssen den HTML- und Body-Tag explizit einschließen. </li> <li> Es ist standardmäßig eine Serverkomponente. </li> </ul>
<p>Wie bereits erwähnt, gilt das Stammlayout für alle Seiten, wie erstellen Sie also benutzerdefinierte Layouts für verschiedene Routensegmente?</p>
<p>In Ihrem App-Ordner können Sie eine Route definieren, indem Sie Ordner für jede Route erstellen Segment. Wenn Sie beispielsweise einen Ordner namens <strong>articles</strong> erstellen, wird dieser dem URL-Pfad <strong>app/articles</strong> zugeordnet. Um weitere Streckenabschnitte hinzuzufügen, erstellen Sie innerhalb des Hauptstreckenordners einen Unterordner. Wenn Sie beispielsweise einen Ordner namens <strong>trending</strong> im Ordner <strong>articles</strong> hinzufügen, wird der URL-Pfad zugeordnet <strong>app/articles/trending</strong>.</p>
<p>Wenn Sie eine <strong>layout.jsx</strong>-Komponente zu einem Routenordner hinzufügen, wird sie auf alle darin enthaltenen Seiten angewendet Routensegment und seine Unterordner. Wenn Sie beispielsweise eine Layoutkomponente zum Ordner <strong>Artikel</strong> hinzufügen, gilt dies für alle Seiten in der Artikelroute, einschließlich der Seiten im Unterordner <strong>Trends</strong>. Wenn Sie auch eine Layout-Komponente im Ordner <strong>Trends</strong> hinzufügen, wird das Layout im Ordner "Artikel" darin verschachtelt.</p>
<h2 id="advantages-of-using-layouts"> Vorteile der Verwendung von Layouts </h2>
<p>Next.js ermöglicht es Ihnen, Layoutkomponenten zu erstellen, die Sie für verschiedene Zwecke wiederverwenden können Seiten. Auf diese Weise können Sie Ihre Website einheitlich gestalten, ohne den Code auf mehreren Seiten zu duplizieren. Außerdem helfen Ihnen Layouts dabei, Änderungen schnell umzusetzen, da Sie nicht auf jeder Seite Änderungen vornehmen müssen.</p>