Linking 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="/">Home</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 geladen (inklusive der entsprechenden Daten) für Seiten, die Statische Generierung verwenden. Die entsprechenden Daten für server-seitig gerenderte Routen werden nur dann abgerufen, wenn auf den <Link /> geklickt 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 der Komponente als Prop ü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 mit einem URL-Objekt:

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 von 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. Hier slug.

Router einfügen

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 grundlegende Seitennavigationen mit useRouter:

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 über das router-Objekt (hinzugefügt durch useRouter oder withRouter), ohne den Zustand zu verlieren.

Um Shallow Routing zu aktivieren, setzen Sie die shallow-Option auf true. Betrachten Sie folgendes 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 beobachten, 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. Angenommen, 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, obwohl wir Shallow Routing angefordert haben.

Wenn Shallow Routing mit Middleware verwendet wird, wird nicht sichergestellt, dass die neue Seite mit der aktuellen ü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.