Seiten und Layouts

Wir empfehlen, zuerst die Seiten Routing-Grundlagen und Routen definieren zu lesen, bevor Sie fortfahren.

Der App Router in Next.js 13 hat neue Dateikonventionen eingeführt, um einfach Seiten, gemeinsame Layouts und Templates zu erstellen. Diese Seite führt Sie durch die Verwendung dieser speziellen Dateien in Ihrer Next.js-Anwendung.

Seiten

Eine Seite ist eine Benutzeroberfläche, die für eine Route eindeutig ist. Sie können Seiten definieren, indem Sie eine Komponente aus einer page.js-Datei exportieren. Verwenden Sie verschachtelte Ordner, um eine Route zu definieren, und eine page.js-Datei, um die Route öffentlich zugänglich zu machen.

Erstellen Sie Ihre erste Seite, indem Sie eine page.js-Datei im app-Verzeichnis hinzufügen:

// `app/page.tsx` ist die UI für die `/`-URL
export default function Page() {
  return <h1>Hallo, Startseite!</h1>
}

// `app/page.js` ist die UI für die `/`-URL
export default function Page() {
  return <h1>Hallo, Startseite!</h1>
}

// `app/dashboard/page.tsx` ist die UI für die `/dashboard`-URL
export default function Page() {
  return <h1>Hallo, Dashboard-Seite!</h1>
}

// `app/dashboard/page.js` ist die UI für die `/dashboard`-URL
export default function Page() {
  return <h1>Hallo, Dashboard-Seite!</h1>
}

Gut zu wissen:

• Eine Seite ist immer das Blatt des Route-Subbaums.
• Die Dateiendungen .js, .jsx oder .tsx können für Seiten verwendet werden.
• Eine page.js-Datei ist erforderlich, um ein Routensegment öffentlich zugänglich zu machen.
• Seiten sind standardmäßig Server Components, können aber auch als Client Components festgelegt werden.
• Seiten können Daten abrufen. Weitere Informationen finden Sie im Abschnitt Datenabruf.

Layouts

Ein Layout ist eine Benutzeroberfläche, die zwischen mehreren Seiten geteilt wird. Bei der Navigation behalten Layouts ihren Zustand bei, bleiben interaktiv und werden nicht neu gerendert. Layouts können auch verschachtelt werden.

Sie können ein Layout definieren, indem Sie eine React-Komponente standardmäßig aus einer layout.js-Datei exportieren. Die Komponente sollte eine children-Prop akzeptieren, die während des Renderings mit einem untergeordneten Layout (falls vorhanden) oder einer untergeordneten Seite gefüllt wird.

export default function DashboardLayout({
  children, // wird eine Seite oder ein verschachteltes Layout sein
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Gemeinsame UI hier einfügen, z.B. eine Kopfzeile oder Seitenleiste */}
      <nav></nav>

      {children}
    </section>
  )
}

export default function DashboardLayout({
  children, // wird eine Seite oder ein verschachteltes Layout sein
}) {
  return (
    <section>
      {/* Gemeinsame UI hier einfügen, z.B. eine Kopfzeile oder Seitenleiste */}
      <nav></nav>

      {children}
    </section>
  )
}

Gut zu wissen:

• Das oberste Layout wird als Root Layout bezeichnet. Dieses erforderliche Layout wird von allen Seiten einer Anwendung gemeinsam genutzt. Root Layouts müssen html- und body-Tags enthalten.
• Jedes Routensegment kann optional sein eigenes Layout definieren. Diese Layouts werden von allen Seiten in diesem Segment gemeinsam genutzt.
• Layouts in einer Route sind standardmäßig verschachtelt. Jedes übergeordnete Layout umschließt untergeordnete Layouts darunter mit der React children-Prop.
• Sie können Route Groups verwenden, um bestimmte Routensegmente in gemeinsame Layouts einzubeziehen oder auszuschließen.
• Layouts sind standardmäßig Server Components, können aber auch als Client Components festgelegt werden.
• Layouts können Daten abrufen. Weitere Informationen finden Sie im Abschnitt Datenabruf.
• Die Weitergabe von Daten zwischen einem übergeordneten Layout und seinen untergeordneten Elementen ist nicht möglich. Sie können jedoch dieselben Daten in einer Route mehrmals abrufen, und React wird die Anfragen automatisch deduplizieren, ohne die Leistung zu beeinträchtigen.
• Layouts haben keinen Zugriff auf die Routensegmente unterhalb ihrer selbst. Um auf alle Routensegmente zuzugreifen, können Sie useSelectedLayoutSegment oder useSelectedLayoutSegments in einer Client Component verwenden.
• Die Dateiendungen .js, .jsx oder .tsx können für Layouts verwendet werden.
• Eine layout.js- und page.js-Datei können im selben Ordner definiert werden. Das Layout wird die Seite umschließen.

