Next.js Komponenten und Layout

Die Komponenten- und Layout-Funktionen von Next.js bieten Entwicklern leistungsstarke Tools, um modulare, wartbare Webanwendungen zu erstellen.

Merkmal	Beschreibung
Komponenten	Seitenkomponenten, UI-Komponenten und Feature-Komponenten, die zum Aufbau verschiedener Teile der Anwendung verwendet werden.
Layout	Globales Layout, verschachteltes Layout, dynamisches Layout, verwendet, um Seitenstruktur und gemeinsame Elemente zu definieren.
Spezielle Dateien (Legacy-Version)	`_app.js`、`_document.js`、`_error.js`Wird verwendet, um das globale Layout und die Dokumentstruktur zu definieren.

In Next.js 13 ersetzt das app-Verzeichnis das traditionelle pages-Verzeichnis zur Verwaltung von Routen und Seitenstruktur. Das app-Verzeichnis führt flexiblere Layout-, Routing- und Datenabrufmechanismen sowie erweiterte Funktionen für paralleles Rendering ein.

Beispiel für die Struktur des app-Verzeichnisses:

├── app/
│   ├── page.js           # 默认首页
│   ├── about/
│   │   ├── page.js       # About 页
│   └── layout.js         # 根布局
└── public/                # 静态文件目录

Komponenten

Komponenten sind die grundlegenden Bausteine von Next.js-Anwendungen. Sie können Seitenkomponenten, UI-Komponenten oder Feature-Komponenten sein.

In Next.js sind alle Seiten und Layouts im Wesentlichen React-Komponenten. Sie können Komponenten genauso erstellen und verwenden wie in jeder React-Anwendung.

Seitenkomponenten

Seitenkomponenten sind die Grundlage des Routings in Next.js; jede Seitenkomponente entspricht einer Route.

Seitenkomponenten werden normalerweise im app- oder pages-Verzeichnis gespeichert.

Beispiel

// pages/about.js oder app/about/page.js
export default function About() {
return <div>Über uns</div>;
}

UI-Komponenten

UI-Komponenten sind wiederverwendbare Schnittstellenelemente, wie Schaltflächen, Karten, Navigationsleisten usw.

UI-Komponenten werden normalerweise im components-Verzeichnis gespeichert.

Beispiel

// components/Button.js
export default function Button({ children }) {
return <button>{children}</button>;
}

Feature-Komponenten

Feature-Komponenten sind Komponenten, die bestimmte Features implementieren, wie Datenabruf, Zustandsverwaltung usw.

Feature-Komponenten werden normalerweise im Verzeichnis hooks oder utils gespeichert.

Beispiel

// hooks/useData.js
import { useEffect, useState } from 'react';

export default function useData(url) {
const [data, setData] = useState(null);

useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);

return data;
}

Beispiel

Eine Komponente erstellen:Erstelle Hello.js im Verzeichnis app/components/ mit folgendem Code:

Beispiel

// app/components/Hello.js
const Hello = () => {
return <h1>Hello, Next.js 13!</h1>;
};

export default Hello;

Verwendung der Komponente:Im app-Verzeichnis werden Seitenkomponenten aus page.js exportiert, und du kannst Komponenten darin verwenden:

Beispiel

// app/page.js
import Hello from './components/Hello';

export default function Home() {
return (
<div>
<Hallo />
</div>
);
}

Layout

Layouts sind Komponenten, die zur Definition der Seitenstruktur verwendet werden und normalerweise gemeinsame Elemente wie Kopfzeilen, Fußzeilen, Navigationsleisten usw. enthalten.

Globales Layout

Globale Layouts gelten für die gesamte Anwendung und werden normalerweise in app/layout.js oder _app.js definiert.

Beispiel

// pages/_app.js or app/layout.js
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function Layout({ children }) {
return (
<div>
<Header />
<main>{children}</main>
<Footer />
</div>
);
}

Verschachteltes Layout

Verschachtelte Layouts ermöglichen es dir, verschiedene Layouts für verschiedene Routensegmente zu definieren.

Im app-Verzeichnis kann jedes Routensegment eine layout.js-Datei enthalten.

app/
├── layout.js        // 根布局
├── about/
│   ├── layout.js    // /about 的布局
│   └── page.js      // /about 页面
└── dashboard/
    ├── layout.js    // /dashboard 的布局
    └── page.js      // /dashboard 页面

Beispiel

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
return (
<div>
<h1>Dashboard-Layout</h1>
{children}
</div>
);
}

Dynamisches Layout

Dynamische Layouts ermöglichen es dir, ein Layout dynamisch basierend auf Bedingungen auszuwählen.

Beispiel

// app/layout.js
export default function Layout({ children, isDashboard }) {
return (
<div>
{isDashboard ? <DashboardLayout>{children}</DashboardLayout> : <MainLayout>{children}</MainLayout>}
</div>
);
}

Spezielle Dateien (Legacy-Version)

Next.js bietet einige spezielle Dateien zum Definieren globaler Layouts, Dokumentstruktur und Fehlerseiten.

_app.js

_app.js ist die globale Komponente in Next.js, die verwendet wird, um alle Seitenkomponenten zu umschließen.

Beispiel

// pages/_app.js
import Layout from '../components/Layout';

export default function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}

_document.js

_document.js wird verwendet, um die HTML-Dokumentstruktur anzupassen.

Beispiel

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

_error.js

_error.js wird verwendet, um Fehlerseiten anzupassen.

Beispiel

// pages/_error.js
export default function Error({ statusCode }) {
return (
<div>
<h1>{statusCode} Error</h1>
<p>Entschuldigung, etwas ist schiefgelaufen.</p>
</div>
);
}

Andere Erweiterungen