Günümüzün rekabetçi dijital dünyasında, kullanıcı beklentileri her zamankinden daha yüksek. Hızlı yüklenen, dinamik ve etkileşimli web uygulamaları geliştirmek, hem geliştiriciler hem de işletmeler için kritik bir başarı faktörü haline geldi. Peki, karmaşık API katmanları ve ayrı front-end/back-end projelerinin getirdiği yönetim zorluklarına takılmadan, tek sayfa uygulama (SPA) deneyimini monolitik bir yapı içerisinde nasıl sunabiliriz? İşte bu noktada Laravel 12, InertiaJS ve ReactJS üçlüsü, modern web uygulaması geliştirme sürecini sadeleştiren, güçlü ve verimli bir çözüm olarak karşımıza çıkıyor.
Geleneksel web geliştirme paradigmaları, her sayfa yüklemesinde sunucu tarafında tam bir render işlemi gerektirirken, kullanıcı deneyimi açısından bazı kısıtlamalar sunuyordu. Günümüzün kullanıcıları, anında tepki veren, akıcı geçişlere sahip ve mobil cihazlarda bile mükemmel performans gösteren uygulamalar bekliyor. Bu beklentiler, tek sayfa uygulamalarının (SPA) popülaritesini artırdı. SPAlar, sayfa yenileme olmaksızın içeriği dinamik olarak güncelleyerek masaüstü uygulaması benzeri bir deneyim sunar. Ancak, SPA geliştirmek genellikle karmaşık bir API katmanı oluşturmayı, ön ve arka yüz geliştirme ekipleri arasında sürekli koordinasyonu ve ayrı dağıtım süreçlerini gerektirir.
Bu karmaşıklık, küçük ve orta ölçekli projeler için ek yük oluşturabilir, geliştirme süresini uzatabilir ve maliyetleri artırabilir. Ayrıca, SEO (Arama Motoru Optimizasyonu) açısından da bazı zorlukları beraberinde getirebilir, çünkü arama motoru botları dinamik olarak yüklenen içeriği indekslemekte zorlanabilir. İşte tam da bu noktada, modern full-stack geliştirme yaklaşımları devreye giriyor. Bu yaklaşımlar, özellikle Laravel ekosistemindeki InertiaJS gibi araçlarla, SPA’ların sunduğu avantajları korurken, geleneksel monolitik geliştirmenin basitliğini geri getiriyor.
Düşünün ki, bir e-ticaret platformu geliştiriyorsunuz. Müşterileriniz ürün listelemeleri arasında anında gezinebilmeli, sepete ürün eklediğinde sayfanın tamamının yeniden yüklenmesini beklememeli ve ödeme sürecinde kesintisiz bir akış deneyimlemeli. Geleneksel yaklaşımla, her bir etkileşimde sunucuya istek gönderip tüm sayfayı yeniden render etmek, hem sunucu kaynaklarını yorar hem de kullanıcıyı bekletir. AJAX (Asynchronous JavaScript and XML) kullanımı bu durumu bir nebze iyileştirse de, kapsamlı bir SPA deneyimi sunmak için genellikle daha sofistike bir mimariye ihtiyaç duyulur. Bu nedenle, kullanıcıların beklentilerini karşılamak, uygulama performansını artırmak ve geliştirme süreçlerini optimize etmek için modern web geliştirme araçlarına yönelmek kaçınılmaz hale gelmiştir. Laravel 12’nin sağladığı backend gücü, ReactJS’in sunduğu esnek ve performanslı kullanıcı arayüzleri ile InertiaJS’in köprü görevi, bu ihtiyaçlara eksiksiz bir yanıt veriyor.
Uzman İpucu: Modern bir yaklaşımla geliştirilmiş uygulamalar, ölçeklenebilirlik ve sürdürülebilirlik açısından da geleneksel yöntemlere göre çok daha avantajlıdır. Tek bir codebase üzerinde çalışmak, hata ayıklama ve yeni özellik ekleme süreçlerini önemli ölçüde hızlandırır.
Laravel 12, InertiaJS ve ReactJS: Bu Üçlü Neden Bu Kadar Etkili?
Modern web uygulaması geliştirme dünyasında, Laravel, InertiaJS ve ReactJS’in birleşimi, geliştiricilere benzersiz bir verimlilik ve güç sunar. Her bir bileşen kendi alanında liderdir ve bir araya geldiklerinde sinerjik bir etki yaratırlar. Bu üçlünün neden bu kadar etkili olduğunu daha yakından inceleyelim:
Laravel 12: PHP’nin Güçlü ve Zarif Çerçevesi Olarak Neler Sunuyor?
Laravel, PHP tabanlı, açık kaynaklı bir web uygulama çatısıdır. Sağlam yapısı, zengin ekosistemi ve geliştirici dostu özellikleriyle büyük ölçekli ve karmaşık projeler için bile ideal bir backend çözümüdür. Laravel 12, önceki sürümlerin tüm avantajlarını koruyarak ve üzerine yeni iyileştirmeler ekleyerek, modern backend geliştirmenin öncüsü olmaya devam ediyor. Eloquent ORM, migrasyonlar, route tanımlamaları, API kimlik doğrulaması (örneğin Laravel Sanctum ile), kuyruklar, olay yayınlama ve daha birçok özelliği sayesinde, sunucu tarafında karmaşık iş mantıklarını ve veri yönetimini kolayca halledebilirsiniz.
Laravel’in temel gücü, convention over configuration (yapılandırmaya göre kural) felsefesiyle birlikte gelir. Bu, geliştiricilerin tekrar eden görevler yerine uygulamanın benzersiz özelliklerine odaklanmasını sağlar. Örneğin, bir CRUD (Create, Read, Update, Delete) işlemi için saatlerce kod yazmak yerine, Laravel’in komut satırı aracı Artisan CLI ile dakikalar içinde model, controller, migrasyon ve hatta test dosyaları oluşturabilirsiniz. Ayrıca, paket yöneticisi Composer sayesinde yüzlerce topluluk tarafından geliştirilmiş paketi projenize entegre edebilir, böylece tekerleği yeniden icat etme derdinden kurtulursunuz. Güvenlik, performans ve bakım kolaylığı, Laravel’in en önemli önceliklerindendir ve bu da onu kurumsal düzeyde projeler için bile tercih edilen bir çerçeve yapar.
InertiaJS: Monolitik Bir Yapıda SPA Deneyimi Sunmanın Sırrı Nedir?
InertiaJS, modern bir tek sayfa uygulama (SPA) inşa etmenin yeni bir yoludur. Temel olarak, geleneksel bir sunucu tarafı uygulaması (örneğin Laravel) gibi çalışırken, client tarafında React, Vue veya Svelte gibi modern bir JavaScript çerçevesi kullanarak zengin bir SPA deneyimi sunar. Inertia’nın sihri, backend’inizin bir API oluşturmak yerine, doğrudan frontend bileşenlerini render etmesinden gelir. Yani, Laravel’de tanımladığınız route’lar, normal bir Blade şablonu döndürmek yerine, Inertia’nın özel bir response’unu döndürür. Bu response, React bileşeninizin adı ve ona iletilecek verilerden (props) oluşur. Client tarafındaki Inertia kütüphanesi bu response’u yakalar, ilgili React bileşenini bulur ve verileri prop olarak ileterek sayfayı dinamik olarak günceller.
Bu yaklaşımın en büyük avantajı, Laravel’in routing, controller, validation, authentication ve authorization gibi tüm backend özelliklerini tıpkı geleneksel bir monolith uygulamada olduğu gibi kullanmaya devam edebilmenizdir. Ayrı bir API katmanı oluşturma ve yönetme ihtiyacı ortadan kalkar, bu da geliştirme sürecini büyük ölçüde basitleştirir. Inertia, sayfa geçişlerini AJAX üzerinden yaptığı için, sayfa tamamlama (full page reload) olmaksızın hızlı ve akıcı bir kullanıcı deneyimi sağlar. Ayrıca, SEO dostudur, çünkü ilk sayfa yüklemesinde sunucu tarafında render edilmiş bir HTML döndürebilir ve arama motorları tarafından kolayca indekslenebilir.
ReactJS: Dinamik ve İnteraktif Kullanıcı Arayüzleri Oluşturmanın Temel Taşı
ReactJS, Facebook tarafından geliştirilen, bileşen tabanlı (component-based) bir JavaScript kütüphanesidir. Modern web uygulamalarında dinamik ve etkileşimli kullanıcı arayüzleri (UI) oluşturmak için yaygın olarak kullanılır. React’in en güçlü özelliklerinden biri, sanal DOM (Virtual DOM) kullanmasıdır. Bu sayede, DOM güncellemelerini minimize ederek performansı artırır. Geliştiriciler, uygulamalarını küçük, bağımsız ve yeniden kullanılabilir bileşenlere ayırarak geliştirebilirler. Bu, kodun daha düzenli, okunabilir ve bakımı kolay olmasını sağlar.
React, tek yönlü veri akışı prensibini benimser, bu da uygulamanın durum yönetimini daha tahmin edilebilir hale getirir. PropTypes veya TypeScript ile tip kontrolü yaparak geliştirme sürecindeki hataları azaltabilirsiniz. Hooks (useEffect, useState, useContext vb.) sayesinde fonksiyonel bileşenlerde durum yönetimi ve yan etkileri kolayca ele alabilirsiniz. Geniş bir geliştirici topluluğuna sahip olması nedeniyle, React için binlerce hazır bileşen, kütüphane ve araç bulunmaktadır. Bu da geliştirme sürecini hızlandırır ve ortak problemlere hızlı çözümler bulmanızı sağlar. Inertia ile birlikte kullanıldığında, React, Laravel backend’inizden gelen verileri görselleştirmek ve kullanıcı etkileşimlerine tepki vermek için mükemmel bir araç haline gelir.
Laravel 12, InertiaJS ve ReactJS Entegrasyonu Nasıl Yapılır?
Bu güçlü üçlüyü bir araya getirerek modern bir web uygulaması oluşturmak, sandığınızdan çok daha kolay. Adım adım bu entegrasyon sürecini inceleyelim ve bir e-ticaret uygulamasındaki ürün listeleme ve detayı gibi gerçek dünya senaryoları üzerinden ilerleyelim.
Proje Kurulumu ve Başlangıç Ayarları: Adım Adım Rehber
Öncelikle, yeni bir Laravel 12 projesi oluşturarak başlıyoruz. Ardından InertiaJS ve ReactJS için gerekli paketleri kuracağız. Bu adımlar, projenizin temelini sağlam bir şekilde atmanızı sağlayacaktır.
- Yeni bir Laravel Projesi Oluşturma:
Terminalinizi açın ve aşağıdaki komutu çalıştırarak yeni bir Laravel projesi yaratın. Projenizin adı “ECommerceApp” olabilir.composer create-project laravel/laravel ECommerceApp cd ECommerceApp - Composer ile Inertia Paketini Kurma:
Sunucu tarafındaki Inertia adaptörünü Composer aracılığıyla projenize ekleyin.composer require inertiajs/inertia-laravel - Inertia Root Şablonunu Oluşturma:
Inertia, tüm React (veya Vue/Svelte) uygulamanızın yükleneceği tek bir Blade şablonuna ihtiyaç duyar. Bu şablon genellikleresources/views/app.blade.phpadını alır. Artisan komutuyla bu şablonu kolayca oluşturabilirsiniz:php artisan inertia:install --ssr
Bu komut aynı zamanda SSR (Server-Side Rendering) için gerekli dosyaları da oluşturur, ancak şu an için sadece frontend entegrasyonuna odaklanabiliriz. İçeriği genellikle aşağıdaki gibi olacaktır:{{ config('app.name', 'Laravel') }} @routes @vite(['resources/js/app.jsx', 'resources/css/app.css']) @inertia
@inertiadirektifi, InertiaJS uygulamasının React bileşenlerini bu noktaya yerleştirmesini sağlar.@vite(['resources/js/app.jsx', 'resources/css/app.css'])kısmı, Vite ile React uygulamanızı derleyip sayfaya dahil eder. - NPM Paketlerini Kurma (Inertia Client & React):
Frontend tarafında Inertia client adaptörünü ve React'i kurmak için npm veya yarn kullanın.npm install @inertiajs/react react react-dom @vitejs/plugin-react npm install --save-dev tailwindcss postcss autoprefixer npx tailwindcss init -p
Bu adımda TailwindCSS'i de kurduk, modern ve hızlı bir CSS çatısı olduğu için projelerimizde sıklıkla tercih edilir. Tailwind ayarlarınıtailwind.config.jsvepostcss.config.jsdosyalarında yapmayı unutmayın. Örneğin,tailwind.config.jsdosyasınıncontentkısmına aşağıdaki gibi düzenleme yapmalısınız:// tailwind.config.js module.exports = { content: [ "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php", "./storage/framework/views/*.php", "./resources/views/**/*.blade.php", "./resources/js/**/*.jsx", // React bileşenlerinizi tarayacak ], theme: { extend: {}, }, plugins: [], }; - Vite Yapılandırması:
vite.config.jsdosyanızı güncelleyerek React desteğini ekleyin:// vite.config.js import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ laravel({ input: 'resources/js/app.jsx', refresh: true, }), react(), ], }); resources/js/app.jsxDosyasını Oluşturma:
Bu dosya, Inertia ve React uygulamanızın başlangıç noktası olacaktır.// resources/js/app.jsx import './bootstrap'; import '../css/app.css'; import { createRoot } from 'react-dom/client'; import { createInertiaApp } from '@inertiajs/react'; import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; createInertiaApp({ title: (title) =>${title} - ${appName}, resolve: (name) => resolvePageComponent(./Pages/${name}.jsx, import.meta.glob('./Pages/**/*.jsx')), setup({ el, App, props }) { const root = createRoot(el); root.render(); }, progress: { color: '#4B5563', }, });
Bu kod, Inertia uygulamanızı başlatır ve React bileşenleriniziresources/js/Pagesdizininde aramasını söyler.- İlk React Sayfanızı Oluşturma:
resources/js/Pagesdizinini oluşturun ve içineHome.jsxadında basit bir React bileşeni ekleyin:// resources/js/Pages/Home.jsx import React from 'react'; import { Head } from '@inertiajs/react'; export default function Home({ name }) { return ( <>); }Merhaba, {name}! Modern Web Uygulamasına Hoş Geldiniz.
- Laravel Route Tanımlaması:
Son olarak, Laravel'de bu React bileşenini render edecek bir route tanımlayın.routes/web.phpdosyanızı güncelleyin:// routes/web.php use Illuminate\Support\Facades\Route; use Inertia\Inertia; Route::get('/', function () { return Inertia::render('Home', [ 'name' => 'Geliştirici', ]); }); - Uygulamayı Çalıştırma:
Şimdi uygulamanızı çalıştırabilirsiniz:npm run dev // React bileşenlerini derlemek ve izlemek için php artisan serve // Laravel sunucusunu başlatmak için
Tarayıcınızdahttp://127.0.0.1:8000adresine giderek ilk modern web uygulamanızı görebilirsiniz!
Bu adımlarla, Laravel backend'inin gücünü, Inertia'nın SPA kolaylığını ve React'in dinamik arayüz yeteneklerini birleştiren temel bir proje yapısını kurmuş oldunuz. Artık e-ticaret uygulamanız için ürünleri, kategorileri ve kullanıcı etkileşimlerini yönetmek üzere bu temelin üzerine inşa etmeye başlayabilirsiniz.
Uzman İpucu: Vite'in hot module replacement (HMR) özelliği sayesinde, React bileşenlerinizde yaptığınız değişiklikler sayfayı yenilemeden anında tarayıcıya yansır. Bu, geliştirme hızınızı inanılmaz derecede artırır.
Veritabanı ve Modellerin Oluşturulması: Laravel'in Eloquent ORM Gücü
Modern bir e-ticaret uygulaması geliştirdiğimizi varsayarak, ürünlerimizi ve kategorilerimizi veritabanında saklamamız gerekecek. Laravel'in Eloquent ORM'si, veritabanı etkileşimlerini basitleştirir ve PHP objeleriyle çalışır gibi verilerle etkileşim kurmanızı sağlar.
Öncelikle, veritabanı bağlantı ayarlarınızı .env dosyasında yapılandırdığınızdan emin olun (örneğin MySQL veya PostgreSQL). Daha sonra, Artisan CLI kullanarak ürün ve kategori modelleri için migrasyonlar ve modeller oluşturalım:
php artisan make:model Product -m
php artisan make:model Category -m
Bu komutlar, app/Models/Product.php ve app/Models/Category.php dosyalarını oluşturacak, ayrıca ilgili migrasyon dosyalarını database/migrations dizininde yaratacaktır. Şimdi migrasyon dosyalarını düzenleyelim:
// database/migrations/..._create_categories_table.php
id();
$table->string('name');
$table->string('slug')->unique();
$table->text('description')->nullable();
$table->timestamps();
});
}
public function down(): void
{
Schema::dropIfExists('categories');
}
};
// database/migrations/..._create_products_table.php
id();
$table->foreignId('category_id')->constrained()->onDelete('cascade');
$table->string('name');
$table->string('slug')->unique();
$table->text('description')->nullable();
$table->decimal('price', 8, 2);
$table->integer('stock')->default(0);
$table->string('image')->nullable();
$table->timestamps();
});
}
public function down(): void
{
Schema::dropIfExists('products');
}
};
Migrasyonları çalıştırarak veritabanı tablolarını oluşturun:
php artisan migrate
Şimdi modeller arasındaki ilişkileri tanımlayalım. Bir ürünün bir kategoriye ait olduğunu ve bir kategorinin birçok ürünü olabileceğini belirtmek için ilişkileri kurmalıyız:
// app/Models/Category.php
hasMany(Product::class);
}
}
// app/Models/Product.php
belongsTo(Category::class);
}
}
Bu şekilde, veritabanı şemamızı ve Eloquent modellerimizi başarıyla oluşturduk. Artık controller'lar aracılığıyla bu modellerle etkileşime geçebilir, verileri alıp React bileşenlerimize gönderebiliriz. Örneğin, ürün listeleme sayfamız için verileri hazırlayabiliriz.
Inertia Sayfalarının ve React Bileşenlerinin Yapılandırılması
Veritabanı yapımız hazır olduğuna göre, bu verileri kullanıcıya göstermek için React bileşenlerimizi ve Laravel controller'larımızı oluşturalım. İlk olarak, bir ProductController oluşturalım:
php artisan make:controller ProductController
Şimdi app/Http/Controllers/ProductController.php dosyasını düzenleyelim. Bu controller, veritabanından ürünleri alacak ve bunları Inertia'ya, dolayısıyla React bileşenimize gönderecek:
// app/Http/Controllers/ProductController.php
latest()->paginate(10); // Kategori bilgisiyle birlikte ürünleri çek
$categories = Category::all();
return Inertia::render('Products/Index', [
'products' => $products,
'categories' => $categories,
]);
}
public function show(Product $product)
{
$product->load('category'); // Ürünün kategori bilgisini yükle
return Inertia::render('Products/Show', [
'product' => $product,
]);
}
}
Bu controller, index metodu ile tüm ürünleri (kategorileri ile birlikte) alıp Products/Index React bileşenine gönderirken, show metodu tek bir ürünün detaylarını Products/Show bileşenine iletiyor. Şimdi bu route'ları tanımlayalım:
// routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
// ... (önceki route'lar)
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Route::get('/products/{product:slug}', [ProductController::class, 'show'])->name('products.show');
Route model binding sayesinde, {product:slug} ile doğrudan ürünün slug'ı üzerinden ilgili ürünü alabiliriz, bu da kodu oldukça temiz tutar.
Şimdi resources/js/Pages/Products dizinini oluşturalım ve içine Index.jsx ile Show.jsx React bileşenlerini ekleyelim:
// resources/js/Pages/Products/Index.jsx
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import Layout from '@/Layouts/AuthenticatedLayout'; // Eğer Laravel Breeze veya Jetstream kullanıyorsanız
export default function Index({ products, categories }) {
return (
Tüm Ürünlerimiz
{products.data.map((product) => (
{product.name}
Kategori: {product.category.name}
{product.price} TL
Detayları Gör
))}
{/* Sayfalama linkleri */}
{products.links.length > 3 && (
{products.links.map((link, key) => (
mx-1 px-3 py-2 rounded-md ${link.active ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-200'}}
dangerouslySetInnerHTML={{ __html: link.label }}
/>
))}
)}
);
}
// resources/js/Pages/Products/Show.jsx
import React from 'react';
import { Head, Link } from '@inertiajs/react';
import Layout from '@/Layouts/AuthenticatedLayout'; // Eğer Laravel Breeze veya Jetstream kullanıyorsanız
export default function Show({ product }) {
return (
{product.name}
Kategori: /products?category=${product.category.slug}} className="text-indigo-600 hover:underline">{product.category.name}
{product.description}
{product.price} TL
text-lg font-semibold ${product.stock > 0 ? 'text-green-600' : 'text-red-600'}}>
{product.stock > 0 ? Stokta: ${product.stock} adet : 'Stokta Yok'}
{product.stock > 0 && (
)}
Tüm Ürünlere Geri Dön
);
}
Bu bileşenler, Laravel'den gelen ürün ve kategori verilerini alarak, TailwindCSS ile stilize edilmiş modern bir arayüzde gösterir. Inertia'nın Link bileşenini kullanarak, sayfa yenilemesi olmadan SPA benzeri geçişler yapabiliriz. Ayrıca, Laravel'in sayfalama özelliğini (paginate(10)) kullanarak, büyük veri setlerini verimli bir şekilde yönetebilir ve React tarafında bu sayfalama linklerini render edebiliriz.
Bu yapılandırma ile, Laravel'in gücünü kullanarak verileri yönetirken, React'in esnekliğiyle dinamik ve etkileşimli kullanıcı arayüzleri oluşturmuş olduk. InertiaJS ise bu iki dünya arasında sorunsuz bir köprü görevi görerek geliştirme sürecini basitleştirdi.
Form Yönetimi ve Veri Akışı: Dinamik Uygulamalar Geliştirme İpuçları
Modern web uygulamalarında formlar, kullanıcı etkileşimi ve veri toplamanın merkezindedir. InertiaJS ile form yönetimi, Laravel'in form işleme yeteneklerini React'in dinamizmiyle birleştirir. Bir ürün oluşturma veya düzenleme formu örneği üzerinden veri akışını ve yönetimini inceleyelim.
Öncelikle, ürün oluşturma ve güncelleme işlemleri için ProductController'ımıza metodlar ekleyelim:
// app/Http/Controllers/ProductController.php (devamı)
public function create()
{
$categories = Category::all(['id', 'name']);
return Inertia::render('Products/Create', [
'categories' => $categories,
]);
}
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|string|max:255',
'slug' => 'required|string|unique:products|max:255',
'description' => 'nullable|string',
'price' => 'required|numeric|min:0',
'stock' => 'required|integer|min:0',
'category_id' => 'required|exists:categories,id',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($request->hasFile('image')) {
$imagePath = $request->file('image')->store('products', 'public');
$validatedData['image'] = $imagePath;
}
Product::create($validatedData);
return redirect()->route('products.index')->with('success', 'Ürün başarıyla eklendi!');
}
public function edit(Product $product)
{
$categories = Category::all(['id', 'name']);
return Inertia::render('Products/Edit', [
'product' => $product,
'categories' => $categories,
]);
}
public function update(Request $request, Product $product)
{
$validatedData = $request->validate([
'name' => 'required|string|max:255',
'slug' => 'required|string|unique:products,slug,' . $product->id . '|max:255',
'description' => 'nullable|string',
'price' => 'required|numeric|min:0',
'stock' => 'required|integer|min:0',
'category_id' => 'required|exists:categories,id',
'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
if ($request->hasFile('image')) {
// Eski resmi sil ve yenisini yükle
if ($product->image) {
Storage::disk('public')->delete($product->image);
}
$imagePath = $request->file('image')->store('products', 'public');
$validatedData['image'] = $imagePath;
}
$product->update($validatedData);
return redirect()->route('products.index')->with('success', 'Ürün başarıyla güncellendi!');
}
public function destroy(Product $product)
{
if ($product->image) {
Storage::disk('public')->delete($product->image);
}
$product->delete();
return redirect()->route('products.index')->with('success', 'Ürün başarıyla silindi!');
}
Yukarıdaki kodda, store ve update metodları Laravel'in güçlü doğrulama (validation) yeteneklerini kullanır. Ayrıca resim yükleme ve silme mantığı da eklenmiştir. Resim yükleme için php artisan storage:link komutunu çalıştırarak public dizin ile storage dizini arasında bir sembolik bağlantı oluşturmanız gerekebilir.
Şimdi bu metodlara karşılık gelen route'ları tanımlayalım:
// routes/web.php (devamı)
Route::resource('products', ProductController::class)->only(['create', 'store', 'edit', 'update', 'destroy']);
Laravel'in Route::resource'u ile CRUD işlemlerine ait route'ları kolayca tanımlayabiliriz.
Son olarak, resources/js/Pages/Products/Create.jsx ve Edit.jsx bileşenlerini oluşturalım. Inertia'nın useForm hook'u, form verilerini yönetmek, hataları göstermek ve gönderim işlemlerini yapmak için harika bir araçtır:
// resources/js/Pages/Products/Create.jsx
import React from 'react';
import { Head, useForm } from '@inertiajs/react';
import Layout from '@/Layouts/AuthenticatedLayout';
import InputError from '@/Components/InputError'; // Laravel Breeze bileşenlerinden
export default function Create({ categories }) {
const { data, setData, post, processing, errors, reset } = useForm({
name: '',
slug: '',
description: '',
price: '',
stock: '',
category_id: '',
image: null,
});
const submit = (e) => {
e.preventDefault();
post(route('products.store'), {
onSuccess: () => reset(), // Başarılı olursa formu sıfırla
});
};
return (
Yeni Ürün Ekle
);
}
resources/js/Pages/Products/Edit.jsx bileşeni de benzer olacaktır, ancak başlangıç verileri (data) mevcut ürünün bilgilerinden oluşacak ve post yerine put metodu kullanılacaktır. useForm hook'u, dosya yüklemeleri için otomatik olarak multipart/form-data isteği gönderir, bu da geliştiricinin işini kolaylaştırır.
Bu entegrasyonla, Laravel'in güvenlik, doğrulama ve veritabanı yönetimindeki gücünü korurken, React'in anlık geri bildirim ve dinamik arayüz özellikleriyle zengin bir kullanıcı deneyimi sunan formlar oluşturmuş olduk. Hata mesajları, Laravel'in validasyon kuralları sayesinde otomatik olarak Inertia tarafından React bileşenlerine iletilir ve kullanıcıya anında gösterilir.
Performans Optimizasyonu ve Gelişmiş Kullanım Senaryoları
Modern web uygulamaları geliştirirken, temel işlevselliğin ötesine geçerek performans, ölçeklenebilirlik ve kullanıcı deneyimini iyileştirmek esastır. Laravel 12, InertiaJS ve ReactJS ile çalışırken, uygulamanızı daha da ileriye taşıyacak bazı gelişmiş ipuçları ve teknikler bulunmaktadır.
Code Splitting ve Lazy Loading ile Hızlandırma Yolları
Büyük React uygulamalarında tüm JavaScript kodunu tek bir dosyada göndermek, ilk sayfa yükleme süresini uzatabilir. Code Splitting (kod bölme) ve Lazy Loading (tembel yükleme) teknikleri, bu sorunu çözmek için kullanılır. Bu teknikler sayesinde, sadece o anki sayfa için gerekli olan JavaScript kodları yüklenir, diğer kodlar ihtiyaç duyulana kadar bekletilir.
React'te React.lazy() ve Suspense API'leri ile bileşenleri tembel yükleyebilirsiniz. InertiaJS, Vite ile birlikte bu tür optimizasyonları kolayca entegre etmenize olanak tanır. Örneğin, az kullanılan bir admin panelini veya özel bir raporlama sayfasını tembel yükleyebiliriz:
// resources/js/app.jsx (örnek)
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
createInertiaApp({
// ... diğer ayarlar
resolve: (name) => {
// Özel bir klasördeki bileşenleri tembel yükle
if (name.startsWith('Admin/')) {
return import(./Pages/${name}.jsx); // Bu bileşenler ayrı bir chunk'a bölünecektir
}
return resolvePageComponent(./Pages/${name}.jsx, import.meta.glob('./Pages/**/*.jsx'));
},
setup({ el, App, props }) {
const root = createRoot(el);
root.render(Yukarıdaki örnekte, Admin/ ile başlayan sayfalar ayrı JavaScript parçalarına (chunks) bölünecek ve yalnızca o sayfaya gidildiğinde yüklenecektir. Bu, ana paket boyutunu küçülterek uygulamanızın başlangıç yükleme süresini önemli ölçüde azaltır.
Gerçek Zamanlı Uygulamalar için WebSockets Entegrasyonu
Chat uygulamaları, bildirim sistemleri veya canlı dashboard'lar gibi gerçek zamanlı özellikler gerektiren uygulamalar için WebSockets vazgeçilmezdir. Laravel, WebSocket entegrasyonunu Laravel Echo ve Pusher (veya Ably, Laravel Reverb gibi alternatifler) ile kolaylaştırır.
Bir e-ticaret örneğinde, yeni bir sipariş geldiğinde veya ürün stokları değiştiğinde yöneticilere anlık bildirim göndermek için WebSockets kullanabiliriz:
- Laravel Echo ve Pusher Kurulumu:
composer require pusher/pusher-php-server npm install laravel-echo pusher-js
.envdosyanızda Pusher kimlik bilgilerinizi yapılandırın. - Olay (Event) Oluşturma:
Yeni bir ürün siparişi geldiğinde tetiklenecek bir olay tanımlayın:php artisan make:event NewOrderCreated
app/Events/NewOrderCreated.phpdosyasını düzenleyin:order = $order; } public function broadcastOn(): array { return [ new Channel('orders'), // 'orders' adında bir kanala yayınla ]; } public function broadcastAs() { return 'new.order'; // Olayın adı } } - Olayı Tetikleme:
Bir sipariş oluşturulduğunda bu olayı tetikleyin:// Örneğin OrderController'da veya bir serviste use App\Events\NewOrderCreated; use App\Models\Order; // ... $order = Order::create([...]); event(new NewOrderCreated($order)); - React Tarafında Dinleme:
resources/js/bootstrap.jsdosyasında Laravel Echo'yu yapılandırın ve React bileşeninizde bu olayı dinleyin:// resources/js/bootstrap.js import Echo from 'laravel-echo'; import Pusher from 'pusher-js'; window.Pusher = Pusher; window.Echo = new Echo({ broadcaster: 'pusher', key: import.meta.env.VITE_PUSHER_APP_KEY, cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER, forceTLS: true });
Bir React bileşeninde:// resources/js/Components/Notifications.jsx import React, { useEffect, useState } from 'react'; export default function Notifications() { const [notifications, setNotifications] = useState([]); useEffect(() => { window.Echo.channel('orders') .listen('.new.order', (e) => { // .broadcastAs() metoduyla tanımlanan olay adı setNotifications((prev) => [...prev,Yeni Sipariş: #${e.order.id} - ${e.order.total_amount} TL]); console.log('Yeni sipariş geldi:', e.order); }); return () => { window.Echo.leaveChannel('orders'); // Bileşen ayrıldığında kanaldan çık }; }, []); return (); }Bildirimler
-
{notifications.map((notif, index) => (
- {notif} ))}
Bu entegrasyon sayesinde, kullanıcılar veya yöneticiler, sayfa yenilemesi yapmaya gerek kalmadan anlık bilgilere ulaşabilir, bu da uygulamanızın etkileşimini ve dinamizmini artırır.
Test Süreçleri ve Bakım İpuçları
Uygulamanızın kalitesini ve sürdürülebilirliğini sağlamak için testler kritik öneme sahiptir. Laravel, PHPUnit ile birim ve özellik testleri için mükemmel destek sunarken, React tarafında Jest ve React Testing Library gibi araçlarla bileşen testleri yazabilirsiniz.
- Laravel Testleri: Controller'larınızı, modellerinizi ve hatta Inertia yanıtlarını test edebilirsiniz. Örneğin, bir ürün oluşturma işlemini test etmek:
// tests/Feature/ProductTest.php create(); $category = Category::factory()->create(); $response = $this->actingAs($user)->post(route('products.store'), [ 'name' => 'Test Ürünü', 'slug' => 'test-urunu', 'description' => 'Bu bir test ürünüdür.', 'price' => 99.99, 'stock' => 10, 'category_id' => $category->id, ]); $response->assertRedirect(route('products.index')); $this->assertDatabaseHas('products', ['name' => 'Test Ürünü']); } public function test_products_index_page_can_be_rendered(): void { $user = User::factory()->create(); $this->actingAs($user) ->get(route('products.index')) ->assertInertia(fn (Assert $page) => $page ->component('Products/Index') ->has('products.data') ->has('categories') ); } }
Bu test, hem backend işleminin doğruluğunu hem de Inertia sayfasının doğru verilerle render edildiğini kontrol eder. - React Testleri: React bileşenlerinizin kullanıcı etkileşimlerine doğru tepki verdiğinden emin olmak için testler yazın. Örneğin, bir formun doğru şekilde gönderilip gönderilmediğini test edebilirsiniz.
- Bakım İpuçları:
- Kod Kalitesi: ESLint ve Prettier gibi araçlarla kod standartlarını koruyun.
- Dokümantasyon: Özellikle karmaşık iş mantıkları için kod yorumları ve genel proje dokümantasyonu önemlidir.
- Versiyon Kontrolü: Git kullanarak kodunuzu düzenli olarak versiyonlayın.
- Bağımlılık Güncellemeleri: Düzenli olarak Composer ve NPM bağımlılıklarınızı güncelleyin. Güvenlik açıkları ve yeni özellikler için bu önemlidir.
- Performans İzleme: Uygulamanızın performansını izlemek için Sentry veya Laravel Pulse gibi araçları kullanın.
Bu gelişmiş teknikler ve bakım ipuçları, Laravel 12, InertiaJS ve ReactJS ile geliştirdiğiniz uygulamaların sadece işlevsel olmakla kalmayıp, aynı zamanda hızlı, güvenilir ve sürdürülebilir olmasını sağlar. Geliştirme sürecinin her aşamasında bu pratikleri uygulamak, uzun vadede size büyük faydalar sağlayacaktır.
Geleceğin Web Uygulamaları İçin Doğru Bir Başlangıç
Bu makalede, Laravel 12'nin sağlam backend yeteneklerini, InertiaJS'in monolitik SPA geliştirme kolaylığını ve ReactJS'in dinamik kullanıcı arayüzü gücünü birleştirerek modern web uygulamaları oluşturmanın temel prensiplerini ve pratik adımlarını inceledik. Geleneksel yaklaşımların getirdiği karmaşıklıklardan kaçınarak, tek bir codebase üzerinde hem güçlü bir sunucu tarafı mantığı hem de akıcı bir istemci tarafı deneyimi sunabileceğinizi gördük.
Proje kurulumundan veritabanı yönetimine, React bileşenlerinin yapılandırılmasından form işlemlerine ve hatta performans optimizasyonları ile gerçek zamanlı özelliklere kadar birçok konuya değindik. E-ticaret platformu senaryosu üzerinden verilen örnekler, bu teknolojilerin gerçek dünya uygulamalarında nasıl kullanılabileceğine dair somut bir bakış açısı sağladı. Code splitting ile uygulama hızını artırmanın, WebSockets ile anlık bildirimler eklemenin ve kapsamlı testlerle uygulamanın kalitesini garanti altına almanın yollarını öğrendik. Bu üçlünün birleşimi, geliştiricilere sadece daha hızlı değil, aynı zamanda daha keyifli ve verimli bir geliştirme deneyimi sunar. Daha az context switching, daha az karmaşıklık ve daha tutarlı bir geliştirici deneyimi demektir.
Laravel, Inertia ve React ekosistemleri sürekli gelişmekte olup, bu da uygulamalarınızın geleceğe hazır olmasını sağlar. Bu güçlü kombinasyon, ister küçük bir proje ister büyük ölçekli bir kurumsal uygulama geliştiriyor olun, size esneklik, performans ve sürdürülebilirlik sunacaktır. Modern web geliştirme dünyasında rekabetçi kalmak ve kullanıcı beklentilerini karşılamak için bu teknolojileri projenize entegre etmek, şüphesiz ki doğru bir adımdır.
Sıkça Sorulan Sorular
-
S: InertiaJS kullanmak ne zaman mantıklı olur?
C: Eğer Laravel (veya Rails gibi başka bir sunucu tarafı framework) ile çalışıyorsanız ve ayrı bir API katmanı geliştirmek istemeden React (veya Vue/Svelte) ile SPA benzeri bir deneyim sunmak istiyorsanız InertiaJS kullanmak çok mantıklıdır. Backend geliştirme becerilerinizi frontend'e doğrudan taşımak isteyen full-stack geliştiriciler için idealdir. -
S: Laravel 12, InertiaJS ve ReactJS kullanmanın başlıca avantajları nelerdir?
C: Başlıca avantajları şunlardır: tek bir codebase, Laravel'in tüm backend özelliklerinden faydalanma (routing, validation, ORM), karmaşık API katmanı ihtiyacının ortadan kalkması, hızlı sayfa geçişleri ile SPA benzeri kullanıcı deneyimi, React ile dinamik ve modern arayüzler geliştirme, daha az context switching ve hızlı geliştirme süreci. -
S: SEO performansı açısından InertiaJS'in geleneksel SPAlara göre bir farkı var mı?
C: Evet, genellikle InertiaJS SEO açısından geleneksel, client-side rendered SPAlara göre daha avantajlıdır. Çünkü ilk sayfa yüklemesinde sunucu tarafından tamamen render edilmiş bir HTML içeriği döndürebilir. Bu, arama motoru botlarının içeriği daha kolay indekslemesini sağlar. Geleneksel SPAlar genellikle ek bir SSR (Server-Side Rendering) katmanına ihtiyaç duyarken, Inertia bunu doğal olarak destekler. -
S: Laravel 12'deki InertiaJS ve ReactJS entegrasyonu ne kadar karmaşık?
C: Başlangıç kurulumu birkaç adım gerektirse de (makalede detaylıca anlatıldığı gibi), genel entegrasyon oldukça basittir. Inertia, Laravel ve React arasında sorunsuz bir köprü görevi görür, böylece her iki taraftaki kodlama paradigması büyük ölçüde aynı kalır. Laravel'de route ve controller yazarken, React'te bileşenleri verilerle doldurursunuz. Karmaşıklık, daha çok uygulamanın kendi iş mantığı ve React tarafındaki durum yönetimi gibi faktörlerden kaynaklanır. -
S: Resim yükleme ve diğer dosya işlemleri InertiaJS ile nasıl yapılır?
C: Inertia'nınuseFormhook'u, dosya yüklemeleri için tam destek sunar. Form verilerine birFileobjesi atadığınızda, Inertia otomatik olarak isteğimultipart/form-dataformatında gönderir. Laravel tarafında ise$request->hasFile()ve$request->file('dosya_adi')->store()gibi standart Laravel dosya yükleme metodlarını kullanarak dosyaları işleyebilirsiniz.