@intlayer/docs 8.11.3 → 8.12.0-canary.0

package/blog/ru/i18n_using_next-intl.md

@@ -72,6 +72,7 @@ className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-
 title="Демонстрация CodeSandbox - Как интернационализировать ваше приложение с помощью Intlayer"  
 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"  
 loading="lazy"
+/>
 
 > См. [Шаблон приложения](https://github.com/aymericzip/next-intl-template) на GitHub.
 
@@ -107,7 +108,9 @@ loading="lazy"
         └── ServerComponent.tsx
 ```
 
-### Шаг 1: Установка зависимостей
+<Steps>
+
+<Step number={1} title="Установка зависимостей">
 
 Установите необходимые пакеты с помощью npm:
 
@@ -125,7 +128,9 @@ yarn add next-intl
 
 - **next-intl**: Основная библиотека интернационализации для Next.js App Router, предоставляющая хуки, серверные функции и клиентские провайдеры для управления переводами.
 
-### Шаг 2: Настройка проекта
+</Step>
+
+<Step number={2} title="Настройка проекта">
 
 Создайте файл конфигурации, который определяет поддерживаемые локали и настраивает конфигурацию запросов next-intl. Этот файл служит единственным источником правды для вашей настройки i18n и обеспечивает типобезопасность во всём приложении.
 
@@ -210,7 +215,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Шаг 3: Определение динамических маршрутов локалей
+</Step>
+
+<Step number={3} title="Определение динамических маршрутов локалей">
 
 Настройте динамическую маршрутизацию для локалей, создав каталог `[locale]` в вашей папке приложения. Это позволяет Next.js обрабатывать маршрутизацию на основе локали, где каждая локаль становится сегментом URL (например, `/en/about`, `/fr/about`).
 
@@ -299,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### Шаг 4: Создайте файлы переводов
+</Step>
+
+<Step number={4} title="Создайте файлы переводов">
 
 Создайте JSON-файлы для каждой локали и пространства имён. Такая структура позволяет логично организовать переводы и загружать только то, что необходимо для каждой страницы.
 
@@ -341,7 +350,9 @@ export default async function AboutPage({
 }
 ```
 
-### Шаг 5: Используйте переводы на своих страницах
+</Step>
+
+<Step number={5} title="Используйте переводы на своих страницах">
 
 Создайте компонент страницы, который загружает переводы на сервере и передает их как серверным, так и клиентским компонентам. Это гарантирует, что переводы загружены до рендеринга и предотвращает мерцание контента.
 
@@ -392,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### Шаг 6: Использование переводов в клиентских компонентах
+</Step>
+
+<Step number={6} title="Использование переводов в клиентских компонентах">
 
 Клиентские компоненты могут использовать хуки `useTranslations` и `useFormatter` для доступа к переводам и функциям форматирования. Эти хуки читают данные из контекста `NextIntlClientProvider`.
 
@@ -428,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Шаг 7: Использование переводов в серверных компонентах
+</Step>
+
+<Step number={7} title="Использование переводов в серверных компонентах">
 
 Серверные компоненты не могут использовать React хуки, поэтому они получают переводы и форматтеры через props от родительских компонентов. Такой подход сохраняет серверные компоненты синхронными и позволяет вкладывать их внутрь клиентских компонентов.
 
@@ -460,9 +475,9 @@ const ServerComponent = ({
 
 > В вашем компоненте страницы/макета используйте `getTranslations` и `getFormatter` из `next-intl/server` для предварительного вычисления переводов и форматирования, затем передавайте их как пропсы в серверные компоненты.
 
----
+</Step>
 
-### (Необязательно) Шаг 8: Изменение языка вашего контента
+<Step number={8} title="Изменение языка вашего контента" isOptional={true}>
 
 Чтобы изменить язык вашего контента с помощью next-intl, отображайте ссылки с учетом локали, которые указывают на тот же путь, но с переключением локали. Провайдер автоматически переписывает URL, поэтому вам нужно лишь указать текущий маршрут.
 
@@ -534,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Необязательно) Шаг 9: Использование локализованного компонента Link
+</Step>
+
+<Step number={9} title="Использование локализованного компонента Link" isOptional={true}>
 
 `next-intl` предоставляет подпакет `next-intl/navigation`, который содержит локализованный компонент ссылки, автоматически применяющий активную локаль. Мы уже вынесли его для вас в файл `@/i18n`, так что вы можете использовать его следующим образом:
 
@@ -544,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (Необязательно) Шаг 10: Доступ к активной локали внутри Server Actions
+</Step>
+
+<Step number={10} title="Доступ к активной локали внутри Server Actions" isOptional={true}>
 
 Server Actions могут читать текущую локаль с помощью `next-intl/server`. Это полезно для отправки локализованных писем или сохранения языковых предпочтений вместе с отправленными данными.
 
@@ -567,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` читает локаль, установленную прокси `next-intl`, поэтому работает в любом месте на сервере: Route Handlers, Server Actions и edge functions.
 
-### (Опционально) Шаг 11: Интернационализация ваших метаданных
+</Step>
+
+<Step number={11} title="Интернационализация ваших метаданных" isOptional={true}>
 
 Перевод контента важен, но главная цель интернационализации, сделать ваш сайт более заметным для всего мира. I18n, это невероятный рычаг для улучшения видимости вашего сайта через правильное SEO.
 
@@ -606,7 +627,9 @@ export async function generateMetadata({
 // ... Остальная часть кода страницы
 ```
 
-### (Необязательно) Шаг 12: Интернационализация вашей карты сайта
+</Step>
+
+<Step number={12} title="Интернационализация вашей карты сайта" isOptional={true}>
 
 Создайте sitemap, который включает все локализованные версии ваших страниц. Это помогает поисковым системам обнаруживать и индексировать все языковые версии вашего контента.
 
@@ -660,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Необязательно) Шаг 13: Интернационализация вашего файла robots.txt
+</Step>
+
+<Step number={13} title="Интернационализация вашего файла robots.txt" isOptional={true}>
 
 Создайте файл robots.txt, который корректно обрабатывает все языковые версии ваших защищённых маршрутов. Это гарантирует, что поисковые системы не будут индексировать страницы админки или панели управления на любом языке.
 
@@ -693,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Необязательно) Шаг 14: Настройка прокси для маршрутизации по локали
+</Step>
+
+<Step number={14} title="Настройка прокси для маршрутизации по локали" isOptional={true}>
 
 Создайте прокси, который автоматически определяет предпочитаемую пользователем локаль и перенаправляет его на соответствующий URL с префиксом локали. next-intl предоставляет удобную функцию прокси, которая обрабатывает это автоматически.
 
