---
title: Link
description: Mağaza sahibinin navigasyon linkleri oluşturmasını sağlayan Link prop tipi.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Link prop tipi, mağaza sahiplerinin navigasyon linkleri oluşturmasını sağlar. Bu link, temadaki başka bir sayfaya ya da harici bir adrese yönlendirmek için kullanılabilir. Mağaza sahibinden tek bir link isteyebileceğiniz gibi, navigasyon menüsü yapısı oluşturmak için iç içe alt linkler de isteyebilirsiniz.

Başka bir sayfaya yönlendiren bir buton gösteren basit bir component oluşturalım.

<iframe src="https://demo.arcade.software/rqnfl1lBKRYOKorSOQDI?embed" title="Link prop tipi demosu" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Link prop tipinin kendine ait bir modeli vardır: [IkasNavigationLink](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-navigation-link). Bu linkleri component'lerimizde göstermek için `@ikas/storefront` paketindeki, [next/link](https://nextjs.org/docs/api-reference/next/link) üzerine geliştirilmiş `Link` component'ini kullanırız. `next/link`, performansı artırmak için linklerin önceden yüklenmesini (prefetch) ve lazy loading'i destekler.

Component'lerinizdeki her link, ister bir `Link` prop tipinden ister [IkasProduct](https://builders.ikas.com/docs/headless-theme/api/products#ikas-product) gibi bir modelden gelsin, `Link` component'iyle kullanılmalıdır. Aksi halde Next.js routing sisteminin avantajlarını kaybedersiniz ve linkler arasında gezinirken gereksiz tam sayfa yeniden yüklemelerine neden olursunuz. Bu da temanızı ciddi şekilde yavaşlatır.

```tsx title="src/components/link-prop/index.tsx"
import { Link } from '@ikas/storefront';
import { observer } from 'mobx-react-lite';
import { LinkPropProps } from '../__generated__/types';
import styles from './style.module.css';

const LinkPropDemo: React.FC<LinkPropProps> = (props) => {
  const { link } = props;

  // Normaly it doesn't make much sense to display only a button in a component
  // This is just to demonstrate the Link prop type
  return (
    <div className={styles.container}>
      <Link href={link.href} passHref>
        <a className={styles.button}>{link.label}</a>
      </Link>
      {/* {link.subLinks.map((sl) => (
        ...
      ))} */}
    </div>
  );
};

export default observer(LinkPropDemo);
```

```css title="src/components/link-prop/style.module.css"
.container {
  padding: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 8px 12px;
  background-color: #6f55ff;
  color: white;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}
```

## Programatik navigasyon [#programmatic-navigation]

Belirli bir linke kod üzerinden yönlendirme yapmak istediğinizde [window.location](https://developer.mozilla.org/en-US/docs/Web/API/Window/location) nesnesini kullanmak cazip gelebilir. Ancak rotayı değiştirmek için `window.location` kullanırsanız, mağaza sahipleri tema editörünün önizlemesinde linklerinize tıkladığında önizleme URL'i değişir ve temanızdaki prop'ları düzenleyemez hale gelirler. Bunu önlemek ve tüm routing'i Next.js'e bırakmak için, yeni bir URL'e programatik olarak yönlendirme yaparken [next/router](https://nextjs.org/docs/api-reference/next/router) kullanmanız gerekir.

- [router.push](https://nextjs.org/docs/api-reference/next/router#routerpush)
- [router.replace](https://nextjs.org/docs/api-reference/next/router#routerreplace)

## Özet [#summary]

Link prop değeri, mağaza sahiplerinin mağazaları için navigasyon oluşturmasını sağlar. Mağaza sahipleri alt linkler, harici linkler, belirli bir ürün ya da kategori sayfasına giden linkler veya belirli bir sayfanın belirli bir bölümüne giden linkler oluşturabilir.

Linklerin iç içe kullanılmasına izin verip vermeyeceğiniz ve kaç seviyeye kadar destekleyeceğiniz size kalmıştır. Bir header component'i için navigasyon menüsü geliştiriyorsanız en az 2 ya da 3 seviye iç içe linki desteklemek isteyebilirsiniz. Şu anda linkler için bir iç içe geçme seviyesi sınırı yoktur; sınırı component'iniz belirler.

<Callout type="info" title="Seviye sınırı">
İlerleyen bir sürümde, iç içe geçme seviyesini sınırlamak için `Link` prop tipine `maxSubLinkLevel` gibi ek bir doğrulama özelliği eklenebilir.
</Callout>