So erstellen Sie ein benutzerdefiniertes Layout in Next.JS
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
Erstellen Sie im Ordner „ components“ in Ihrem Next.js-Projekt „Layout.jsx“ und fügen Sie den folgenden Code hinzu, um die Layoutkomponente zu erstellen.
import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
<div>
<Head>
<title>My App</title>
<link rel="stylesheet" href="/static/css/style.css" />
</Head>
<Header />
{children}
<Footer />
</div>
)
export default Layout
Diese Komponente importiert die Header- und Footer-Komponenten und akzeptiert untergeordnete Elemente als Requisiten. Es rendert die untergeordneten Elemente zwischen den Header- und Footer-Komponenten. Wenn Sie eine Seite mit diesem Layout umbrechen, werden Kopf- und Fußzeile oben und unten angezeigt.
Verwenden der Layout-Komponente
Um die Layout-Komponente zu verwenden, importieren Sie sie in eine Seitenkomponente und verwenden Sie sie wie unten gezeigt.
import Layout from '../components/Layout'
const Page = () => (
<Layout>
<h1>Home</h1>
</Layout>
)
export default Page
Das Layout wird auf diese Seite angewendet. Sie können diesen Vorgang auf allen Seiten wiederholen, auf die Sie das Layout anwenden möchten.
Um das Layout auf allen Seiten in den Anwendungen gleichzeitig zu verwenden, importieren Sie die Layoutkomponente in die Datei /page/_app.js und verwenden Sie sie wie folgt.
import Layout from "../components/layout";
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
Die bisher gezeigten Beispiele verwenden 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).
Erstellen eines benutzerdefinierten Layouts im App-Ordner
Für den App-Ordner in Next.js 13 müssen Sie an seiner Basis ein Stammlayout erstellen. Dies ist das Layout, das Next.js auf alle Seiten Ihrer Anwendung anwendet.
Erstellen Sie zur Demonstration eine Datei mit dem Namen layout.jsx und fügen Sie den folgenden Code hinzu.
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
Die Root-Layout-Komponente akzeptiert und rendert die untergeordneten . Nachfolgend finden Sie einige Dinge, die Sie über ein Root-Layout wissen sollten:
- Sie müssen es in den App-Ordner aufnehmen.
- Es ersetzt _app.js und _document.js im Seitenordner von Next.js 12.
- Sie müssen das HTML- und das Body-Tag explizit einschließen.
- Es ist standardmäßig eine Serverkomponente.
Wie bereits erwähnt, gilt das Stammlayout für alle Seiten. Wie erstellen Sie also benutzerdefinierte Layouts für verschiedene Routensegmente?
In Ihrem App-Ordner können Sie eine Route definieren, indem Sie Ordner für jedes Routensegment erstellen. Beispiel: Das Erstellen eines Ordners namens Artikel wird dem URL-Pfad app/articles zugeordnet . Um weitere Streckenabschnitte hinzuzufügen, erstellen Sie innerhalb des Hauptstreckenordners einen Unterordner. Wenn Sie beispielsweise einen Ordner namens trending im Artikelordner hinzufügen , wird der URL-Pfad app/articles/trending zugeordnet .
Wenn Sie einem Routenordner eine layout.jsx- Komponente hinzufügen, gilt sie für alle Seiten innerhalb dieses Routensegments und seiner Unterordner. Beispielsweise gilt das Hinzufügen einer Layoutkomponente zum Artikelordner für alle Seiten in der Artikelroute, einschließlich der Seiten im Trend- Unterordner. Wenn Sie auch eine Layoutkomponente im Trendordner hinzufügen , wird das Layout im Artikelordner darin verschachtelt.
Vorteile der Verwendung von Layouts
Mit Next.js können Sie Layoutkomponenten erstellen, die Sie auf verschiedenen Seiten wiederverwenden können. Auf diese Weise können Sie Ihre Website einheitlich gestalten, ohne den Code auf mehreren Seiten zu duplizieren. Darüber hinaus helfen Ihnen Layouts dabei, Änderungen schnell umzusetzen, da Sie nicht jede Seite ändern müssen.
Schreibe einen Kommentar