@@ -713,7 +740,9 @@ export const config = {
 };
 ```
 
-### (Optional) Step 15: Настройка типов TypeScript для локали
+</Step>
+
+<Step number={15} title="Настройка типов TypeScript для локали" isOptional={true}>
 
 Настройка TypeScript поможет вам получить автодополнение и типобезопасность для ваших ключей.
 
@@ -739,7 +768,9 @@ declare module "next-intl" {
 
 Этот код использует расширение модуля (Module Augmentation), чтобы добавить локали и сообщения в тип AppConfig из next-intl.
 
-### (Опционально) Шаг 15: Автоматизация переводов с помощью Intlayer
+</Step>
+
+<Step number={16} title="Автоматизация переводов с помощью Intlayer" isOptional={true}>
 
 Intlayer, это **бесплатная** и **открытая** библиотека, предназначенная для помощи в процессе локализации вашего приложения. В то время как next-intl отвечает за загрузку и управление переводами, Intlayer помогает автоматизировать рабочий процесс перевода.
 
@@ -764,3 +795,7 @@ Intlayer позволяет вам:
   Intlayer предлагает бесплатный визуальный редактор для редактирования вашего контента с помощью визуального интерфейса. Узнайте больше о [визуальном редактировании ваших переводов](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md).
 
 И многое другое. Чтобы узнать обо всех функциях, предоставляемых Intlayer, пожалуйста, обратитесь к [документации о преимуществах Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>

package/blog/tr/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Uygulamaya başlamadan önce, takip etmeniz gereken bazı uygulamalar şunlardı
   title="Demo CodeSandbox - Intlayer kullanarak uygulamanızı nasıl uluslararasılaştırırsınız"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHub'da [Uygulama Şablonuna](https://github.com/aymericzip/next-i18next-template) bakın.
 
@@ -116,7 +117,9 @@ Oluşturacağımız proje yapısı şöyle olacak:
         └── ServerComponent.tsx
 ```
 
