Storyblok CMS: الدليل الشامل للمطورين [2026]

Storyblok CMS: الدليل الشامل للمطورين [2026]

Storyblok هو واحد من أنظمة إدارة المحتوى headless النادرة التي يستطيع فيها محررو المحتوى رؤية ما يعدّلونه فعلًا — وهذه الميزة وحدها تغير طبيعة العلاقة بين المطور والمحرر بالكامل. بعد جمع 80 مليون دولار في جولة Series C وإطلاق أتمتة سير العمل في مارس 2026، يستحق الأمر فهم ما يتفوق فيه Storyblok حقًا، وأين يقصر، وما إذا كان مناسبًا لمشروعك القادم.

ما هو Storyblok؟

Storyblok نظام إدارة محتوى headless مع محرر مرئي مدمج، تأسس عام 2017 في لينتس بالنمسا على يد Dominik Angerer (الرئيس التنفيذي) وAlexander Feiglstorfer (المدير التقني). يستخدم معمارية مبنية على المكونات تُعرف بـBloks، ويوصّل المحتوى عبر REST وGraphQL APIs. تستخدمه شركات كـAdidas وTesla وOatly، وقد جمع Storyblok 138 مليون دولار في تمويله حتى جولة Series C.

نظام إدارة المحتوى headless يفصل المحتوى عن الواجهة الأمامية — تدير المحتوى عبر API، وتستهلكه تطبيقات React أو Vue أو Astro الخاصة بك. هذا الجانب مشترك بين Contentful وSanity وStrapi وكل البدائل الأخرى. ما يميز Storyblok هو المحرر المرئي.

نحن ندير أربعة مواقع في الإنتاج على أنظمة إدارة محتوى headless مختلفة (بما فيها Sanity الذي يشغّل هذه المدونة). إليك كيف يقارن Storyblok من خلال تجربة فعلية: المحرر المرئي يقلل فعلًا من التنسيق الدائر بين المطورين وفرق المحتوى. بدلًا من أن يملأ المحررون نماذج ويسألون "كيف سيبدو هذا؟"، يرون الصفحة الحقيقية. هذا تحسين حقيقي في سير العمل، لا مجرد نقطة تسويقية.

تقوم المعمارية الأساسية على مفهومين: Stories (صفحاتك أو مدخلات المحتوى) وBloks (مكونات قابلة لإعادة الاستخدام كأقسام الـhero والشبكات والدعوات للإجراء). يعرّف المطورون مخططات Blok، ويسحب المحررون المكونات ويفلتونها في Stories. يصل المحتوى إلى واجهتك الأمامية عبر Content Delivery API.

من بين العملاء البارزين إلى جانب Adidas وTesla: Virgin Media O2 وdm-drogerie markt وOatly وSpendesk وPanini. للاطلاع على مقارنة Storyblok مع كل الخيارات الرئيسية، راجع مقارنتنا لأنظمة headless CMS.

كيف يعمل المحرر المرئي في Storyblok؟

يحمّل المحرر المرئي في Storyblok واجهتك الأمامية داخل iframe ويعرض مناطق قابلة للتعديل فوق كل مكون. يرى محررو المحتوى معاينة حية لما سيراه الزوار تمامًا، مع إمكانية النقر لتعديل كل Blok. يستلزم ذلك إعداد مكتبة StoryblokBridge JavaScript في تطبيق واجهتك الأمامية.

هذه الميزة هي ما يميز Storyblok عن نهج Contentful القائم على النماذج أو نهج Sanity المبني على الكود أو لوحة تحكم Strapi. تلك الأنظمة تمنح المحررين نموذجًا بحقول. Storyblok يمنحهم الصفحة الفعلية.

معمارية الـiframe

إليك كيف تعمل من تحت الغطاء: حين يفتح محرر Story في لوحة تحكم Storyblok، يحمّل المحرر المرئي تطبيق واجهتك الأمامية داخل iframe. يضيف Storyblok خاصية _editable إلى بيانات كل Blok (فقط على المحتوى المسودة)، وتستمع مكتبة StoryblokBridge للتغييرات. حين ينقر محرر على مكون، تتواصل الجسر مع نافذة Storyblok الرئيسية لفتح محرر الحقل الصحيح.

