I'm always excited to take on new projects and collaborate with innovative minds.

Phone

+20 115 052 9992

Website

https://ibrahimahmed.online/

Social Links

إدارة الـ Routing في تطبيقات Inertia بدون وجع دماغ

إدارة الـ Routing في تطبيقات Inertia بدون وجع دماغ لو أنت مبرمج بتستخدم لارافيل (Laravel) ومعاها React أو Vue، أكيد مريت بلحظة "الزهق" دي: ليه أروح أعمل تعريف ل

إدارة الـ Routing في تطبيقات Inertia بدون وجع دماغ
Reading Count: 1

إدارة الـ Routing في تطبيقات Inertia بدون وجع دماغ

لو أنت مبرمج بتستخدم لارافيل (Laravel) ومعاها React أو Vue، أكيد مريت بلحظة "الزهق" دي: ليه أروح أعمل تعريف للـ Routes في لارافيل، وبعدين أرجع أعملها تاني في React Router أو Vue Router؟ ليه التكرار ده؟ وليه أحياناً بضطر أهتم بالـ Client-side routing والـ Server-side routing في نفس الوقت؟

في المقال ده، هنتكلم عن الحل السحري اللي بيقدمه إطار العمل Inertia.js، إزاي تنسى خالص فكرة الـ Front-end Router، وتخلي لارافيل هو الملك المتوج على عرش الـ Routing بتاعك.

ليه الـ Client-side Router بيعملنا صداع؟

لما بنستخدم الطريقة التقليدية (SPA)، بنحتاج مكتبات زي React Router. المشكلة مش في المكتبة نفسها، المشكلة في "التزامن". لو غيرت مسار في الباك-إند، لازم تروح تحدث الـ Front-end، ولازم تتعامل مع الـ Middleware مرتين، وغير مشاكل الـ Authorization اللي ممكن تظهر في ناحية وما تظهرش في التانية. مع Inertia، إحنا بنلغي الفصل ده وبنخلي التطبيق عبارة عن "Monolith" بتجربة مستخدم خرافية.

الاعتماد الكلي على Laravel Routing

فلسفة Inertia ببساطة هي: لارافيل هو اللي بيتحكم في كل حاجة. أنت بتعرف الـ Routes بتاعتك في ملف web.php كأنك شغال على مشروع Blade عادي جداً:


Route::get('/dashboard', function () {
    return Inertia::render('Dashboard', [
        'user' => auth()->user()
    ]);
});

هنا مفيش حاجة اسمها مسارات في الـ Front-end. الـ Controller هو اللي بيبعت الـ Component المناسب بالـ Data المطلوبة، و Inertia بتعمل الباقي "في الخلفية" (Under the hood) من غير ما الصفحة تعمل Refresh.

استخدام Ziggy: الجندي المجهول

ممكن تسألني: "طب لو عايز أعمل Link لصفحة تانية من جوه الـ Component بتاعي؟ أكتب المسار بايدي؟". طبعاً لأ! هنا بييجي دور مكتبة Ziggy. المكتبة دي بتخلي كل الـ Routes اللي عرفتها في لارافيل متاحة جوه الـ JavaScript.

بدل ما تكتب /users/1/edit، بتستخدم الدالة route() اللي اتعودنا عليها في Blade:


import { Link } from '@inertiajs/react';

<Link href={route('users.edit', user.id)}>
    تعديل بيانات المستخدم
</Link>

ده مش بس بيخلي الكود أنضف، ده بيخليك تغير الـ URL في ملف الـ Routes مرة واحدة بس، وكل الروابط في تطبيقك هتتحدث أوتوماتيكياً!

توجيه الـ Middleware والحماية

بما إنك معتمد كلياً على نظام الـ Routing بتاع لارافيل، فأنت بتستفيد من كل حاجة: الـ Middleware، الـ Form Requests، والـ Policy. لو المستخدم مش مصرح له يدخل صفحة، لارافيل هيعمل Redirect للـ Login، و Inertia هتفهم ده وتوجه المستخدم للصفحة الجديدة فوراً من غير ما يفتح الـ Browser Console ويجيلك مشاكل غريبة.

نصيحة من أخ لمبرمج

يا صديقي، التطوير مش معناه دايماً إنك تستخدم أحدث مكتبة ظهرت على NPM. التطوير الصح هو إنك تختار الأدوات اللي بتقلل "الحمل الذهني" (Cognitive Load) عليك. Inertia بتقدم لك ده بامتياز. ركز في تعلم الأساسيات القوية في لارافيل، وهتلاقي إن الـ Front-end بقى جزء بسيط وسهل من رحلتك البرمجية.

ابدأ جرب الـ Single Page Application مع Inertia، وهتكتشف إن الوقت اللي كنت بتضيعه في تظبيط الـ Routing، تقدر تستثمره في بناء Features تخلي تطبيقك أقوى وأسرع.


Share

Related posts

May 15, 2026 • 1 min read
Reading Count: 7
إزاي تمرر البيانات المشتركة Shared Data في Inertia.js بذكاء؟

إزاي تمرر البيانات المشتركة Shared Data في Inertia.js بذكاء؟ لو بتشتغل بـ Laravel مع Vue.js أو React...

May 14, 2026 • 1 min read
Reading Count: 10
مقارنة عملية: Inertia مع Vue مقابل Inertia مع React.. تختار مين لمشروعك الجاي؟

مقارنة عملية: Inertia مع Vue مقابل Inertia مع React.. تختار مين لمشروعك الجاي؟ لو أنت مطور لارافيل (...

May 14, 2026 • 1 min read
Reading Count: 9
إزاي تبني نظام تسجيل دخول (Login System) احترافي في دقائق مع Laravel Breeze و Inertia

إزاي تبني نظام تسجيل دخول (Login System) احترافي في دقائق مع Laravel Breeze و Inertia أكيد مريت بالل...