-### Adım 1: Bağımlılıkları Yükleyin
+<Steps>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 Gerekli paketleri npm kullanarak yükleyin:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: i18next için React bağlayıcıları; client bileşenler için `useTranslation` gibi hook'lar sağlar.
 - **i18next-resources-to-backend**: Çeviri dosyalarının dinamik yüklenmesini sağlayan bir eklenti; sadece ihtiyacınız olan namespace'leri yüklemenize olanak tanır.
 
-### Adım 2: Projenizi Yapılandırın
+</Step>
+
+<Step number={2} title="Projenizi Yapılandırın">
 
 Desteklenen yerel ayarları, varsayılan yerel ayarı ve URL yerelleştirmesi için yardımcı fonksiyonları tanımlamak üzere bir yapılandırma dosyası oluşturun. Bu dosya, i18n kurulumunuz için tek gerçek kaynak olarak hizmet eder ve uygulamanız genelinde tür güvenliğini sağlar.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Adım 3: Çeviri Ad Alanlarını Merkezileştir
+</Step>
+
+<Step number={3} title="Çeviri Ad Alanlarını Merkezileştir">
 
 Uygulamanızın sunduğu her namespace için tek bir doğruluk kaynağı oluşturun. Bu listeyi yeniden kullanmak, sunucu, istemci ve araç kodlarının senkronize kalmasını sağlar ve çeviri yardımcıları için güçlü tip desteğini açar.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Adım 4: TypeScript ile Çeviri Anahtarlarını Güçlü Tip Yapmak
+</Step>
+
+<Step number={4} title="TypeScript ile Çeviri Anahtarlarını Güçlü Tip Yapmak">
 
 `i18next`'i, kanonik dil dosyalarınızı (genellikle İngilizce) işaret edecek şekilde genişletin. TypeScript böylece her namespace için geçerli anahtarları çıkarır ve `t()` çağrıları baştan sona kontrol edilir.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Adım 5: Sunucu Tarafı i18n Başlatmasını Kurun
+</Step>
+
+<Step number={5} title="Sunucu Tarafı i18n Başlatmasını Kurun">
 
 Sunucu bileşenleri için çevirileri yükleyen bir sunucu tarafı başlatma fonksiyonu oluşturun. Bu fonksiyon, sunucu tarafı render için ayrı bir i18next örneği oluşturur ve çevirilerin render edilmeden önce yüklendiğinden emin olur.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Adım 6: İstemci Tarafı i18n Sağlayıcısı Oluşturun
+</Step>
+
+<Step number={6} title="İstemci Tarafı i18n Sağlayıcısı Oluşturun">
 
 Uygulamanızı i18next bağlamı ile saran bir istemci bileşen sağlayıcısı oluşturun. Bu sağlayıcı, sunucudan önceden yüklenmiş çevirileri alarak çevrilmemiş içeriğin anlık görünmesini (FOUC) önler ve tekrar eden veri çekimini engeller.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Adım 7: Dinamik Yerel Yönlendirmeleri Tanımla
+</Step>
+
+<Step number={7} title="Dinamik Yerel Yönlendirmeleri Tanımla">
 
 Uygulama klasörünüzde `[locale]` adlı bir dizin oluşturarak yerel bazlı dinamik yönlendirmeleri ayarlayın. Bu, Next.js'in her yerelin URL segmenti olarak işlendiği yerel bazlı yönlendirmeleri yönetmesini sağlar (örneğin, `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Adım 8: Çeviri Dosyalarınızı Oluşturun
+</Step>
+
+<Step number={8} title="Çeviri Dosyalarınızı Oluşturun">
 
 Her locale ve namespace için JSON dosyaları oluşturun. Bu yapı, çevirileri mantıklı şekilde organize etmenize ve her sayfa için sadece ihtiyacınız olanları yüklemenize olanak sağlar.
 