Root Layout (Erforderlich)

Das Root Layout wird auf der obersten Ebene des app-Verzeichnisses definiert und gilt für alle Routen. Dieses Layout ermöglicht es Ihnen, das initiale HTML, das vom Server zurückgegeben wird, zu modifizieren.

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Gut zu wissen:

• Das app-Verzeichnis muss ein Root Layout enthalten.
• Das Root Layout muss <html>- und <body>-Tags definieren, da Next.js diese nicht automatisch erstellt.
• Sie können die integrierte SEO-Unterstützung verwenden, um <head>-HTML-Elemente wie das <title>-Element zu verwalten.
• Sie können Route Groups verwenden, um mehrere Root Layouts zu erstellen. Siehe ein Beispiel hier.
• Das Root Layout ist standardmäßig eine Server Component und kann nicht als Client Component festgelegt werden.

Migration vom pages-Verzeichnis: Das Root Layout ersetzt die Dateien _app.js und _document.js. Siehe Migrationsleitfaden.

Verschachtelte Layouts

Layouts, die innerhalb eines Ordners definiert sind (z.B. app/dashboard/layout.js), gelten für bestimmte Routensegmente (z.B. acme.com/dashboard) und werden gerendert, wenn diese Segmente aktiv sind. Standardmäßig sind Layouts in der Dateihierarchie verschachtelt, was bedeutet, dass sie untergeordnete Layouts über ihre children-Prop umschließen.

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

export default function DashboardLayout({ children }) {
  return <section>{children}</section>
}

Gut zu wissen:

• Nur das Root Layout kann <html>- und <body>-Tags enthalten.

Wenn Sie die beiden oben genannten Layouts kombinieren würden, würde das Root Layout (app/layout.js) das Dashboard-Layout (app/dashboard/layout.js) umschließen, das wiederum die Routensegmente innerhalb von app/dashboard/* umschließen würde.

Die beiden Layouts wären wie folgt verschachtelt:

Sie können Route Groups verwenden, um bestimmte Routensegmente in gemeinsame Layouts einzubeziehen oder auszuschließen.

Templates

Templates ähneln Layouts darin, dass sie jedes untergeordnete Layout oder jede Seite umschließen. Im Gegensatz zu Layouts, die über Routen hinweg bestehen bleiben und ihren Zustand beibehalten, erstellen Templates für jedes ihrer untergeordneten Elemente bei der Navigation eine neue Instanz. Das bedeutet, dass beim Navigieren zwischen Routen, die ein Template teilen, eine neue Instanz der Komponente eingebunden wird, DOM-Elemente neu erstellt werden, der Zustand nicht erhalten bleibt und Effekte neu synchronisiert werden.

Es kann Fälle geben, in denen Sie dieses spezifische Verhalten benötigen, und Templates wären eine geeignetere Option als Layouts. Zum Beispiel:

• Funktionen, die auf useEffect basieren (z.B. Protokollierung von Seitenaufrufen) und useState (z.B. ein Feedback-Formular pro Seite).
• Um das Standardverhalten des Frameworks zu ändern. Beispielsweise zeigen Suspense Boundaries in Layouts den Fallback nur beim ersten Laden des Layouts an und nicht beim Wechseln der Seiten. Bei Templates wird der Fallback bei jeder Navigation angezeigt.

Ein Template kann definiert werden, indem Sie eine standardmäßige React-Komponente aus einer template.js-Datei exportieren. Die Komponente sollte eine children-Prop akzeptieren.

export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

export default function Template({ children }) {
  return <div>{children}</div>
}

In Bezug auf die Verschachtelung wird template.js zwischen einem Layout und seinen untergeordneten Elementen gerendert. Hier ist eine vereinfachte Ausgabe:

<Layout>
  {/* Beachten Sie, dass das Template einen eindeutigen Schlüssel erhält. */}
  <Template key={routeParam}>{children}</Template>
</Layout>

Ändern von <head>

Im app-Verzeichnis können Sie <head>-HTML-Elemente wie title und meta mit der integrierten SEO-Unterstützung ändern.

Metadaten können definiert werden, indem Sie ein metadata-Objekt oder eine generateMetadata-Funktion in einer layout.js- oder page.js-Datei exportieren.

import { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js',
}

export default function Page() {
  return '...'
}

export const metadata = {
  title: 'Next.js',
}

export default function Page() {
  return '...'
}

Gut zu wissen: Sie sollten <head>-Tags wie <title> und <meta> nicht manuell zu Root Layouts hinzufügen. Verwenden Sie stattdessen die Metadata API, die erweiterte Anforderungen wie Streaming und Deduplizierung von <head>-Elementen automatisch handhabt.

Erfahren Sie mehr über verfügbare Metadatenoptionen in der API-Referenz.