<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.

Örnek olarak, aşağıdaki dosyaları içeren bir pages dizini düşünün:

• pages/index.js
• pages/about.js
• pages/blog/[slug].js

Bu sayfaların her birine şu şekilde bir bağlantı verebiliriz:

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

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

Other Props

legacyBehavior

<a> öğesi artık <Link> öğesinin alt öğesi olarak gerekli değildir. Eski davranışı kullanmak için legacyBehavior prop'unu ekleyin veya yükseltmek için <a> öğesini kaldırın. Kodunuzu otomatik olarak yükseltmek için bir codemod mevcuttur.

Bilmenizde fayda var: legacyBehavior adresi true olarak ayarlanmadığında, tüm anchor etiket özellikleri next/link adresine de aktarılabilir, örneğin, className, onClick, vb.

passHref

Link adresini href özelliğini çocuğuna göndermeye zorlar. Varsayılan değer false

scroll

Bir gezintiden sonra sayfanın en üstüne kaydırın. Varsayılan değer true

shallow

Geçerli sayfanın yolunu yeniden çalıştırmadan güncelleyin getStaticProps, getServerSideProps veya getInitialProps. Varsayılan değer false

locale

Etkin yerel ayar otomatik olarak eklenir. locale farklı bir yerel ayar sağlamaya izin verir. Varsayılan davranış devre dışı bırakıldığında false href yerel ayarı eklemek zorundadır.

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, dinamik rotaya giden bağlantıların bir listesini oluşturabilirsiniz pages/blog/[slug].js

import Link from 'next/link'
 
function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}
 
export default Posts

If the child is a custom component that wraps an <a> tag

Link öğesinin alt öğesi <a> etiketini saran özel bir bileşen ise passHref öğesini Link öğesine eklemeniz gerekir. styled-components gibi kütüphaneler kullanıyorsanız bu gereklidir. Bu olmadan, <a> etiketi href özniteliğine sahip olmayacaktır, bu da sitenizin erişilebilirliğine zarar verir ve SEO'yu etkileyebilir. ESLint kullanıyorsanız, passHref'un doğru kullanımını sağlamak için yerleşik bir next/link-passhref kuralı vardır.

import Link from 'next/link'
import styled from 'styled-components'
 
// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
  color: red;
`
 
function NavLink({ href, name }) {
  return (
    <Link href={href} passHref legacyBehavior>
      <RedLink>{name}</RedLink>
    </Link>
  )
}
 
export default NavLink

• Eğer emotion'un JSX pragma özelliğini (@jsx jsx) kullanıyorsanız, doğrudan bir <a> etiketi kullansanız bile passHref kullanmanız gerekir.
• Bileşen, navigasyonu doğru şekilde tetiklemek için onClick özelliğini desteklemelidir

If the child is a functional component

Link öğesinin alt öğesi işlevsel bir bileşen ise, passHref ve legacyBehavior öğelerini kullanmanın yanı sıra, bileşeni React.forwardRef:

import Link from 'next/link'
 
// `onClick`, `href`, and `ref` need to be passed to the DOM element
// for proper handling
const MyButton = React.forwardRef(({ onClick, href }, ref) => {
  return (
    <a href={href} onClick={onClick} ref={ref}>
      Click Me
    </a>
  )
})
 
function Home() {
  return (
    <Link href="/about" passHref legacyBehavior>
      <MyButton />
    </Link>
  )
}
 
export default Home

With URL Object

Link ayrıca bir URL nesnesi alabilir ve URL dizesini oluşturmak için otomatik olarak biçimlendirir. İşte nasıl yapılacağı:

import Link from 'next/link'
 
function Home() {
  return (
    <ul>
      <li>
        <Link
          href={{
            pathname: '/about',
            query: { name: 'test' },
          }}
        >
          About us
        </Link>
      </li>
      <li>
        <Link
          href={{
            pathname: '/blog/[slug]',
            query: { slug: 'my-post' },
          }}
        >
          Blog Post
        </Link>
      </li>
    </ul>
  )
}
 
export default Home

Yukarıdaki örnekte bir bağlantı vardır:

• Önceden tanımlanmış bir rota: /about?name=test
• Dinamik bir rota: /blog/my-post

Node.js URL modülü belgelerinde tanımlanan her özelliği kullanabilirsiniz .

Replace the URL instead of push

Link bileşeninin varsayılan davranışı, history yığınına push yeni bir URL eklemektir. Aşağıdaki örnekte olduğu gibi, yeni bir giriş eklenmesini önlemek için replace prop'unu kullanabilirsiniz:

<Link href="/about" replace>
  About us
</Link>

Disable scrolling to the top of the page

Link 'un varsayılan davranışı sayfanın en üstüne kaydırmaktır. Bir hash tanımlandığında, normal bir <a> etiketi gibi belirli bir kimliğe kaydırılır. En üste / hash'e kaydırmayı önlemek için scroll={false}, Link adresine eklenebilir:

<Link href="/#hashid" scroll={false}>
  Disables scrolling to the top
</Link>

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

Bilmekte fayda var: Dinamik Rotalar kullanıyorsanız, as ve href prop'larınızı uyarlamanız gerekecektir. Örneğin, /dashboard/[user] gibi ara yazılım aracılığıyla farklı şekilde sunmak istediğiniz bir Dinamik Rotanız varsa, şunu yazarsınız: <Link href={{ pathname: '/dashboard/authed/[user]', query: { user: username } }} as="/dashboard/[user]">Profile</Link>.

Version History