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

Tanrıların İntikamı: God of War Laufey’de Sürpriz Karakterler Bekleniyor

JMGO N3 Ultimate projektör, yeni taşınabilir 4K şampiyonu mu?

Laravel AI SDK ile ReAct Sohbet Ajanı Geliştirme

Final Fantasy Revelasyonu: Definitif Son Ama Yan Hikayelere Kapı Aralıyor

Final Fantasy 7’de Bulut’u Kara Büyücüye Dönüştüren Yenilikçi Sistem

Yenilenen Korku Hikayesi: Michael Myers Maskesi ve Bıçağını Buldu

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