Laravel ile Inertia ve React kullanarak Çok Dilli Uygulama Geliştirme: Pratik Bir Kılavuz

Laravel + Inertia + React uygulamaları geliştiriyorsanız ve çok dilli destek eklemek gerekiyorsa, doğru yerdesiniz. Bu rehberde, gerçek bir uygulamadan yola çıkarak İngilizce ve Endonezce için çok dilli desteği nasıl ekleyeceğinizi öğreneceksiniz.

<p>Bu rehber, bir muhasebe uygulamasından alındı ve gerçek üretim örneklerini kapsayacak. Hadi başlayalım.</p>

<hr/>

<h2>
    <a name="why-multilang-is-trickier-with-inertia" href="#why-multilang-is-trickier-with-inertia">
    </a>
    Inertia ile Çok Dillilik Neden Daha Karmaşık?
</h2>

<p>Geleneksel bir sunucu-üzerinde-render edilen Laravel uygulamasında çeviriler basittir; Blade görünümünde <code>__('key')</code> fonksiyonunu çağırırsınız ve Laravel her şeyi yönetir. PHP, bölgeyi bilir, stringleri render eder ve iş tamamdır.</p>

<p>Ancak Inertia + React kullanıyorsanız, <strong>görünümler tarayıcıda render edilir</strong>. Kullanıcı sayfayı gördüğünde PHP çoktan kaybolmuş olacaktır. Bu nedenle, JSX içinde <code>__()</code> fonksiyonunu çağırmak mümkün değildir; bu fonksiyon istemci tarafında mevcut değildir.</p>

<p>İhtiyacınız olan sistem:</p>

<ol>
    <li>Çeviri stringlerini tarayıcıya ulaştırmak</li>
    <li>React bileşenlerinin bu stringleri çağırmasına imkan tanımak</li>
    <li>PHP (arka uç mesajlarına) ve JavaScript (UI stringleri için) arasında bölgeyi senkronize etmek</li>
    <li>Kullanıcının dil tercihlerini oturumlar arasında saklamak</li>
</ol>

<p>Tam olarak bunları inşa edeceğiz.</p>

<hr/>

<h2>
    <a name="the-stack" href="#the-stack">
    </a>
    Teknoloji Yığını
</h2>

<ul>
    <li><strong>Laravel 12</strong> ve <strong>PHP 8.4</strong></li>
    <li><strong>Inertia v2</strong> + <strong>React 19</strong></li>
    <li><strong><a href="https://github.com/laravel-react-i18n/laravel-react-i18n" target="_blank" rel="noopener noreferrer">laravel-react-i18n</a></strong> — Laravel'in <code>lang/</code> dosyaları ile React bileşenleriniz arasında köprü</li>
</ul>

<hr/>

<h2>
    <a name="step-1-install-laravelreacti18n" href="#step-1-install-laravelreacti18n">
    </a>
    Adım 1: laravel-react-i18n Kurulumu
</h2>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>composer require laravel-lang/common

npm install laravel-react-i18n

<p>Ayrıca yapılandırmayı yayınlayın:</p>

<div class="highlight js-code-highlight">
    <pre class="highlight shell"><code>php artisan vendor:publish --tag=laravel-react-i18n-config

<p>Paket, <code>lang/</code> PHP dosyalarınızı JSON'a derleyip tarayıcıya göndermek için çalışır. Akıllıca değil mi?</p> <hr/> <h2> <a name="step-2-wire-up-the-provider-in-apptsx" href="#step-2-wire-up-the-provider-in-apptsx"> </a> Adım 2: app.tsx'de Provider'ı Bağlayın </h2> <p>Burada her şey başlıyor. <code>resources/js/app.tsx</code> dosyanız, uygulamanızın tamamını <code>LaravelReactI18nProvider</code> içinde sarmalamalı:</p> <div class="highlight js-code-highlight"> <pre class="highlight tsx"><code>// resources/js/app.tsx

import { createInertiaApp } from ‘@inertiajs/react’
import { createRoot } from ‘react-dom/client’
import { LaravelReactI18nProvider } from ‘laravel-react-i18n’

createInertiaApp({
resolve: name => {
const pages = import.meta.glob(‘./pages/*/.{jsx,tsx}’, { eager: true })
// … page resolution logic
},
setup({ el, App, props }) {
const root = createRoot(el)

// Read locale from Inertia's shared props const initialLocale = (props.initialPage.props as any).locale || 'id' root.render( <LaravelReactI18nProvider locale={initialLocale} fallbackLocale="id" files={import.meta.glob('/lang/*.json', { eager: true })} > <App {...props} /> </LaravelReactI18nProvider> ) },

<p>Burada dikkat edilmesi gereken birkaç şey:</p> <ul> <li><code>files={import.meta.glob('/lang/*.json', { eager: true })}</code> — bu, provider’a derlenmiş çeviri JSON dosyalarının nerede olduğunu söyler. Vite bunları inşa sırasında paketler.</li> <li><code>initialLocale</code> <code>props.initialPage.props</code>'dan okunuyor — bu, Inertia'nın ilk paylaşılan verisi, bir sonraki adımda ayarlayacağız.</li> <li><code>fallbackLocale="id"</code> — aktif yerelde bir anahtar eksikse, Endonezceye geri dön. Bunu birincil dilinize göre ayarlayın.</li> </ul> <hr/>

Sanal Medya

Son Eklenenler

Game Pass’te Bu Hafta Sonu Kaçırılmayacak Heyecan Verici Oyunlar

Jay-Z’nin New York’taki Sürpriz Dolu Yaz Konseri: Nasıl Gerçekleşti?

AC Black Flag Yeniden Senkronize Edildi, Ancak Bir Konu Tepki Topladı

Samsung, PC’ler için Gaia AI hızlandırıcısını hazırlıyor

Mario Kart Dünyasında Değişim Rüzgarları Esti

Phia Satışları Haksız Yolla Artırmakla Suçlandı

Siber güvenlik, yapay zeka ve savunma sanayiinden; finans ve sinema dünyasına uzanan geniş bir yelpaze. Teknomers; teknoloji, strateji ve yazılım dünyasını sade bir dille sizlerle buluşturuyor.

Kurumsal

Kategoriler

Populer