@@ -493,7 +510,9 @@ Her locale ve namespace için JSON dosyaları oluşturun. Bu yapı, çevirileri
 }
 ```
 
-### Adım 9: Sayfalarınızda Çevirileri Kullanın
+</Step>
+
+<Step number={9} title="Sayfalarınızda Çevirileri Kullanın">
 
 Sunucuda i18next'i başlatan ve çevirileri hem sunucu hem de istemci bileşenlerine aktaran bir sayfa bileşeni oluşturun. Bu, çevirilerin render edilmeden önce yüklenmesini sağlar ve içerik yanıp sönmesini engeller.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Adım 10: İstemci Bileşenlerinde Çevirileri Kullanma
+</Step>
+
+<Step number={10} title="İstemci Bileşenlerinde Çevirileri Kullanma">
 
 İstemci bileşenleri, çevirilere erişmek için `useTranslation` kancasını kullanabilir. Bu kanca, çeviri fonksiyonuna ve i18n örneğine erişim sağlar, böylece içeriği çevirebilir ve yerel bilgisine ulaşabilirsiniz.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Adım 11: Sunucu Bileşenlerinde Çevirileri Kullanma
+</Step>
+
+<Step number={11} title="Sunucu Bileşenlerinde Çevirileri Kullanma">
 
 Sunucu bileşenleri React hook'larını kullanamaz, bu yüzden çevirileri üst bileşenlerinden props olarak alırlar. Bu yaklaşım sunucu bileşenlerinin senkron kalmasını sağlar ve onların istemci bileşenlerinin içinde iç içe geçmesine izin verir.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (İsteğe Bağlı) Adım 12: İçeriğinizin Dilini Değiştirme
+<Step number={12} title="İçeriğinizin Dilini Değiştirme" isOptional={true}>
 
 Next.js'te içeriğinizin dilini değiştirmek için önerilen yöntem, locale önekli URL'ler ve Next.js linklerini kullanmaktır. Aşağıdaki örnek, mevcut locale'yi rotadan okur, pathname'den çıkarır ve mevcut her locale için bir bağlantı render eder.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (İsteğe Bağlı) Adım 13: Yerelleştirilmiş bir Link bileşeni oluşturun
+</Step>
+
+<Step number={13} title="Yerelleştirilmiş bir Link bileşeni oluşturun" isOptional={true}>
 
 Uygulamanızda yerelleştirilmiş URL'leri yeniden kullanmak, gezinmenin tutarlı ve SEO dostu kalmasını sağlar. Dahili rotaların önüne aktif locale'yi ekleyen, dış URL'leri ise dokunmadan bırakan küçük bir yardımcı ile `next/link`'i sarmalayın.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > İpucu: `LocalizedLink` bir drop-in replacement (yerine geçme) olduğundan, ithalatları değiştirerek ve bileşenin yerel dil URL'lerini yönetmesine izin vererek kademeli olarak geçiş yapın.
 
-### (İsteğe Bağlı) Adım 14: Server Actions içinde aktif locale erişimi
+</Step>
+
+<Step number={14} title="Server Actions içinde aktif locale erişimi" isOptional={true}>
 
 Server Actions genellikle e-postalar, kayıt tutma veya üçüncü taraf entegrasyonları için geçerli locale ihtiyaç duyar. Proxy'niz tarafından ayarlanan locale çerezi ile `Accept-Language` başlığını yedek olarak birleştirin.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Yardımcı fonksiyon Next.js çerezlerine ve başlıklara dayandığı için, Route Handlers, Server Actions ve diğer yalnızca sunucu bağlamlarında çalışır.
 
-### (İsteğe Bağlı) Adım 15: Meta Verilerinizi Uluslararasılaştırın
+</Step>
+
+<Step number={15} title="Meta Verilerinizi Uluslararasılaştırın" isOptional={true}>
 
 İçeriği çevirmek önemlidir, ancak uluslararasılaştırmanın asıl amacı web sitenizi dünyaya daha görünür hale getirmektir. I18n, doğru SEO ile web sitenizin görünürlüğünü artırmak için inanılmaz bir araçtır.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (İsteğe Bağlı) Adım 16: Site Haritanızı Uluslararasılaştırın
+</Step>
+
+<Step number={16} title="Site Haritanızı Uluslararasılaştırın" isOptional={true}>
 
 Sayfalarınızın tüm yerel sürümlerini içeren bir site haritası oluşturun. Bu, arama motorlarının içeriğinizin tüm dil sürümlerini keşfetmesine ve dizine eklemesine yardımcı olur.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (İsteğe Bağlı) Adım 17: robots.txt Dosyanızı Uluslararasılaştırın
+</Step>
+
+<Step number={17} title="robots.txt Dosyanızı Uluslararasılaştırın" isOptional={true}>
 
 Korumalı rotalarınızın tüm yerel sürümlerini doğru şekilde yöneten bir robots.txt dosyası oluşturun. Bu, arama motorlarının yönetici veya gösterge paneli sayfalarını hiçbir dilde dizine eklememesini sağlar.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (İsteğe Bağlı) Adım 18: Yerel Yönlendirme için Middleware Kurulumu
+</Step>
+
+<Step number={18} title="Yerel Yönlendirme için Middleware Kurulumu" isOptional={true}>
 
 Kullanıcının tercih ettiği dili otomatik olarak algılayan ve onları uygun yerel ön ekli URL'ye yönlendiren bir proxy oluşturun. Bu, kullanıcı deneyimini tercih ettikleri dilde içerik göstererek iyileştirir.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (İsteğe Bağlı) Adım 19: Çevirilerinizi Intlayer ile Otomatikleştirin
+</Step>
+
+<Step number={19} title="Çevirilerinizi Intlayer ile Otomatikleştirin" isOptional={true}>
 
 Intlayer, uygulamanızdaki yerelleştirme sürecine yardımcı olmak için tasarlanmış **ücretsiz** ve **açık kaynaklı** bir kütüphanedir. i18next çeviri yükleme ve yönetimini sağlarken, Intlayer çeviri iş akışını otomatikleştirmenize yardımcı olur.
 
@@ -1084,3 +1121,7 @@ Intlayer size şunları sağlar:
   Intlayer, içeriğinizi görsel bir editör kullanarak düzenlemeniz için ücretsiz bir görsel editör sunar. [Çevirilerinizi görsel olarak düzenleme](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) hakkında daha fazla bilgi edinin.
 
 Ve daha fazlası. Intlayer tarafından sunulan tüm özellikleri keşfetmek için lütfen [Intlayer'ın Önemi dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/interest_of_intlayer.md) bakınız.
+
+</Step>
+
+</Steps>

package/blog/tr/i18n_using_next-intl.md

@@ -109,7 +109,9 @@ Oluşturacağımız proje yapısı şöyle:
         └── ServerComponent.tsx
 ```
 
