Erstellen von Layouts und Seiten

Next.js verwendet dateisystembasiertes Routing, was bedeutet, dass Sie Ordner und Dateien verwenden können, um Routen zu definieren. Diese Seite führt Sie durch die Erstellung von Layouts und Seiten sowie das Verlinken zwischen ihnen.

Erstellen einer Seite

Eine Seite ist eine Benutzeroberfläche, die für eine bestimmte Route gerendert wird. Um eine Seite zu erstellen, fügen Sie eine page-Datei im app-Verzeichnis hinzu und exportieren standardmäßig eine React-Komponente. Zum Beispiel, um eine Indexseite (/) zu erstellen:

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

Erstellen eines Layouts

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

Sie können ein Layout definieren, indem Sie standardmäßig eine React-Komponente aus einer layout-Datei exportieren. Die Komponente sollte eine children-Prop akzeptieren, die eine Seite oder ein anderes Layout sein kann.

Um beispielsweise ein Layout zu erstellen, das Ihre Indexseite als Kind akzeptiert, fügen Sie eine layout-Datei im app-Verzeichnis hinzu:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        {/* Platzieren Sie children dort, wo eine Seite oder ein verschachteltes Layout gerendert werden soll */}
        <main>{children}</main>
      </body>
    </html>
  )
}

export default function DashboardLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        {/* Platzieren Sie children dort, wo eine Seite oder ein verschachteltes Layout gerendert werden soll */}
        <main>{children}</main>
      </body>
    </html>
  )
}

Das obige Layout wird als Root-Layout bezeichnet, da es im Stammverzeichnis des app-Ordners definiert ist. Das Root-Layout ist erforderlich und muss html- und body-Tags enthalten.

Erstellen einer verschachtelten Route

Eine verschachtelte Route ist eine Route, die aus mehreren URL-Segmenten besteht. Zum Beispiel besteht die /blog/[slug]-Route aus drei Segmenten:

/ (Root-Segment)
blog (Segment)
[slug] (Blatt-Segment)

In Next.js:

Ordner werden verwendet, um Routensegmente zu definieren, die URL-Segmenten zugeordnet sind.
Dateien (wie page und layout) werden verwendet, um die Benutzeroberfläche für ein Segment zu erstellen.

Um verschachtelte Routen zu erstellen, können Sie Ordner ineinander verschachteln. Um beispielsweise eine Route für /blog hinzuzufügen, erstellen Sie einen Ordner namens blog im app-Verzeichnis. Fügen Sie dann eine page.tsx-Datei hinzu, um /blog öffentlich zugänglich zu machen:

File hierarchy showing blog folder and a page.js file

// Dummy imports
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'

export default async function Page() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  )
}

// Dummy imports
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'

export default async function Page() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  )
}

Sie können die Verschachtelung von Ordnern fortsetzen, um verschachtelte Routen zu erstellen. Um beispielsweise eine Route für einen bestimmten Blogbeitrag zu erstellen, erstellen Sie einen neuen [slug]-Ordner innerhalb von blog und fügen eine page-Datei hinzu:

File hierarchy showing blog folder with a nested slug folder and a page.js file

function generateStaticParams() {}

export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>
}

function generateStaticParams() {}

export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>
}

Das Einschließen eines Ordnernamens in eckige Klammern (z.B. [slug]) erstellt ein dynamisches Routensegment, das verwendet wird, um mehrere Seiten aus Daten zu generieren, z.B. Blogbeiträge, Produktseiten usw.

Verschachteln von Layouts

Standardmäßig sind Layouts in der Ordnerhierarchie ebenfalls verschachtelt, d.h. sie umschließen untergeordnete Layouts über ihre children-Prop. Sie können Layouts verschachteln, indem Sie layout innerhalb bestimmter Routensegmente (Ordner) hinzufügen.

Um beispielsweise ein Layout für die /blog-Route zu erstellen, fügen Sie eine neue layout-Datei innerhalb des blog-Ordners hinzu.

File hierarchy showing root layout wrapping the blog layout

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

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

Wenn Sie die beiden obigen Layouts kombinieren würden, würde das Root-Layout (app/layout.js) das Blog-Layout (app/blog/layout.js) umschließen, das wiederum die Blogseite (app/blog/page.js) und die Blogbeitragsseite (app/blog/[slug]/page.js) umschließen würde.

Erstellen eines dynamischen Segments

Dynamische Segmente ermöglichen es Ihnen, Routen zu erstellen, die aus Daten generiert werden. Anstatt beispielsweise manuell eine Route für jeden einzelnen Blogbeitrag zu erstellen, können Sie ein dynamisches Segment erstellen, um die Routen basierend auf Blogbeitragsdaten zu generieren.

Um ein dynamisches Segment zu erstellen, schließen Sie den Segmentnamen (Ordner) in eckige Klammern ein: [segmentName]. Zum Beispiel ist in der app/blog/[slug]/page.tsx-Route [slug] das dynamische Segment.

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

export default async function BlogPostPage({ params }) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

Erfahren Sie mehr über Dynamische Segmente.

Verlinken zwischen Seiten

Sie können die <Link>-Komponente verwenden, um zwischen Routen zu navigieren. <Link> ist eine eingebaute Next.js-Komponente, die das HTML-<a>-Tag erweitert, um Prefetching und Client-seitige Navigation bereitzustellen.

Um beispielsweise eine Liste von Blogbeiträgen zu generieren, importieren Sie <Link> aus next/link und übergeben Sie eine href-Prop an die Komponente:

import Link from 'next/link'

export default async function Post({ post }) {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

import Link from 'next/link'

export default async function Post({ post }) {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Gut zu wissen: <Link> ist die primäre Methode, um zwischen Routen in Next.js zu navigieren. Sie können auch den useRouter-Hook für erweiterte Navigation verwenden.

Erstellen von Layouts und Seiten

Erstellen einer Seite

Erstellen eines Layouts

Erstellen einer verschachtelten Route

Verschachteln von Layouts

Erstellen eines dynamischen Segments

Verlinken zwischen Seiten

Linking und Navigation

layout.js

page.js

Link

Dynamische Segmente

On this page