بناء Next.js Cache Components بشكل صحيح
قد يكون اعتماد Cache Components بأمان أثناء عمليات ترحيل Next.js صعبا. تمنحك هذه المهارة إرشادات مركزة حول PPR وتوجيهات cache والمدد الزمنية والعلامات والإبطال.
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "next-cache-components" from https://skillstore.io/skills/vercel-labs-next-cache-components.md and its manifest at https://skillstore.io/api/skills/vercel-labs-next-cache-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
جارٍ استخدام "next-cache-components". يسأل مطوّر عن كيفية تخزين بيانات المنتجات مؤقتا مع إبقاء تفضيلات الحساب محدثة.
النتيجة المتوقعة:
جارٍ استخدام "next-cache-components". يسأل فريق عن كيفية استبدال إعدادات التخزين المؤقت الأقدم في Next.js.
النتيجة المتوقعة:
All static findings were reviewed against SKILL.md and appear to be false positives from Markdown syntax or educational Next.js examples. I found no prompt injection, malware intent, credential access, shell execution, or data exfiltration behavior in the skill content.
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/vercel-labs-next-cache-components?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/vercel-labs-next-cache-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-next-cache-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/vercel-labs-next-cache-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>vercel-labs. (2026). next-cache-components security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5@techreport{vercel-labs-vercel-labs-next-cache-components-2026,
author = {vercel-labs},
title = {next-cache-components security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "next-cache-components security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vercel-labs-next-cache-components/audits/5"
identifiers:
- type: other
value: "skillstore:vercel-labs-next-cache-components:audit:5"
description: "Skillstore immutable audit report identifier"
حوّل أنماط PPR أو revalidate أو unstable_cache الأقدم إلى Cache Components مع إرشادات استبدال واضحة.
خطط لمسارات تجمع بين هياكل ثابتة وبيانات مخزنة مؤقتا وأقسام ديناميكية وقت الطلب باستخدام Suspense.
اختر واجهات API المناسبة للعلامات والمدة الزمنية والإبطال للمحتوى الذي يتغير بترددات مختلفة.
أرني كيفية تفعيل Cache Components في مشروع Next.js 16 واشرح ما الذي يتغير بعد تفعيلها.
راجع بنية هذه الصفحة وصنف الأجزاء التي يجب أن تكون ثابتة أو مخزنة مؤقتا باستخدام use cache أو ديناميكية باستخدام Suspense.
ساعدني في اختيار ملفات تعريف cacheLife لقوائم المنتجات ومقاييس لوحة المعلومات والإشعارات الخاصة بالمستخدم في Next.js.
أنشئ خطة ترحيل من experimental.ppr وrevalidate وإعدادات dynamic وunstable_cache إلى Cache Components مع علامات cache.
المؤلف
vercel-labsالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
36e07d5e13068e5be64447e8f20b427cf2cbd21a
حداثة الصيانة
١٨/٧/٢٠٢٦
الاستخدام
18 تنزيلات · 136 مشاهدات
بنية الملفات
📄 SKILL.md
تنفيذ React View Transitions
من السهل وضع انتقالات عرض React في المكان غير المناسب، مما يؤدي إلى رسوم متحركة صامتة أو مزعجة. ترشد هذه المهارة اختيارات الرسوم المتحركة للمسارات وSuspense والقوائم والعناصر المشتركة.
إنشاء مهارات ذكاء اصطناعي قابلة لإعادة الاستخدام
تحتاج الفرق إلى طرق متسقة لحزم معرفة الوكلاء وسير العمل القابلين لإعادة الاستخدام. ترشد هذه المهارة Claude وCodex وClaude Code خلال تخطيط المهارات وتأليفها والتحقق منها وحزمها.
تحسين أداء React و Next.js
غالبا ما تفقد تطبيقات React و Next.js سرعتها بسبب waterfalls، والحزم الكبيرة، وعمليات إعادة التصيير التي يمكن تجنبها. تمنح هذه المهارة الوكلاء قواعد ملموسة لإجراء تغييرات أكثر أمانا تركز على الأداء.
تطبيق أنماط التركيب في React
تصبح مكونات React التي تحتوي على العديد من الخصائص المنطقية صعبة الصيانة والمراجعة. تمنح هذه المهارة الوكلاء أنماطًا واضحة للمكونات المركبة، والمتغيرات الصريحة، والحالة القائمة على المزوّد.
تحسين تطبيقات React Native
قد تعاني تطبيقات React Native من قوائم بطيئة، وحركات متقطعة، وأخطاء خاصة بالمنصات. تمنح هذه المهارة Codex وClaude وClaude Code قواعد موجزة للعمل عالي الأداء في Expo وReact Native.
تطبيق أفضل ممارسات Next.js
غالبا ما تفشل مشاريع Next.js بسبب الحدود غير الواضحة، وبطء جلب البيانات، وأخطاء النشر. تمنح هذه المهارة Claude وCodex وClaude Code قواعد مركزة للعمل الحديث باستخدام App Router.
إنشاء ميزات واجهة أمامية جاهزة للإنتاج
بواسطة davila7
تحتاج فرق الواجهة الأمامية إلى إرشادات متسقة حول React وNext.js عبر المشاريع. توفر هذه المهارة سير عمل مرجعيًا وممارسات للجودة وبرامج نصية مساعدة لتحليل الواجهة الأمامية.
أنشئ تطبيقات Fullstack بإرشاد خبير
بواسطة alirezarezvani
غالبًا ما تحتاج مشاريع Fullstack إلى إعداد متسق، وخيارات معمارية، وفحوصات جودة. توفر هذه المهارة سكربتات ومراجع للعمل على React وNext.js وNode.js وGraphQL وPostgreSQL.
تخطيط بنية Next.js App Router
بواسطة 89jobrien
قد تواجه فرق Next.js صعوبة في اختيار المسارات والمكونات وتحميل البيانات وخطوات الترحيل. توفر هذه المهارة إرشادات بنيوية منظمة لـ App Router وServer Components والأداء.
أتمتة توطين تطبيقات الويب
بواسطة DNYoussef
غالبا ما تؤدي إضافة دعم متعدد اللغات إلى تشتيت النصوص، والتوجيه، والبيانات الوصفية، وملفات اللغات عبر قاعدة الشيفرة. تخطط هذه المهارة لإعداد i18n وتنفذه مع الترجمات، والتحقق، والتوثيق.
تحسين جودة كود Vue 3
بواسطة vuejs-ai
غالبا ما تتراكم في مشاريع Vue أخطاء تتعلق بالتفاعلية والمكونات والأداء مع مرور الوقت. توفر هذه المهارة إرشادات موجهة لـ Vue 3 لاستخدام أنماط أكثر أمانا وكود أوضح.
تحسين أداء Go باستخدام تحليل الأداء
بواسطة 89jobrien
قد تصبح خدمات Go بطيئة أو كثيفة استهلاك الذاكرة دون أدلة واضحة. ترشدك هذه المهارة خلال تحليل الأداء، وتحليل التخصيصات، وضبط التزامن، والتحسين القائم على اختبارات القياس.