النتيجة؟ ينقر المحررون مباشرة على قسم الـhero لتعديل العنوان. يسحبون Blok شهادة جديدة أسفل قسم التسعير. يرون التغييرات تنعكس فورًا في المعاينة. لا دورة "احفظ وتحقق من الموقع التجريبي".

تحذير واحد يجدر معرفته: المحرر المرئي يعمل فقط مع المسودات، لا مع المحتوى المنشور. يجب أن يشير رابط المعاينة إلى نسخة من تطبيقك تجلب بيانات المسودات. هذا يفاجئ الناس أثناء الإعداد.

إعداد StoryblokBridge

إليك إعدادًا نموذجيًا في مشروع Next.js App Router. ستحتاج إلى تثبيت @storyblok/react:

// app/components/StoryblokProvider.js
"use client";

import { storyblokInit, apiPlugin } from "@storyblok/react/rsc";
import Hero from "./bloks/Hero";
import FeatureGrid from "./bloks/FeatureGrid";
import CallToAction from "./bloks/CallToAction";

storyblokInit({
  accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
  use: [apiPlugin],
  components: {
    hero: Hero,
    feature_grid: FeatureGrid,
    call_to_action: CallToAction,
  },
});

export default function StoryblokProvider({ children }) {
  return children;
}

ثم لفّ تخطيطك بالمزوّد واستخدم مكون StoryblokStory لتفعيل التعديل الحي:

// app/[...slug]/page.js
import { StoryblokStory } from "@storyblok/react/rsc";
import { fetchStory } from "@/lib/storyblok";

export default async function Page({ params }) {
  const story = await fetchStory(params.slug?.join("/") || "home");

  return <StoryblokStory story={story} />;
}

يتولى مكون StoryblokStory اتصال الجسر تلقائيًا — يسجّل مستمع الـiframe، ويطبّق سمات _editable على Bloks الخاصة بك، ويتيح النقر لتعديل في المحرر المرئي. لا تحتاج إلى ربط ذلك يدويًا.

معمارية المكونات في Storyblok (Bloks وStories)

ينظّم Storyblok المحتوى باستخدام مفهومين أساسيين: Stories (الصفحات أو مدخلات المحتوى) وBloks (المكونات القابلة لإعادة الاستخدام). يعرّف المطورون مخططات Blok في لوحة تحكم Storyblok، ويؤلف المحررون الصفحات بسحب Bloks وإفلاتها في Stories.

فكّر فيها كـLEGO. Stories هي قواعد البناء — الصفحات التي تبنيها. Bloks هي القطع الفردية — قسم hero، بطاقة شهادة، جدول تسعير. تحدد ما هي الحقول التي يمتلكها كل نوع Blok (عنوان، صورة، نص الزر)، ويجمعها المحررون معًا.

Stories: مدخلات المحتوى

كل صفحة أو مقالة أو مدخل محتوى في Storyblok هو Story. تعيش Stories في بنية مجلدات (كنظام الملفات)، ولكل Story slug يتوافق مع رابط URL. يتكون جسم Story من Bloks — إنه في جوهره حاوية.

يمكن أن تحتوي Stories أيضًا على محتوى غير صفحي. قد يكون لديك Story يسمى "site-settings" يخزّن روابط التنقل ونص التذييل وعناوين وسائل التواصل الاجتماعي. المرونة مشابهة لكيفية استخدام مستندات singleton في Sanity.

Bloks: لبنات البناء القابلة لإعادة الاستخدام

تأتي Bloks بصيغتين: قابلة للتداخل (nestable) ونوع المحتوى (content type) على المستوى الجذري. تعرّف Bloks من نوع المحتوى المخطط العلوي لـStory (كـ"Page" أو "BlogPost"). Bloks القابلة للتداخل هي المكونات التي يسحبها المحررون إلى جسم Story — أقسام hero، معارض صور، accordions أسئلة شائعة.

