جاري التحميل...
جاري التحميل...
إضافة البحث وتقليل الصفحات
البحث والتقسيم ضروريان لأي مدونة تحتوي على الكثير من المقالات. يغطي هذا الدرس تنفيذ البحث باستخدام Supabase ومعلمات URL ومكونات التقسيم.
💡 المواضيع المغطاة:
البحث باستخدام Supabase ilike والبحث النصي الكامل، معلمات URL مع Next.js، مكونات التقسيم، حقل البحث المتأخر، اقتراحات الإكمال التلقائي.
استخدم العامل ilike للبحث النصي البسيط أو البحث النصي الكامل للمطابقة المتقدمة مع الترتيب.
💡 طرق البحث:
ilike للمطابقة النمطية غير حساسة للحالة، أو() للبحث في أعمدة متعددة، textSearch للبحث النصي الكامل في PostgreSQL مع الترتيب.
يوفر البحث النصي الكامل في PostgreSQL مطابقة نصية أكثر تطورًا مع tsvector و tsquery ودوال الترتيب.
💡 فوائد البحث النصي الكامل:
أسرع من LIKE لمجموعات البيانات الكبيرة، يدعم جذور الكلمات والترتيب، يمكنه وزن حقول مختلفة بشكل مختلف.
جعل معلمات URL ي يجعل البحث قابلًا للحفظ والمشاركة. يوفر Next.js searchParams لقراءة سلاسل استعلام URL.
💡 فوائد معلمات URL:
الحفظ والمشاركة تعمل بشكل صحيح، صديق لـ SEO مع صفحات البحث المفهرسة، التنقل بالزر الأمامي/الخلفي في المتصفح يعمل بشكل طبيعي.
يقسم التقسيم النتائج إلى صفحات مع ترقيم التنقل وأزرار السابق/التالي ونقطاط للعدادات الكبيرة.
💡 منطق التقسيم:
احسب إجمالي الصفحات من العدد والحد، اعرض أرقام صفحات ذكية مع نقاطاط، حافظ على معلمات البحث عبر الصفحات.
يؤخر debounce استعلام البحث حتى يتوقف المستخدم عن الكتابة، مما يقلل من استدعاءات API غير الضرورية.
💡 كيف يعمل Debounce:
ينتظر 300 مللي ثانية بعد الضغط الأخير قبل تنفيذ البحث، يمنع إطلاق طلب لكل حرف مكتوب.
اعرض اقتراحات البحث بينما يكتب المستخدم، بما في ذلك عناوين المقالات والتصنيفات.
💡 ميزات الإكمال التلقائي:
اعرض اقتراحات للمقالات والتصنيفات، دعم التنقل بلوحة المفاتيح، انقر للانتقال مباشرة إلى النتائج.
ما هي ميزة معلمات URL مقارنة بـ useState للبحث؟
ماذا يفعل hook Debounce؟
أي وظيفة Supabase تُستخدم للبحث غير الحساس للحالة؟
لماذا نستخدم range(offset, limit - 1) في Supabase للتقسيم؟
أضف تصفية التصنيف إلى صفحة بحث المدونة. أنشئ مكون CategoryFilter، مرر التصنيف كمعلمة URL، صفي استعلام Supabase حسب التصنيف.
بحث Supabase:
.ilike('title', '%query%') - بحث نصي بسيط.or('title.ilike...') - بحث متعدد الأعمدة.rpc('search_posts', {search_query}) - بحث نصي كاملالتقسيم والتأخير:
offset = (page - 1) * limit.range(offset, offset + limit - 1)كيف تدير أخطاء المشروع؟
الإجابة:
اكتب اختبارات، استخدم linting، و راجع الكود باستمرار.
كيف تُحسّن أداء المشروع؟
الإجابة:
قلل الـ bundle size، استخدم lazy loading، وحسّن الصور.
استخدم Git branches
افصل كل ميزة في branch منفصل
اكتب tests
لا تنشر ميزة بدون اختبارات