Verlinkung und Navigation

Der Next.js-Router ermöglicht clientseitige Routenübergänge zwischen Seiten, ähnlich wie bei einer Single-Page-Anwendung.

Eine React-Komponente namens Link wird bereitgestellt, um diesen clientseitigen Routenübergang durchzuführen.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Startseite</Link>
      </li>
      <li>
        <Link href="/about">Über uns</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog-Beitrag</Link>
      </li>
    </ul>
  )
}

export default Home

Das obige Beispiel verwendet mehrere Links. Jeder davon ordnet einen Pfad (href) einer bekannten Seite zu:

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

Jeder <Link /> im Viewport (initial oder durch Scrollen) wird standardmäßig vorab abgerufen (inklusive der entsprechenden Daten) für Seiten, die Statische Generierung verwenden. Die entsprechenden Daten für server-seitig gerenderte Routen werden erst dann abgerufen, wenn der <Link /> angeklickt wird.

Verlinkung zu dynamischen Pfaden

Sie können auch Interpolation verwenden, um den Pfad zu erstellen, was bei dynamischen Routensegmenten nützlich ist. Zum Beispiel, um eine Liste von Beiträgen anzuzeigen, die als Prop an die Komponente übergeben wurden:

import Link from 'next/link'

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

export default Posts

encodeURIComponent wird im Beispiel verwendet, um den Pfad utf-8-kompatibel zu halten.

Alternativ können Sie ein URL-Objekt verwenden:

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

Hier verwenden wir anstelle der Interpolation ein URL-Objekt in href, wobei:

• pathname der Name der Seite im pages-Verzeichnis ist. In diesem Fall /blog/[slug].
• query ein Objekt mit dem dynamischen Segment ist. In diesem Fall slug.

Router einbinden

Um auf das router-Objekt in einer React-Komponente zuzugreifen, können Sie useRouter oder withRouter verwenden.

Generell empfehlen wir die Verwendung von useRouter.

Imperative Navigation

next/link sollte die meisten Ihrer Routing-Anforderungen abdecken, aber Sie können auch clientseitige Navigationen ohne ihn durchführen. Siehe die Dokumentation für next/router.

Das folgende Beispiel zeigt, wie Sie grundlegende Seitennavigationen mit useRouter durchführen:

import { useRouter } from 'next/router'

export default function ReadMore() {
  const router = useRouter()

  return (
    <button onClick={() => router.push('/about')}>
      Klicken Sie hier, um mehr zu lesen
    </button>
  )
}

Shallow Routing

Shallow Routing ermöglicht es Ihnen, die URL zu ändern, ohne die Datenabrufmethoden erneut auszuführen. Dazu gehören getServerSideProps, getStaticProps und getInitialProps.

Sie erhalten den aktualisierten pathname und das query-Objekt über das router-Objekt (hinzugefügt durch useRouter oder withRouter), ohne den Zustand zu verlieren.

Um Shallow Routing zu aktivieren, setzen Sie die Option shallow auf true. Betrachten Sie das folgende Beispiel:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Aktuelle URL ist '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Navigations immer nach dem ersten Rendern durchführen
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // Der Zähler hat sich geändert!
  }, [router.query.counter])
}

export default Page

Die URL wird auf /?counter=10 aktualisiert und die Seite wird nicht ersetzt, nur der Zustand der Route ändert sich.

Sie können URL-Änderungen auch über componentDidUpdate überwachen, wie unten gezeigt:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // Überprüfen, ob sich die Props geändert haben, um eine Endlosschleife zu vermeiden
  if (query.counter !== prevProps.router.query.counter) {
    // Daten basierend auf der neuen Abfrage abrufen
  }
}

Einschränkungen

Shallow Routing funktioniert nur für URL-Änderungen auf der aktuellen Seite. Nehmen wir zum Beispiel an, wir haben eine weitere Seite namens pages/about.js, und Sie führen dies aus:

router.push('/?counter=10', '/about?counter=10', { shallow: true })

Da dies eine neue Seite ist, wird die aktuelle Seite entladen, die neue geladen und auf den Datenabruf gewartet, auch wenn wir Shallow Routing angefordert haben.

Wenn Shallow Routing mit Middleware verwendet wird, wird nicht sichergestellt, dass die neue Seite mit der aktuellen Seite übereinstimmt, wie es zuvor ohne Middleware der Fall war. Dies liegt daran, dass Middleware dynamisch umschreiben kann und clientseitig ohne Datenabruf nicht überprüft werden kann, der bei Shallow Routing übersprungen wird. Daher muss eine Shallow-Route-Änderung immer als Shallow behandelt werden.