كل Blok له مخطط يعرّف حقوله. تنشئ هذه المخططات في لوحة تحكم Storyblok تحت "Components" (ليس في الكود، وهذا فارق رئيسي عن نهج Sanity المبني على الكود).

نمذجة المحتوى في التطبيق العملي

إليك مثال على مخطط Hero Blok عند تعريفه عبر Management API:

{
  "component": {
    "name": "hero",
    "display_name": "Hero Section",
    "schema": {
      "headline": { "type": "text", "required": true, "pos": 0 },
      "subheadline": { "type": "textarea", "pos": 1 },
      "background_image": { "type": "asset", "filetypes": ["images"], "pos": 2 },
      "cta_text": { "type": "text", "pos": 3 },
      "cta_link": { "type": "multilink", "pos": 4 }
    },
    "is_root": false,
    "is_nestable": true
  }
}

ومكون React الذي يُصيّر هذا الـBlok:

// components/bloks/Hero.jsx
import { storyblokEditable } from "@storyblok/react/rsc";

export default function Hero({ blok }) {
  return (
    <section {...storyblokEditable(blok)} className="hero">
      <div className="hero-content">
        <h1>{blok.headline}</h1>
        {blok.subheadline && <p>{blok.subheadline}</p>}
        {blok.cta_text && (
          <a href={blok.cta_link?.cached_url} className="cta-button">
            {blok.cta_text}
          </a>
        )}
      </div>
      {blok.background_image?.filename && (
        <img
          src={blok.background_image.filename}
          alt={blok.background_image.alt || ""}
        />
      )}
    </section>
  );
}

استدعاء storyblokEditable(blok) هو ما يتيح النقر للتعديل في المحرر المرئي. بدونه، يُصيّر المكون بشكل صحيح لكن المحررون لا يستطيعون النقر عليه لتعديل الحقول. سهل النسيان، مؤلم في التصحيح.

واجهات API في Storyblok: REST مقابل GraphQL مقابل Management

يوفر Storyblok ثلاث واجهات API: Content Delivery API (REST، الموصى بها لمعظم المشاريع)، وGraphQL API (للقراءة فقط، مفيدة حين تحتاج جلب حقول محددة)، وManagement API (للعمليات البرمجية على المحتوى كالترحيل والتحديثات الجماعية). يوصي Storyblok بـREST للمشاريع الجديدة.

معظم أدلة headless CMS تتجاهل طبقة الـAPI تمامًا. هذا خطأ — الـAPI التي تختارها تؤثر على أوقات البناء واستراتيجية التخزين المؤقت وهامش حدود الطلبات.

Content Delivery API (REST)

هذه هي الـAPI الأساسية والتي ستستخدمها 90% من الوقت. تدعم الفلترة والترتيب والصفحات وحل العلاقات بين Stories. حدود الطلبات سخية: 50 طلبًا/ثانية في الخطط المدفوعة.

