البدء السريع

إنشاء مخططات Zod آمنة من ناحية النوع

تتيح لك هذه الميزة الحصول على وصف المخطط الخاص بك على شكل مخطط Zod آمن من ناحية النوع، مما يوفر:

• التحقق من صحة المخططات باستخدام TypeScript أولاً
• استنتاج الأنواع بشكل ثابت

تعرّف على المزيد: https://zod.dev

الإعداد

لسحب مخطط Zod الخاص بك، ستقوم بما يلي:

1. تحميل التبعيات المطلوبة
2. إنشاء برنامج نصي باستخدام الأدوات المساعدة من cms-renderer

بنية المشروع

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # ملف البرنامج النصي

البرنامج النصي: generated-schema.ts

import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config';

async function main() {
  const { cmsUrl, websiteId } = cmsConfig;

  if (!cmsUrl) {
    throw new Error(
      '[generate-schemas] NEXT_PUBLIC_CMS_API_URL is not set. Set it in your environment or .env file.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID is not set. Set it in your environment or .env file.'
    );
  }

  await saveZodSchemaCode(
    await fetchAllCustomSchemaFields(cmsConfig),
    './generated/cms-schemas.ts'
  );

  console.log('[generate-schemas] Done.');
}

main().catch((err) => {
  console.error('[generate-schemas] Failed:', err);
  process.exit(1);
});

مثال على إعدادات نظام إدارة المحتوى (CMS)

export const cmsConfig = {
  cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
  apiKey: process.env.CMS_API_KEY,
  websiteId: '...',
};

إعداد ملف package.json

ملاحظة: إذا لم يكن لديك ملف tsconfig.json، فقم بإزالة الخيار --tsconfig.

{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
    "...": "..."
  },
  "dependencies": {

تشغيل البرنامج النصي

bun run generate-schemas

ناتج مثال:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Done.

بنية المشروع بعد التحديث

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # مخطط Zod تم توليده

الاستخدام في page.tsx

import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';

// استخدامه للتحليل الآمن من ناحية النوع
petFoodPostSchema.parse(obj);

ملاحظات

• تفحّص الملف المُولَّد لفهم بنية المخطط الخاص بك
• أعد تشغيل البرنامج النصي كلما تغيّر المخطط الخاص بك:

bun run generate-schemas

• يمكنك دمج ذلك ضمن سير عمل التطوير أو البناء لديك
• حدّث المخططات عبر لوحة الإدارة، ثم أعد التوليد محليًا