<Link>

<Link> rotalar arasında ön getirme ve istemci tarafında gezinme sağlamak için HTML <a> öğesini genişleten bir React bileşenidir. Next.js'de rotalar arasında gezinmenin birincil yoludur.

import Link from 'next/link'
 
export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Props

İşte Bağlantı Bileşeni için mevcut aksesuarların bir özeti:

Bilmenizde fayda var: className veya target="_blank" gibi <a> etiket öznitelikleri <Link> öğesine prop olarak eklenebilir ve altta yatan <a> öğesine aktarılır.

href (required)

Gidilecek yol veya URL.

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

href örneğin bir nesneyi de kabul edebilir:

// Navigate to /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  About
</Link>

replace

Varsayılan değer false. true, next/link olduğunda, tarayıcının geçmiş yığınına yeni bir URL eklemek yerine geçerli geçmiş durumunu değiştirir.

import Link from 'next/link'
 
export default function Page() {
  return (
    <Link href="/dashboard" replace>
      Dashboard
    </Link>
  )
}

scroll

Varsayılan olarak true. <Link> 'un varsayılan davranışı, yeni bir rotanın en üstüne kaydırmak veya geriye ve ileriye doğru gezinme için kaydırma konumunu korumaktır. false , next/link bir gezintiden sonra sayfanın en üstüne kaydırma yapmayacaktır.

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

prefetch

Varsayılan değer true. true, next/link sayfayı ( href ile gösterilen) arka planda önceden getirecektir. Bu, istemci tarafı gezintilerinin performansını artırmak için kullanışlıdır. Görüntü alanındaki (başlangıçta veya kaydırma yoluyla) herhangi bir <Link /> önceden yüklenecektir.

Prefetch, prefetch={false} adresi geçilerek devre dışı bırakılabilir. Prefetching yalnızca üretimde etkinleştirilir.

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

Examples

Linking to Dynamic Routes

Dinamik rotalarda, bağlantının yolunu oluşturmak için şablon değişmezleri kullanmak kullanışlı olabilir.

Örneğin, app/blog/[slug]/page.js dinamik rotasına giden bağlantıların bir listesini oluşturabilirsiniz:

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

Kimlik doğrulama veya kullanıcıyı farklı bir sayfaya yeniden yazmayı içeren diğer amaçlar için Middleware kullanmak yaygındır. <Link /> bileşeninin Middleware aracılığıyla yeniden yazılan bağlantıları düzgün bir şekilde önceden getirebilmesi için Next.js'ye hem görüntülenecek URL'yi hem de önceden getirilecek URL'yi söylemeniz gerekir. Bu, önceden getirilecek doğru rotayı bilmek için ara katman yazılımına gereksiz getirmelerden kaçınmak için gereklidir.

Örneğin, kimliği doğrulanmış ve ziyaretçi görünümlerine sahip bir /dashboard rotası sunmak istiyorsanız, kullanıcıyı doğru sayfaya yönlendirmek için Orta Yazılımınıza aşağıdakine benzer bir şey ekleyebilirsiniz:

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))
    }
  }
}

Bu durumda, <Link /> bileşeninizde aşağıdaki kodu kullanmak istersiniz:

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>
  )
}

Version History