// جلب story عبر Content Delivery API
const response = await fetch(
  `https://api.storyblok.com/v2/cdn/stories/home?version=draft&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
console.log(story.content); // بيانات Bloks الخاصة بك

GraphQL API

GraphQL API للقراءة فقط ولها حدود طلبات مختلفة (100 نقطة تعقيد/ثانية). مفيدة حين تريد كتابة قوية ولا تحتاج الحمولة الكاملة للـStory — يمكنك طلب الحقول التي تحتاجها فقط.

{
  PageItem(id: "home") {
    name
    slug
    content {
      _uid
      component
      headline
      subheadline
    }
  }
}

Management API

تتعامل Management API مع عمليات CRUD على مساحة Storyblok الخاصة بك: إنشاء Stories، تحديث مخططات المكونات، إدارة الأصول، وتشغيل عمليات الترحيل. ستستخدمها لـCI/CD pipelines، أو التحديثات الجماعية للمحتوى، أو بناء أدوات مخصصة حول Storyblok.

أي API يجب أن تستخدم؟

لمعظم مشاريع Next.js أو Nuxt أو Astro، تتعامل REST Content Delivery API مع storyblok-js-client أو SDK الرسمي مع كل ما تحتاجه. الجأ إلى GraphQL إن كان نموذج محتواك معقدًا وتجلب بنى متداخلة عميقة بحقول كثيرة لا تحتاجها.

أسعار Storyblok في 2026

تبدأ أسعار Storyblok بخطة Starter مجانية. تبدأ الخطط المدفوعة من 99 دولارًا/شهرًا لـGrowth (5 مستخدمين). تتضمن المستويات الأعلى Growth Plus وPremium (للسوق المتوسطة) وElite (غير محدود). بدأ نظام الأسعار الجديد في 7 أبريل 2026، مع فترة سماح 60 يومًا للمشتركين الشهريين الحاليين.

إليك تفاصيل مستويات الأسعار الحالية:

يقدم Storyblok أيضًا تجربة مجانية لمدة 45 يومًا لخطة Growth Plus، وهو كرم غير معتاد مقارنة بتجربة Contentful لمدة 30 يومًا أو الطبقة المجانية المبنية على الاستخدام في Sanity.

الرأي الصريح بشأن الأسعار: يمكن أن يصبح Storyblok مكلفًا على نطاق واسع. تذكر مواضيع Reddit من الوكالات باستمرار تصاعد الأسعار مع نمو المشاريع — مزيد من المستخدمين، طلبات API أكثر، مساحات أكثر للإعدادات متعددة المواقع. إن كانت الميزانية محدودة، خيار Strapi المجاني المستضاف ذاتيًا أو نموذج Payload مفتوح المصدر يمنحانك مرونة أكبر مقابل إدارة بنيتك التحتية بنفسك.

للمشاريع الجانبية والنماذج الأولية، تعمل خطة Starter المجانية. للمشاريع الإنتاجية مع 2-5 محررين، خطة Growth بـ99 دولارًا/شهرًا تنافسية. بعد ذلك، احصل على عرض سعر مخصص من فريق مبيعات Storyblok — الأسعار المنشورة لا تحكي القصة كاملها.

الجديد في 2026: FlowMotion وBlueprints والذكاء الاصطناعي

في 2026، أطلق Storyblok FlowMotion (31 مارس)، طبقة أتمتة سير العمل المبنية على n8n بأكثر من 500 تكامل. أطلقت Blueprints في يوليو 2025، وتوفر إعدادًا موجَّهًا للمشروع مع قوالب بدء مخصصة لكل إطار عمل. تشمل ميزات الذكاء الاصطناعي AI Translate (أكثر من 34 لغة)، وIdeasion Room لعصف أفكار المحتوى، وأدوات AI SEO.

لا يغطي أي دليل Storyblok آخر هذه الميزات حتى الآن. إليك ما يُشحن فعلًا.

FlowMotion: أتمتة سير العمل

FlowMotion هو جواب Storyblok على اختناق عمليات المحتوى. وفقًا لـإعلان الإطلاق، يقضي 75% من المسوقين 6 ساعات أو أكثر أسبوعيًا في مهام تنسيق المحتوى — كإخطار أصحاب المصلحة، وتشغيل الترجمات، وجدولة منشورات وسائل التواصل الاجتماعي.

FlowMotion مبني على n8n المُدار (أداة أتمتة سير العمل مفتوحة المصدر) ويتصل بأكثر من 500 تكامل. تضبط مشغّلات على أحداث المحتوى — إنشاء، تحديث، موافقة، ترجمة، جدولة، نشر — ويشغّل FlowMotion سير العمل تلقائيًا. تخيّل هذا: محرر ينشر مقالة، فيشغّل FlowMotion تلقائيًا الترجمة بالذكاء الاصطناعي إلى 10 لغات، ويُخطر فريق وسائل التواصل الاجتماعي عبر Slack، ويجدول منشورًا على Twitter/X.

هو إضافة Enterprise/Elite، لذا لن تتمكن الفرق الأصغر من الوصول إليه. لكن للمؤسسات التي تدير المحتوى عبر أسواق وقنوات متعددة، هذا توفير كبير للوقت.

Blueprints: إعداد المشروع الموجَّه

تحل Blueprints نقطة ألم حقيقية: الإعداد الأولي لمشروع Storyblok. كشف استطلاع 2024 أن 24% من كبار المطورين يقولون إن الإعداد الأولي لمشروع CMS يستغرق أيامًا لا ساعات.

يقدم Storyblok مستويين من Blueprints:

• Core Blueprint: إعداد بسيط — يربط إطار عملك (Next.js أو Nuxt أو Astro)، ينشئ مساحة، ونشر قالب بدء أساسي. جيد للمطورين الذين يريدون لوحة بيضاء.
• Business Blueprint: إعداد جاهز للإنتاج مع مكونات مسبقة البناء، ونموذج محتوى مهيأ، ونشر على Vercel أو Netlify. أقرب إلى تجربة "الإطلاق في 30 دقيقة".

تختار إطار عملك، وتختار Core أو Business، فينشئ Storyblok مستودع GitHub متصلًا مع pipeline نشر. يوفر ساعات فعلية من إعداد الكود الأساسي مقارنة بالبدء من الصفر.

ميزات الذكاء الاصطناعي: Translate وIdeation Room وأكثر

تتبنى ميزات الذكاء الاصطناعي في Storyblok نهج "أحضر مفتاحك". تربط مفتاح OpenAI أو Google Gemini API، ويستخدمه Storyblok لـ:

• AI Translate: ترجمة المحتوى إلى أكثر من 34 لغة مباشرة في المحرر. ليس بديلًا عن الترجمة الاحترافية للمحتوى الحرج، لكنه ممتاز للمسودات والمحتوى الداخلي.
• Ideation Room: عصف أفكار تعاوني بالذكاء الاصطناعي لأفكار المحتوى. يصف المحررون ما يحتاجونه، ويولّد الذكاء الاصطناعي مخططات وعناوين ومسودات.
• AI Alt Text: توليد تلقائي للنص البديل للصور.
• AI SEO: اقتراحات عنوان meta ووصف بناءً على محتواك.

نموذج إحضار مفتاحك يعني أنك تتحكم في التكاليف وتتجنب الارتباط بمزود واحد في أسعار الذكاء الاصطناعي. لدى Storyblok أيضًا ميزة "Concept Room" قيد التطوير تهدف إلى الجمع بين عصف الأفكار والتخطيط المرئي للمحتوى.

الدولية مع Storyblok

يتعامل Storyblok مع الدولية (i18n) من خلال الترجمة على مستوى الحقل، مما يعني أن لديك Story واحدة مع حقول مترجمة لكل لغة بدلًا من تكرار المستند بأكمله لكل لغة. هذا مختلف جوهريًا عن Contentful وSanity اللذين يستخدمان الترجمة على مستوى المستند، ويهم الأمر على نطاق واسع.

لماذا تفوز الترجمة على مستوى الحقل؟ تخيّل موقع تسويقي بـ10 لغات. مع الترجمة على مستوى المستند (Contentful وSanity)، سيكون لديك 10 مستندات منفصلة لكل صفحة. هل تغيّر التخطيط؟ حدّث 10 مستندات. مع نهج Storyblok على مستوى الحقل، لديك Story واحدة. يبقى الهيكل كما هو — فقط حقول النص لها متغيرات لغوية. غيّر التخطيط مرة واحدة، وتتحدث جميع اللغات العشر.

يجعل AI Translate هذا أسرع. يكتب المحررون المحتوى بلغتهم الأساسية، وينقرون "ترجمة"، ويملأ الذكاء الاصطناعي اللغات الأخرى باستخدام مزود OpenAI أو Gemini المتصل. يدعم أكثر من 34 لغة.

إليك كيفية جلب المحتوى المترجم:

// جلب story باللغة الألمانية
const response = await fetch(
  `https://api.storyblok.com/v2/cdn/stories/home` +
  `?version=published` +
  `&language=de` +
  `&token=${process.env.STORYBLOK_TOKEN}`
);
const { story } = await response.json();
// story.content يحتوي الآن على الترجمات الألمانية
// الحقول غير المترجمة تعود تلقائيًا إلى اللغة الافتراضية