-### Adım 1: Bağımlılıkları Yükleyin
+<Steps>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 Gerekli paketleri npm kullanarak yükleyin:
 
@@ -127,7 +129,9 @@ yarn add next-intl
 
 - **next-intl**: Çevirileri yönetmek için hooklar, sunucu fonksiyonları ve istemci sağlayıcıları sunan Next.js App Router için temel uluslararasılaştırma kütüphanesi.
 
-### Adım 2: Projenizi Yapılandırın
+</Step>
+
+<Step number={2} title="Projenizi Yapılandırın">
 
 Desteklenen yerel ayarları tanımlayan ve next-intl'in istek yapılandırmasını ayarlayan bir yapılandırma dosyası oluşturun. Bu dosya, i18n kurulumunuz için tek gerçek kaynak olarak hizmet eder ve uygulamanız genelinde tür güvenliğini sağlar.
 
@@ -211,7 +215,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### Adım 3: Dinamik Yerel Rotaları Tanımlayın
+</Step>
+
+<Step number={3} title="Dinamik Yerel Rotaları Tanımlayın">
 
 Yerel ayarlar için dinamik yönlendirmeyi, uygulama klasörünüzde bir `[locale]` dizini oluşturarak ayarlayın. Bu, Next.js'in her yerel ayarın bir URL segmenti haline geldiği yerel ayar tabanlı yönlendirmeyi (örneğin, `/en/about`, `/fr/about`) yönetmesini sağlar.
 
