Inertia.js مع PHP: دليل شامل مع أمثلة تطبيقية

1. ما هو Inertia.js ولماذا تحتاجه؟

Inertia.js ليس إطار عمل (Framework) ولا مكتبة لإنشاء تطبيقات الصفحة الواحدة (SPA) بالمعنى التقليدي. بل هو "جسر" أو "محوّل" يسمح لك ببناء تطبيقات حديثة من صفحة واحدة باستخدام إطار عمل خادم تقليدي (في حالتنا Laravel مع PHP) وأي إطار عمل أمامي حديث (React، Vue.js أو Svelte) دون الحاجة إلى كتابة REST API منفصل.

المشكلة الرئيسية التي يحلها Inertia.js هي التخلي عن النهج التقليدي "الخادم يقدم HTML" أو "الخادم يرسل JSON والواجهة الأمامية تقرر ما ترسمه". بدلاً من ذلك، يقدم Inertia مسارًا ثالثًا: تكتب المتحكمات (Controllers) في PHP كالمعتاد، ولكن بدلاً من إرجاع قالب Blade أو استجابة JSON، تقوم بإرجاع استجابة Inertia تحتوي على البيانات واسم المكون. يقوم Inertia على العميل (JavaScript) باعتراض هذه الاستجابة، والعثور على المكون المناسب (React/Vue) وعرضه مع إدراج البيانات المستلمة. يتم التنقل بين الصفحات دون إعادة تحميل كاملة، كما في تطبيقات SPA، لكن جميع التوجيهات (Routing) ومنطق الأعمال تبقى على الخادم.

لماذا تحتاج هذا؟ أولاً، يبسط بشكل كبير بنية التطبيق: لن تحتاج إلى دعم تطبيقين منفصلين (API خلفي وواجهة أمامية SPA) مع تكرار منطق التحقق من الصلاحية والتحقق من صحة البيانات. ثانيًا، يحافظ على جميع مزايا Laravel (ORM Eloquent، مكونات Blade للبريد الإلكتروني، Artisan، Middleware) وجميع مزايا React/Vue (التفاعلية، النهج القائم على المكونات، النظام البيئي الضخم). ثالثًا، يوفر تجربة مطور ممتازة (DX): تعمل في مستودع واحد، تستخدم موجهًا واحدًا (Laravel)، ويدير Inertia حالة التطبيق على العميل بشفافية.

2. التثبيت

يتكون التثبيت من جزئين: جزء الخادم (PHP) وجزء العميل (JavaScript). نفترض أن لديك Laravel مثبتًا (الإصدار 8، 9، 10 أو 11).

الخطوة 1: تثبيت حزمة الخادم (PHP)

قم بتنفيذ الأمر التالي في الطرفية (Terminal) داخل مجلد مشروع Laravel الخاص بك:

composer require inertiajs/inertia-laravel

الخطوة 2: تثبيت محوّل العميل (JavaScript)

اختر إطار العمل الأمامي الخاص بك وقم بتنفيذ الأمر المناسب:

لـ React:

npm install @inertiajs/react react react-dom

لـ Vue 3:

npm install @inertiajs/vue3 vue

لـ Svelte:

npm install @inertiajs/svelte svelte

الخطوة 3: نشر الإعدادات (اختياري)

php artisan vendor:publish --provider="Inertia\ServiceProvider"

الخطوة 4: إعداد القالب الجذري

قم بإنشاء ملف resources/views/app.blade.php بالمحتوى التالي:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name'))</title>
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

التوجيه @inertia هو المكان الذي سيقوم Inertia بإدراج تطبيقك فيه. @inertiaHead لإدارة العناوين من المكونات.

الخطوة 5: إعداد Vite (إذا كنت تستخدم Vite)

في ملف vite.config.js، أضف الإضافة (Plugin) الخاصة بـ React أو Vue:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // أو @vitejs/plugin-vue

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/