معامل language يقوم بكل العمل. الحقول غير المترجمة تعود تلقائيًا إلى اللغة الافتراضية، لذا لن تحصل على صفحة معطوبة من ترجمات ناقصة.

Storyblok مقابل البدائل

بعد اختبار هذه الأنظمة الخمسة لمشاريعنا الخاصة، إليك كيف تقارن على الميزات التي تهم فعلًا في قرارات المشاريع:

اختر Storyblok إذا تضمّن مشروعك مطورين ومحرري محتوى غير تقنيين يحتاجون رؤية التغييرات بصريًا. المحرر المرئي لا مثيل له، والدولية على مستوى الحقل هي الأفضل في فئتها للمواقع متعددة اللغات.

اختر Sanity إذا كانت فريقك كثيف التطوير وتريد أقصى مرونة في المخططات. نهج Sanity المبني على الكود ولغة استعلام GROQ يمنحانك تحكمًا أكبر، لكن المحررون يحصلون على واجهة مبنية على النماذج لا معاينة مرئية. اقرأ دليلنا لـSanity للصورة الكاملة.

اختر Strapi أو Payload إذا احتجت الاستضافة الذاتية أو التحكم مفتوح المصدر. لا Storyblok ولا Sanity ولا Contentful تسمح لك بتشغيل نظام إدارة المحتوى على خوادمك الخاصة. Strapi وPayload يفعلان ذلك. راجع دليلنا لـStrapi أو دليلنا لـPayload للتفاصيل.

