एक स्क्रिप्ट का उपयोग करके कंपाइल समय पर अपने कॉम्पोनेन्ट्स का Zod विवरण पुल करें
यह सुविधा आपको अपने कॉम्पोनेन्ट का विवरण टाइप-सुरक्षित "Zod" विवरण के रूप में प्राप्त करने की अनुमति देती है, जो आपके कंटेंट के लिए TS-प्रथम स्कीमा वैलिडेशन और स्थैतिक टाइप अनुमान प्रदान करता है।
अपनी Zod स्कीमा को पुल करने के लिए, हम कुछ निर्भरताएँ लोड करेंगे और एक स्क्रिप्ट बनाएँगे जो हमारे cms-renderer से कुछ उपयोगिताओं का उपयोग करती है।
आइए अपने प्रोजेक्ट स्ट्रक्चर से शुरू करें
apps/
web/
app/
page.tsx
scripts/
generate-schemas.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, apiKey } = cmsConfig;
if (!cmsUrl) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_CMS_API_URL सेट नहीं है। इसे अपने environment या .env फ़ाइल में सेट करें।'
);
}
if (!websiteId) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID सेट नहीं है। इसे अपने environment या .env फ़ाइल में सेट करें।'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] PROFOUND_API_KEY सेट नहीं है। इसे अपने environment या .env फ़ाइल में सेट करें।'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
if (schemas.length === 0) {
throw new Error(
'[generate-schemas] API से कोई कॉम्पोनेन्ट वापस नहीं आया। जाँचें कि PROFOUND_API_KEY वैध है और सही वेबसाइट की ओर इंगित करता है।'
);
}
await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');
console.log('[generate-schemas] पूरा हुआ।');
}
main().catch((err) => {
console.error('[generate-schemas] विफल रहा:', err);
process.exit(1);
});
आपका CmsConfig कुछ इस प्रकार दिखना चाहिए
export const cmsConfig = {
cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
apiKey: process.env.CMS_API_KEY,
websiteId: '...',
};
अपने package.json के अंदर, हम स्क्रिप्ट चलाने का तरीका और कुछ निर्भरताएँ परिभाषित करते हैं
नोट: यदि आपके पास tsconfig नहीं है, तो आप
--tsconfigफ़्लैग और उसके मान को हटा सकते हैं
{
"name": "web",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"generate-schemas": "tsx --tsconfig tsconfig.json scripts/generate-schemas.ts",
"...": "..."
},
"dependencies": {
"cms-renderer": "0.3.1",
"zod": "^4.3.6",
"...": "..."
},
"devDependencies": {
"tsx": "^4.21.0",
"object-hash": "^3.0.0",
"...": "..."
}
}
अब, जब हम इसे चलाते हैं
$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] पूरा हुआ।
हमें इसी तरह का आउटपुट प्राप्त होना चाहिए, और हम अपने प्रोजेक्ट स्ट्रक्चर में एक नई फ़ाइल देख सकते हैं
apps/
web/
app/
page.tsx
scripts/
generated-schema.ts // यह वह स्थान है जहाँ हमारी स्क्रिप्ट रहती है
generated/
cms-schema.ts // उत्पन्न zod स्कीमा
आप अंदर निरीक्षण कर सकते हैं और देख सकते हैं कि आपका स्कीमा कैसा दिखता है। इस फ़ाइल को अपडेट करने के लिए, आपको bun run generate-schemas कमांड को फिर से चलाना होगा, जिसे आप अपने dev या build वर्कफ़्लो से जोड़ सकते हैं।
फिर हम इन zod ऑब्जेक्ट्स को इस तरह अपने page.tsx फ़ाइल में ला सकते हैं
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';
// ऑब्जेक्ट्स के टाइप-सुरक्षित पार्सिंग के लिए petFoodPostSchema.parse(obj) कॉल करें
आप एडमिन पैनल से अपने कॉम्पोनेन्ट को अपडेट कर सकते हैं और आसान विकास के लिए अपडेटेड स्कीमा को फिर से पुल कर सकते हैं।