@@ -300,7 +306,9 @@ export default async function AboutPage({
 }
 ```
 
-### Adım 4: Çeviri Dosyalarınızı Oluşturun
+</Step>
+
+<Step number={4} title="Çeviri Dosyalarınızı Oluşturun">
 
 Her locale ve namespace için JSON dosyaları oluşturun. Bu yapı, çevirileri mantıklı bir şekilde organize etmenizi ve her sayfa için yalnızca ihtiyacınız olanları yüklemenizi sağlar.
 
@@ -342,7 +350,9 @@ Her locale ve namespace için JSON dosyaları oluşturun. Bu yapı, çevirileri
 }
 ```
 
-### Adım 5: Çevirileri Sayfalarınızda Kullanın
+</Step>
+
+<Step number={5} title="Çevirileri Sayfalarınızda Kullanın">
 
 Sunucuda çevirileri yükleyen ve bunları hem sunucu hem de istemci bileşenlerine aktaran bir sayfa bileşeni oluşturun. Bu, çevirilerin render edilmeden önce yüklenmesini sağlar ve içerik yanıp sönmesini önler.
 
@@ -393,7 +403,9 @@ export default async function AboutPage({
 }
 ```
 
-### Adım 6: İstemci Bileşenlerinde Çevirileri Kullanma
+</Step>
+
+<Step number={6} title="İstemci Bileşenlerinde Çevirileri Kullanma">
 
 İstemci bileşenleri, çevirilere ve biçimlendirme işlevlerine erişmek için `useTranslations` ve `useFormatter` hook'larını kullanabilir. Bu hook'lar `NextIntlClientProvider` bağlamından (context) okuma yapar.
 
@@ -429,7 +441,9 @@ const ClientComponent = () => {
 };
 ```
 
-### Adım 7: Sunucu Bileşenlerinde Çevirileri Kullanma
+</Step>
+
+<Step number={7} title="Sunucu Bileşenlerinde Çevirileri Kullanma">
 
 Sunucu bileşenleri React hook'larını kullanamaz, bu yüzden çeviriler ve biçimlendiriciler üst bileşenlerinden props olarak alınır. Bu yaklaşım sunucu bileşenlerini senkron tutar ve onların istemci bileşenlerinin içinde iç içe yerleştirilmesine izin verir.
 
@@ -461,9 +475,9 @@ const ServerComponent = ({
 
 > Sayfa/düzeninizde, çevirileri ve biçimlendirmeyi önceden hesaplamak için `next-intl/server`'dan `getTranslations` ve `getFormatter` kullanın, ardından bunları props olarak sunucu bileşenlerine iletin.
 
----
+</Step>
 
-### (İsteğe Bağlı) Adım 8: İçeriğinizin dilini değiştirin
+<Step number={8} title="İçeriğinizin dilini değiştirin" isOptional={true}>
 
 next-intl ile içeriğinizin dilini değiştirmek için, aynı yol adına işaret eden ve yerel ayarı değiştiren yerel-dil farkında bağlantılar render edin. Sağlayıcı URL'leri otomatik olarak yeniden yazar, bu yüzden sadece mevcut rotayı hedeflemeniz yeterlidir.
 
@@ -535,7 +549,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (İsteğe Bağlı) Adım 9: Yerelleştirilmiş Link bileşenini kullanma
+</Step>
+
+<Step number={9} title="Yerelleştirilmiş Link bileşenini kullanma" isOptional={true}>
 
 `next-intl`, aktif locale otomatik olarak uygulayan yerelleştirilmiş bir link bileşeni içeren `next-intl/navigation` alt paketini sağlar. Bunu sizin için `@/i18n` dosyasında çıkardık, böylece şu şekilde kullanabilirsiniz:
 
@@ -545,7 +561,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (İsteğe Bağlı) Adım 10: Server Actions içinde aktif locale erişimi
+</Step>
+
+<Step number={10} title="Server Actions içinde aktif locale erişimi" isOptional={true}>
 
 Server Actions, `next-intl/server` kullanarak mevcut locale'i okuyabilir. Bu, yerelleştirilmiş e-postalar göndermek veya gönderilen verilerle birlikte dil tercihlerini saklamak için faydalıdır.
 
@@ -568,7 +586,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale`, `next-intl` proxy tarafından ayarlanan locale'i okur, bu yüzden sunucudaki her yerde çalışır: Route Handlers, Server Actions ve edge fonksiyonları.
 
-### (İsteğe Bağlı) Adım 11: Meta Verilerinizi Uluslararasılaştırın
+</Step>
+
+<Step number={11} title="Meta Verilerinizi Uluslararasılaştırın" isOptional={true}>
 
 İçeriği çevirmek önemlidir, ancak uluslararasılaştırmanın asıl amacı web sitenizi dünyaya daha görünür kılmaktır. I18n, uygun SEO ile web sitenizin görünürlüğünü artırmak için inanılmaz bir kaldıraçtır.
 
@@ -607,7 +627,9 @@ export async function generateMetadata({
 // ... Sayfanın geri kalan kodu
 ```
 
-### (İsteğe bağlı) Adım 12: Site Haritanızı Uluslararasılaştırın
+</Step>
+
+<Step number={12} title="Site Haritanızı Uluslararasılaştırın" isOptional={true}>
 
 Sayfalarınızın tüm yerel sürümlerini içeren bir sitemap oluşturun. Bu, arama motorlarının içeriğinizin tüm dil sürümlerini keşfetmesine ve dizine eklemesine yardımcı olur.
 
@@ -661,7 +683,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (İsteğe Bağlı) Adım 13: robots.txt Dosyanızı Uluslararasılaştırın
+</Step>
+
+<Step number={13} title="robots.txt Dosyanızı Uluslararasılaştırın" isOptional={true}>
 
 Korunan rotalarınızın tüm yerel sürümlerini düzgün şekilde yöneten bir robots.txt dosyası oluşturun. Bu, arama motorlarının yönetici veya kontrol paneli sayfalarını hiçbir dilde dizine eklememesini sağlar.
 
@@ -694,7 +718,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (İsteğe Bağlı) Adım 14: Yerel Yönlendirme için Proxy Kurulumu
+</Step>
+
+<Step number={14} title="Yerel Yönlendirme için Proxy Kurulumu" isOptional={true}>
 
 Kullanıcının tercih ettiği yereli otomatik olarak algılayan ve onları uygun yerel ön ekli URL'ye yönlendiren bir proxy oluşturun. next-intl, bunu otomatik olarak halleden kullanışlı bir proxy fonksiyonu sağlar.
 
@@ -714,7 +740,9 @@ export const config = {
 };
 ```
 
-### (İsteğe Bağlı) Adım 15: Locale için TypeScript Tiplerini Ayarlama
+</Step>
+
+<Step number={15} title="Locale için TypeScript Tiplerini Ayarlama" isOptional={true}>
 
 TypeScript kurulumu, anahtarlarınız için otomatik tamamlama ve tip güvenliği elde etmenize yardımcı olur.
 
@@ -740,7 +768,9 @@ declare module "next-intl" {
 
 Bu kod, Module Augmentation kullanarak locales ve messages öğelerini next-intl AppConfig türüne ekleyecektir.
 
-### (İsteğe Bağlı) Adım 15: Çevirilerinizi Intlayer ile Otomatikleştirin
+</Step>
+
+<Step number={16} title="Çevirilerinizi Intlayer ile Otomatikleştirin" isOptional={true}>
 
 Intlayer, uygulamanızdaki yerelleştirme sürecine yardımcı olmak için tasarlanmış **ücretsiz** ve **açık kaynaklı** bir kütüphanedir. next-intl çeviri yükleme ve yönetimini üstlenirken, Intlayer çeviri iş akışını otomatikleştirmenize yardımcı olur.
 
@@ -765,3 +795,7 @@ Intlayer size şunları sağlar:
   Intlayer, içeriğinizi görsel bir editör kullanarak düzenlemenizi sağlayan ücretsiz bir görsel editör sunar. Çevirilerinizi görsel olarak düzenlemek hakkında daha fazla bilgi için [visual editing your translations](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) sayfasını ziyaret edin.
 
 Ve daha fazlası. Intlayer tarafından sunulan tüm özellikleri keşfetmek için lütfen [Interest of Intlayer documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/interest_of_intlayer.md) dokümantasyonuna bakınız.
+
+</Step>
+
+</Steps>