اختر Contentful إذا كنت في بيئة مؤسسية تقدّر نضج المنظومة والتكاملات الواسعة في السوق والأدوات التطويرية الراسخة. اقرأ دليلنا لـContentful.

للمقارنة الكاملة مع التقييمات وتوصيات المشاريع الحقيقية، راجع مقارنتنا الشاملة لـheadless CMS.

متى لا تستخدم Storyblok

لكل نظام إدارة محتوى نقاط توقف لبعض المشاريع. إليك نقاط توقف Storyblok:

تحتاج الاستضافة الذاتية. Storyblok خدمة SaaS فقط — لا يوجد خيار محلي، لا صورة Docker، لا نشر ذاتي الإدارة. إن كانت مؤسستك تتطلب سيادة البيانات أو الاستضافة المحلية، انظر إلى Payload للمشاريع ذاتية الاستضافة أو Strapi بدلًا من ذلك.

تريد المخططات في الكود. تُعرَّف مخططات مكونات Storyblok في واجهة لوحة التحكم، لا في قاعدة الكود. يمكنك تصديرها واستيرادها عبر Management API، لكنها لا تعيش في مستودع Git كمصدر حقيقة. إن كانت المخططات الخاضعة للتحكم في الإصدارات مهمة لفريقك، يوفر Sanity وPayload كلاهما نمذجة محتوى كود-أساس.

ميزانيتك محدودة على نطاق واسع. أسعار Storyblok تعمل جيدًا للفرق الصغيرة إلى المتوسطة. لكن إن كنت تدير 15+ مساحة عبر علامات تجارية متعددة مع عشرات المحررين، تتراكم التكاليف. Strapi أو Payload ذاتية الاستضافة تُلغي تكاليف ترخيص CMS بالكامل.

فريقك كله مطورون. المحرر المرئي هو الميزة المميزة في Storyblok. إن لم يحتج أحد في فريقك معاينة مرئية — إن كان الجميع مرتاحًا لتعديل JSON أو استخدام واجهة مبنية على النماذج — فأنت تدفع مقابل ميزة لن تستخدمها.

