{content.getStarted.pageLink}
>
);
};
const Page: NextPage = async () => {
const locale = await getLocale();
return (
);
};
````
- **`IntlayerClientProvider`** istemci tarafı bileşenlerine locale sağlamak için kullanılır. Layout dahil herhangi bir üst bileşene yerleştirilebilir. Ancak, Next.js'in layout kodunu sayfalar arasında paylaştığı ve bu nedenle daha verimli olduğu için bir layout içine yerleştirilmesi önerilir. `IntlayerClientProvider`'ı layout'ta kullanarak, her sayfa için yeniden oluşturulmasını önleyerek performansı artırır ve uygulamanız boyunca tutarlı bir yerelleştirme bağlamı sağlar.
- **`IntlayerServerProvider`** sunucu çocuklarına locale sağlamak için kullanılır. Layout içinde ayarlanamaz.
> Layout ve page ortak bir server context paylaşamaz çünkü server context sistemi her isteğe özel bir veri deposuna (React'in cache mekanizması aracılığıyla) dayanır, bu da uygulamanın farklı segmentleri için her "context"in yeniden oluşturulmasına neden olur. Sağlayıcıyı paylaşılan bir layout'a yerleştirmek bu izolasyonu bozacak ve server bileşenlerinize server context değerlerinin doğru şekilde iletilmesini engelleyecektir.
```tsx {4,7} fileName="src/components/clientComponentExample/ClientComponentExample.tsx" codeFormat="typescript"
"use client";
import type { FC } from "react";
import { useIntlayer } from "next-intlayer";
export const ClientComponentExample: FC = () => {
const content = useIntlayer("client-component-example"); // İlgili içerik tanımını oluştur
return (
);
};
```
> İçeriğinizi bir `string` özniteliğinde kullanmak istiyorsanız; ör. `alt`, `title`, `href`, `aria-label` vb., fonksiyonun değerini çağırmalısınız, örneğin:
> ```jsx
>
> ```
> `useIntlayer` hook'u hakkında daha fazla bilgi edinmek için [belgelere](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/next-intlayer/useIntlayer.md) bakın.
### (İsteğe Bağlı) Adım 7: Locale Algılama için Proxy'yu Yapılandırma
Kullanıcının tercih ettiği locale'i algılamak için proxy'yu yapılandırın:
```typescript fileName="src/proxy.ts" codeFormat="typescript"
export { intlayerProxy as proxy } from "next-intlayer/proxy";
export const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
```
```javascript fileName="src/proxy.mjs" codeFormat="esm"
export { intlayerProxy as proxy } from "next-intlayer/proxy";
export const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
```
```javascript fileName="src/proxy.cjs" codeFormat="commonjs"
const { intlayerProxy } = require("next-intlayer/proxy");
const config = {
matcher:
"/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",
};
module.exports = { proxy: intlayerProxy, config };
```
> `intlayerProxy`, kullanıcının tercih ettiği yerel dili algılamak ve onları [yapılandırmada](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) belirtildiği gibi uygun URL'ye yönlendirmek için kullanılır. Ayrıca, kullanıcının tercih ettiği yerel dili bir çerezde kaydetmeyi sağlar.
> Birden fazla proxy'yi birbirine zincirlemeniz gerekiyorsa (örneğin, kimlik doğrulama veya özel proxy'lerle `intlayerProxy`), Intlayer artık `multipleProxies` adlı bir yardımcı sağlar.
```ts
import { multipleProxies, intlayerProxy } from "next-intlayer/proxy";
import { customProxy } from "@utils/customProxy";
export const proxy = multipleProxies([intlayerProxy, customProxy]);
```
### (İsteğe Bağlı) Adım 8: İçeriğinizin dilini değiştirin
Next.js'te içeriğinizin dilini değiştirmek için önerilen yol, kullanıcıları uygun yerelleştirilmiş sayfaya yönlendirmek amacıyla `Link` bileşenini kullanmaktır. `Link` bileşeni sayfanın önceden getirilmesini (prefetching) sağlar; bu da tam sayfa yeniden yüklemesini önlemeye yardımcı olur.
```tsx fileName="src/components/localeSwitcher/LocaleSwitcher.tsx" codeFormat="typescript"
"use client";
import type { FC } from "react";
import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
import { useLocale } from "next-intlayer";
export const LocaleSwitcher: FC = () => {
const { locale, availableLocales, setLocale } = useLocale({
onChange: () => window.location.reload(),
});
return (
);
};
```
> Alternatif bir yol, `useLocale` hook'unun sağladığı `setLocale` fonksiyonunu kullanmaktır. Bu fonksiyon sayfanın prefetching yapılmasına izin vermez. Daha fazla bilgi için [`useLocale` hook dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/next-intlayer/useLocale.md) bakın.
> Dokümantasyon referansları:
>
> - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/next-intlayer/useLocale.md)
> - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/next-intlayer/getLocaleName.md)
> - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/next-intlayer/getLocalizedUrl.md)
> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/intlayer/getHTMLTextDir.md)
> - [`hrefLang` özniteliği](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
> - [`lang` özniteliği](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
> - [`dir` özniteliği](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
> - [`aria-current` özniteliği](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
### (İsteğe Bağlı) Adım 9: Sunucu eylemlerinde geçerli yereli (locale) alın
Eğer bir sunucu eylemi içinde aktif yerel ayara (örn. e-postaları yerelleştirmek veya yerel duyarlı mantık çalıştırmak için) ihtiyacınız varsa, `next-intlayer/server` içinden `getLocale`'i çağırın:
```tsx fileName="src/app/actions/getLocale.ts" codeFormat="typescript"
"use server";
import { getLocale } from "next-intlayer/server";
export const myServerAction = async () => {
const locale = await getLocale();
// locale ile bir şeyler yap
};
```
> `getLocale` fonksiyonu kullanıcının yerel ayarını belirlemek için kademeli bir strateji izler:
>
> 1. Öncelikle, proksi tarafından ayarlanmış olabilecek bir locale değerini kontrol etmek için istek başlıklarını (request headers) kontrol eder
> 2. Başlıklarda locale bulunamazsa, çerezlerde (cookies) saklanan bir locale arar
> 3. Çerez bulunamazsa, kullanıcının tarayıcı ayarlarından tercih edilen dili tespit etmeye çalışır
> 4. Son çare olarak uygulamanın yapılandırılmış varsayılan locale değerine döner
>
> Bu, kullanılabilir bağlama göre en uygun yerelin seçilmesini sağlar.
### (İsteğe bağlı) Adım 10: Paket boyutunuzu optimize edin
`next-intlayer` kullanıldığında, sözlükler varsayılan olarak her sayfanın bundle'ına dahil edilir. Paket boyutunu optimize etmek için Intlayer, makrolar kullanarak `useIntlayer` çağrılarını akıllıca değiştiren isteğe bağlı bir SWC eklentisi sağlar. Bu, sözlüklerin yalnızca bunları gerçekten kullanan sayfaların bundle'larına dahil edilmesini sağlar.
Bu optimizasyonu etkinleştirmek için `@intlayer/swc` paketini yükleyin. Yüklendikten sonra `next-intlayer` eklentiyi otomatik olarak algılar ve kullanır:
```bash packageManager="npm"
npm install @intlayer/swc --save-dev
npx intlayer init
```
```bash packageManager="pnpm"
pnpm add @intlayer/swc --save-dev
pnpm intlayer init
```
```bash packageManager="yarn"
yarn add @intlayer/swc --save-dev
yarn intlayer init
```
```bash packageManager="bun"
bun add @intlayer/swc --dev
bunx intlayer init
```
> Not: Bu optimizasyon yalnızca Next.js 13 ve üzeri için kullanılabilir.
> Not: Bu paket varsayılan olarak yüklenmez çünkü SWC eklentileri Next.js üzerinde hâlâ deneysel durumdadır. İleride değişebilir.
> Not: Eğer seçeneği `importMode: 'dynamic'` veya `importMode: 'live'` olarak ayarlarsanız, bu Suspense'e dayanır; bu nedenle `useIntlayer` çağrılarınızı bir `Suspense` sınırı içine almanız gerekir. Bu, `useIntlayer`'ı Sayfa / Layout bileşeninizin en üst düzeyinde doğrudan kullanamayacağınız anlamına gelir.
### Turbopack'ta sözlük değişikliklerini izleme
next dev komutunu kullanarak geliştirme sunucunuz olarak Turbopack'i kullandığınızda, sözlük değişiklikleri varsayılan olarak otomatik algılanmaz.
Bu sınırlama, Turbopack'in içerik dosyalarınızdaki değişiklikleri izlemek için webpack eklentilerini paralel olarak çalıştıramamasından kaynaklanır. Bunu aşmak için geliştirme sunucusunu ve Intlayer derleme izleyicisini aynı anda çalıştırmak üzere `intlayer watch` komutunu kullanmanız gerekir.
```json5 fileName="package.json"
{
// ... Mevcut package.json yapılandırmalarınız
"scripts": {
// ... Mevcut scripts yapılandırmalarınız
"dev": "intlayer watch --with 'next dev'",
},
}
```
> Eğer next-intlayer@<=6.x.x kullanıyorsanız, Next.js 16 uygulamasının Turbopack ile doğru çalışması için `--turbopack` bayrağını tutmanız gerekir. Bu sınırlamadan kaçınmak için next-intlayer@>=7.x.x kullanmanızı öneririz.
### TypeScript'i Yapılandırma
Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı güçlendirmek için module augmentation kullanır.


TypeScript yapılandırmanızın otomatik oluşturulmuş tipleri içerdiğinden emin olun.
```json5 fileName="tsconfig.json"
{
// ... Mevcut TypeScript yapılandırmalarınız
"include": [
// ... Mevcut TypeScript yapılandırmalarınız
".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et
],
}
```
### Git Yapılandırması
Intlayer tarafından oluşturulan dosyaları yoksaymanız önerilir. Bu, bu dosyaları Git deponuza commit etmekten kaçınmanızı sağlar.
Bunu yapmak için `.gitignore` dosyanıza aşağıdaki satırları ekleyebilirsiniz:
```plaintext fileName=".gitignore"
# Intlayer tarafından oluşturulan dosyaları yoksay
.intlayer
```
### VS Code Uzantısı
Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code Uzantısını** yükleyebilirsiniz.
[VS Code Marketplace'ten Yükleyin](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
Bu uzantı şunları sağlar:
- **Otomatik tamamlama** çeviri anahtarları için.
- Eksik çeviriler için **gerçek zamanlı hata tespiti**.
- **Satır içi önizlemeler** — çevrilmiş içeriğin önizlemeleri.
- **Hızlı eylemler** — çevirileri kolayca oluşturup güncellemek için.
Daha fazla ayrıntı için uzantının nasıl kullanılacağına dair [Intlayer VS Code Extension belgelerine](https://intlayer.org/doc/vs-code-extension) bakın.
### Daha İleri
Daha ileri gitmek için [görsel editörü](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) uygulayabilir veya içeriğinizi [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_CMS.md) kullanarak dışsallaştırabilirsiniz.