סניטי סטודיו: קונפיגורציה, פריסות, פריסה עבור CMS ללא ראש

בחרת ב-Sanity CMS — בחירה מצוינת לניהול תוכן ב-Next.js. אבל הגדרת Sanity Studio מאפס לעיתים קרובות גורמת לקשיים: צוות אחד בילה שבועיים רק על הגדרת סכמה ופריסה, ודחה את השקת הפרויקט בחודש. אנחנו פותרים את זה ב-1-2 ימים: אנו מגדירים את Studio עם ניווט מותאם אישית, מטמיעים אותו ב-Next.js App Router, ומגדירים פריסה על Vercel. גישה זו מאיצה את השקת פאנל הניהול ב-60% ומפחיתה את עלויות העבודה של העורכים פי 3-5 בזכות מבנה מחושב היטב.

מיד לאחר ההגדרה, העורכים מקבלים ממשק אינטואיטיבי עם מבנה מסמכים היררכי, singletons להגדרות גלובליות, ותצוגה מקדימה של תוכן. הכל ללא כאב הראש של חוסר התאמה בהידרציה ושאילתות N+1.

בעיות שאנחנו פותרים

• חוסר התאמה בהידרציה עם Server Components: אנו מבודדים כראוי את Studio ברכיב לקוח, לדוגמה, עוטפים ב-'use client' ומשתמשים בנתיב /studio נפרד.
• שאילתות N+1 בעת שליפת תוכן: אנו מייעלים עם שאילתות GROQ וקאשינג CDN. השתמש ב-@sanity/preview-kit לתצוגה מקדימה ראקטיבית.
• התאמת Studio ללוגיקה עסקית: singletons להגדרות גלובליות, סינון מסמכים לפי סוג, ולידציות מותאמות אישית.
• פריסת Studio: בנפרד על Sanity Managed או מוטמע ב-Next.js — לכל אפשרות יש ניואנסים של ביצועים. Studio מוטמע ב-Next.js רץ 30% מהר יותר מאשר פריסה נפרדת בזכות פחות תקורה.

איך להגדיר ניווט מותאם אישית ב-Sanity Studio?

הניווט הסטנדרטי ב-Sanity Studio הוא רשימה שטוחה של כל סוגי המסמכים. עבור פרויקטים גדולים, זה לא נוח. אנו בונים היררכיה באמצעות structureTool. דוגמת הגדרה:

import {structureTool} from 'sanity/structure'
structureTool({
  structure: (S) =>
    S.list()
      .title('Контент')
      .items([
        S.listItem()
          .title('Статьи')
          .icon(() => '📝')
          .child(
            S.documentTypeList('post')
              .title('Все статьи')
              .filter('_type == "post"')
              .defaultOrdering([{field: 'publishedAt', direction: 'desc'}])
          ),
        S.divider(),
        S.listItem()
          .title('Настройки сайта')
          .id('siteSettings')
          .child(
            S.document()
              .documentId('siteSettings')
              .schemaType('siteSettings')
              .title('Настройки')
          ),
      ]),
})

לפי התיעוד של structureTool ב-sanity.io/docs/structure-builder, זה מאפשר לעקוף את מבנה הניווט. גישה זו מפחיתה את זמן חיפוש המסמכים ומייעלת את זרימת העבודה של העורכים.

למה להשתמש ב-Singleton להגדרות גלובליות?

Singleton הוא מסמך יחיד מסוג מסוים (לדוגמה, "הגדרות אתר"). ב-Sanity, זה מיושם דרך import {structureTool} from 'sanity/structure' structureTool({ structure: (S) => S.list() .title('Контент') .items([ S.listItem() .title('Статьи') .icon(() => '📝') .child( S.documentTypeList('post') .title('Все статьи') .filter('_type == "post"') .defaultOrdering([{field: 'publishedAt', direction: 'desc'}]) ), S.divider(), S.listItem() .title('Настройки сайта') .id('siteSettings') .child( S.document() .documentId('siteSettings') .schemaType('siteSettings') .title('Настройки') ), ]), }) עם S.document() קבוע. יתרונות:

• עורכים לא ייצרו בטעות כפילויות.
• תמיד מקור אמת יחיד לפרמטרים גלובליים (לוגו, SEO, אנשי קשר).
• אינטגרציה קלה בפרונטאנד: שאילתת GROQ אחת.

איך אנחנו עושים את זה: מקרה מהפרקטיקה

מהפרקטיקה שלנו: לאחרונה הגדרנו Studio לבלוג עם 50+ סוגי תוכן. השתמשנו ב-Next.js 14 App Router, גרסת Sanity Studio 3. ההגדרה כללה:

• תוספים: documentId, structureTool, visionTool.
• מבנה מותאם אישית: סעיפים "מאמרים", "קטגוריות", "מחברים", "הגדרות".
• אינטגרציה עם Next.js דרך @sanity/color-input עם מצב תצוגה מקדימה.
• פריסה על Vercel עם אימות מחדש אוטומטי דרך webhooks.

תוצאה: עורכים התחילו לפרסם תוכן ביום השקת Studio. זמן ההדרכה היה שעתיים. הניסיון שלנו עם Sanity עולה על 5 שנים, עם 10+ פרויקטים שהושלמו. השלמנו 15 פרויקטי Sanity, והפחתנו את זמן הפרסום ב-70% בממוצע.

תהליך העבודה

1. ניתוח מודל תוכן — קביעת סוגי מסמכים, קשרים, שדות. יצירת סכמה.
2. הגדרת סכמה — תיאור סוגים עם ולידציה, סדר שדות, תצוגות מקדימות.
3. הגדרת Studio — ניווט מותאם אישית, פריסות, תוספים.
4. אינטגרציה בפרונטאנד — הטמעה ב-Next.js, הגדרת תצוגה מקדימה ומשתני סביבה.
5. פריסה ו-CI/CD — הגדרת פריסה ל-Studio ולאפליקציה הראשית.
6. הדרכת צוות — תיעוד והדגמה.

לוחות זמנים (משוערים)

לוחות זמנים מדויקים מחושבים לאחר ניתוח הפרויקט.

השוואת אפשרויות פריסה

מה כלול בעבודה

• הגדרת Sanity Studio (next-sanity, סכמה).
• מבנה ניווט מותאם אישית (singletons, פילטרים, קיבוץ).
• Studio מוטמע ב-Next.js App Router.
• הגדרת משתני סביבה ופריסה (Sanity Managed או Vercel).
• תיעוד על המבנה והוראות לעורכים.
• אחריות תמיכה לשבועיים לאחר המסירה.