تحتاج الوصول المباشر إلى قاعدة البيانات. Storyblok يُجرّد طبقة التخزين بالكامل. لا اتصال Postgres، لا استعلامات SQL، لا وصول مباشر للبيانات. إن كان مشروعك يتطلب استعلامات قاعدة بيانات مخصصة أو انضمامات مع مصادر بيانات أخرى على مستوى قاعدة البيانات، يمنحك Payload (المبني على MongoDB/Postgres) ذلك.

من خلال تجربتنا في البناء عبر أنظمة إدارة محتوى متعددة، يتألق Storyblok حين يتعاون المطورون ومحررو المحتوى على نفس المشروع. إن كان فريقك كله مطورين، لا يستحق علاوة المحرر المرئي الدفع.

البدء مع Storyblok

يستغرق الطريق الأسرع من الصفر إلى مشروع Storyblok يعمل نحو 30 دقيقة مع Blueprints، أو ساعة بدونها. إليك التسلسل:

الخطوة 1: أنشئ حسابًا. أنشئ حسابًا مجانيًا على storyblok.com. تمنحك خطة Starter مساحة واحدة مع 25 ألف طلب API/شهر — كافٍ للتطوير والنماذج الأولية.

الخطوة 2: اختر Blueprint أو ابدأ من الصفر. إن أردت مشروعًا مهيأ مسبقًا، اختر Blueprint (Core للبساطة، Business للجاهزية للإنتاج). إن فضّلت البناء من الصفر، أنشئ مساحة فارغة.

الخطوة 3: اربط واجهتك الأمامية. لدى Storyblok SDKs وقوالب بدء رسمية لـNext.js وNuxt وAstro وSvelteKit وRemix وAngular وGatsby. لمشروع Next.js App Router:

npx create-next-app@latest my-storyblok-site
cd my-storyblok-site
npm install @storyblok/react

