<Link>

<Link> ist eine React-Komponente, die das HTML-<a>-Element erweitert, um Prefetching und clientseitige Navigation zwischen Routen zu ermöglichen. Es ist die primäre Methode, um zwischen Routen in Next.js zu navigieren.

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Props

Hier eine Übersicht der verfügbaren Props für die Link-Komponente:

Gut zu wissen: Attribute des <a>-Tags wie className oder target="_blank" können als Props an <Link> übergeben werden und werden an das zugrundeliegende <a>-Element weitergegeben.

href (erforderlich)

Der Pfad oder die URL, zu der navigiert werden soll.

<Link href="/dashboard">Dashboard</Link>

href kann auch ein Objekt akzeptieren, zum Beispiel:

// Navigiere zu /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  Über uns
</Link>

replace

Standardwert: false. Wenn true, ersetzt next/link den aktuellen Verlaufseintrag, anstatt eine neue URL in den Browserverlauf einzufügen.

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

scroll

Standardwert: true. Das Standardverhalten von <Link> ist, nach einer Navigation zum Seitenanfang zu scrollen oder die Scrollposition bei Vor- und Zurück-Navigation beizubehalten. Wenn false, scrollt next/link nach einer Navigation nicht zum Seitenanfang.

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" scroll={false}>
      Dashboard
    </Link>
  )
}

prefetch

Standardwert: true. Wenn true, lädt next/link die Seite (angegeben durch href) im Hintergrund vor. Dies ist nützlich, um die Leistung von clientseitigen Navigationen zu verbessern. Jeder <Link /> im Viewport (initial oder durch Scrollen) wird vorab geladen.

Das Prefetching kann durch prefetch={false} deaktiviert werden. Prefetching ist nur in der Produktionsumgebung aktiviert.

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  )
}

import Link from 'next/link'

export default function Page() {
  return (
    <Link href="/dashboard" prefetch={false}>
      Dashboard
    </Link>
  )
}

Beispiele

Verlinkung zu dynamischen Routen

Für dynamische Routen kann es praktisch sein, Template-Literale zu verwenden, um den Pfad des Links zu erstellen.

Beispielsweise können Sie eine Liste von Links zur dynamischen Route app/blog/[slug]/page.js generieren:

import Link from 'next/link'

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

Middleware

Es ist üblich, Middleware für Authentifizierung oder andere Zwecke zu verwenden, die das Umleiten des Benutzers auf eine andere Seite beinhalten. Damit die <Link />-Komponente Links mit Rewrites über Middleware korrekt prefetchen kann, müssen Sie Next.js sowohl die anzuzeigende URL als auch die zu prefetchende URL mitteilen. Dies ist notwendig, um unnötige Anfragen an die Middleware zu vermeiden, um die korrekte Route zum Prefetchen zu ermitteln.

Beispiel: Wenn Sie eine /dashboard-Route bereitstellen möchten, die authentifizierte und Besucher-Ansichten hat, können Sie in Ihrer Middleware etwas Ähnliches wie folgt hinzufügen, um den Benutzer zur richtigen Seite umzuleiten:

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

In diesem Fall würden Sie den folgenden Code in Ihrer <Link />-Komponente verwenden:

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  )
}

Versionsverlauf