Linking and Navigating

Next.js yönlendiricisi, tek sayfalı bir uygulamaya benzer şekilde sayfalar arasında istemci tarafı rota geçişleri yapmanıza olanak tanır.

Bu istemci tarafı rota geçişini yapmak için Link adlı bir React bileşeni sağlanmıştır.

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Home</Link>
      </li>
      <li>
        <Link href="/about">About Us</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Blog Post</Link>
      </li>
    </ul>
  )
}
 
export default Home

Yukarıdaki örnekte birden fazla bağlantı kullanılmaktadır. Her biri bir yolu (href) bilinen bir sayfaya eşler:

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

Görüntü alanındaki (başlangıçta veya kaydırma yoluyla) herhangi bir <Link /> Statik Oluşturma kullanan sayfalar için varsayılan olarak (ilgili veriler dahil) önceden alınacaktır. Sunucu tarafından oluşturulan rotalar için ilgili veriler yalnızca <Link /> tıklandığında getirilir.

Linking to dynamic paths

Yolu oluşturmak için interpolasyon da kullanabilirsiniz, bu da dinamik rota segmentleri için kullanışlıdır. Örneğin, bileşene prop olarak aktarılan gönderilerin bir listesini göstermek için:

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 yolu utf-8 uyumlu tutmak için örnekte kullanılmıştır.

Alternatif olarak, bir URL Nesnesi kullanarak:

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

Şimdi, yolu oluşturmak için enterpolasyon kullanmak yerine, href adresinde bir URL nesnesi kullanıyoruz:

• pathname pages dizinindeki sayfanın adıdır. /blog/[slug] bu durumda.
• query dinamik segmente sahip bir nesnedir. slug bu durumda.

Injecting the router

Bir React bileşeninde router nesnesine erişmek için useRouter veya withRouter.

Genel olarak şunları kullanmanızı öneririz useRouter.

Imperative Routing

next/link yönlendirme ihtiyaçlarınızın çoğunu karşılayabilmelidir, ancak istemci tarafı gezinmeleri onsuz da yapabilirsiniz, next/router için belgelere bir göz atın.

Aşağıdaki örnekte temel sayfa gezintilerinin nasıl yapılacağı gösterilmektedir useRouter:

import { useRouter } from 'next/router'
 
export default function ReadMore() {
  const router = useRouter()
 
  return (
    <button onClick={() => router.push('/about')}>
      Click here to read more
    </button>
  )
}

Shallow Routing

Sığ yönlendirme, veri getirme yöntemlerini tekrar çalıştırmadan URL'yi değiştirmenize olanak tanır, bu da şunları içerir getServerSideProps, getStaticPropsve getInitialProps.

Güncellenmiş pathname ve query adreslerini router nesnesi aracılığıyla alırsınız (şu şekilde eklenir useRouter veya withRouter), durumu kaybetmeden.

Sığ yönlendirmeyi etkinleştirmek için shallow seçeneğini true olarak ayarlayın. Aşağıdaki örneği göz önünde bulundurun:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
 
// Current URL is '/'
function Page() {
  const router = useRouter()
 
  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])
 
  useEffect(() => {
    // The counter changed!
  }, [router.query.counter])
}
 
export default Page

URL /?counter=10 olarak güncellenecek ve sayfa değiştirilmeyecek, sadece rotanın durumu değiştirilecektir.

URL değişikliklerini şu yolla da izleyebilirsiniz componentDidUpdate aşağıda gösterildiği gibi:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // verify props have changed to avoid an infinite loop
  if (query.counter !== prevProps.router.query.counter) {
    // fetch data based on the new query
  }
}

Caveats

Sığ yönlendirme yalnızca geçerli sayfadaki URL değişiklikleri için çalışır. Örneğin, pages/about.js adında başka bir sayfamız olduğunu ve bunu çalıştırdığınızı varsayalım:

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

Bu yeni bir sayfa olduğu için, mevcut sayfayı kaldıracak, yenisini yükleyecek ve sığ yönlendirme yapmak istememize rağmen veri getirmeyi bekleyecektir.

Sığ yönlendirme ara yazılımla birlikte kullanıldığında, daha önce ara yazılım olmadan yapıldığı gibi yeni sayfanın mevcut sayfayla eşleşmesini sağlamayacaktır. Bunun nedeni, ara yazılımın dinamik olarak yeniden yazabilmesi ve sığ ile atlanan bir veri getirme olmadan istemci tarafında doğrulanamamasıdır, bu nedenle sığ bir rota değişikliği her zaman sığ olarak ele alınmalıdır.