الخطوة 4: أعدّ رابط معاينة المحرر المرئي. في إعدادات مساحة Storyblok، اضبط رابط المعاينة على خادم التطوير المحلي (مثلًا https://localhost:3000/). المحرر المرئي يحتاج HTTPS — استخدم next dev --experimental-https أو أداة كـmkcert.

الخطوة 5: عرّف أول Blok وأنشئ Story. توجّه إلى "Components" في لوحة تحكم Storyblok، أنشئ نوع محتوى "Page" مع حقل body، ثم أنشئ Blok "Hero" قابلًا للتداخل. أنشئ أول Story باستخدام نوع محتوى "Page". اسحب Hero Blok إليها. شاهده يُصيَّر في المحرر المرئي.

لأدلة البدء السريع الخاصة بكل إطار عمل، يحتفظ Storyblok بـصفحة التقنيات مع دروس إعداد لكل إطار عمل مدعوم. إن كنت تقرر بين أطر العمل للواجهة الأمامية، تغطي مقارنتنا بين Next.js وRemix نقاط التمييز، وتساعدك مقارنتنا بين Vercel وNetlify في قرارات منصة النشر.

الأسئلة الشائعة

ما هو Storyblok CMS؟

Storyblok نظام إدارة محتوى headless مع محرر مرئي مدمج، تأسس عام 2017 في لينتس بالنمسا. يستخدم معمارية مبنية على المكونات تُعرف بـBloks لنمذجة المحتوى، ويوصّل المحتوى عبر REST وGraphQL APIs. تستخدمه شركات كـAdidas وTesla وOatly للمواقع والتطبيقات وتوصيل المحتوى متعدد القنوات.

هل Storyblok مجاني للاستخدام؟

نعم، يوفر Storyblok خطة Starter مجانية بمستخدم واحد ومساحة واحدة و25,000 طلب API شهريًا. تبدأ الخطط المدفوعة من 99 دولارًا/شهرًا لمستوى Growth مع خمسة مستخدمين. يقدم Storyblok أيضًا تجربة مجانية لمدة 45 يومًا لـGrowth Plus، وهو أكثر كرمًا من فترات تجربة معظم المنافسين.

كيف يعمل المحرر المرئي في Storyblok؟

يحمّل المحرر المرئي تطبيق واجهتك الأمامية داخل iframe ويعرض مناطق قابلة للتعديل فوق كل مكون (Blok). ينقر محررو المحتوى مباشرة على عناصر الصفحة لتعديلها ويرون التغييرات في الوقت الحقيقي. يستلزم ذلك مكتبة StoryblokBridge JavaScript في كود واجهتك الأمامية للربط بين الـiframe وواجهة تعديل Storyblok.

هل Storyblok أفضل من Contentful؟

يعتمد على أولوياتك. يوفر Storyblok محررًا مرئيًا متفوقًا ودولية على مستوى الحقل، مما يجعله أفضل لفرق التسويق التي تدير محتوى متعدد اللغات. Contentful لديه منظومة أكثر نضجًا وسوقًا أوسع من التكاملات واعتمادًا مؤسسيًا أعمق. كلاهما SaaS فقط مع هياكل أسعار مشابهة.

ما أطر العمل التي يدعمها Storyblok؟

يوفر Storyblok SDKs رسمية وقوالب بدء لـNext.js وNuxt وAstro وSvelteKit وRemix وAngular وGatsby. يغطي React SDK (@storyblok/react) وVue SDK (@storyblok/vue) أكثر المنظومتين شيوعًا. تدعم Blueprints حاليًا Next.js وNuxt وAstro للإعداد الموجَّه للمشاريع.

هل يمكن الاستضافة الذاتية لـStoryblok؟

لا. Storyblok منصة SaaS فقط بلا خيار للاستضافة الذاتية أو المحلية. إن كانت الاستضافة الذاتية متطلبًا في مشروعك — لأسباب تتعلق بسيادة البيانات أو الامتثال أو التكلفة — فكّر في Strapi (مفتوح المصدر، مبني على Node.js) أو Payload CMS (مفتوح المصدر، أصيل لـNext.js) كبدائل تدعم النشر ذاتي الاستضافة بالكامل.

ما هو FlowMotion في Storyblok؟

FlowMotion ميزة أتمتة سير العمل في Storyblok أُطلقت في 31 مارس 2026. مبني على n8n المُدار، يتصل بأكثر من 500 تكامل ويؤتمت عمليات المحتوى كتشغيل الترجمة وإخطار أصحاب المصلحة والنشر عبر المنصات. FlowMotion متاح كإضافة Enterprise/Elite، غير مدرج في خطتي Growth أو Growth Plus.

كيف يتعامل Storyblok مع الدولية؟

يستخدم Storyblok الترجمة على مستوى الحقل، مما يعني أن Story واحدة تحتوي متغيرات مترجمة لكل حقل بدلًا من تكرار المستند بأكمله لكل لغة. يتوسع هذا النهج أفضل من الدولية على مستوى المستند (المستخدم في Contentful وSanity) للمواقع ذات اللغات الكثيرة. يدعم AI Translate أكثر من 34 لغة باستخدام مفتاح OpenAI أو Gemini API الخاص بك.

من يستخدم Storyblok؟

تضم قائمة عملاء Storyblok: Adidas وTesla وOatly وVirgin Media O2 وdm-drogerie markt وSpendesk وPanini. تخدم المنصة المؤسسات الكبرى التي تدير عمليات محتوى متعددة الأسواق والشركات الناشئة المتنامية التي تحتاج محررًا مرئيًا لتمكين فرق المحتوى غير التقنية. جمع Storyblok 138 مليون دولار في إجمالي التمويل من خلال Series C.

ما هي Blueprints في Storyblok؟

Blueprints قوالب إعداد موجَّهة للمشروع أطلقها Storyblok في يوليو 2025. اختر Core Blueprint (قالب بدء بسيط) أو Business Blueprint (جاهز للإنتاج مع مكونات مسبقة البناء). اختر إطار عملك — Next.js أو Nuxt أو Astro — فينشئ Storyblok مستودع GitHub متصلًا مع pipeline نشر إلى Vercel أو Netlify في دقائق.