ดึงคำอธิบาย zod ของคอมโพเนนต์ของคุณในช่วงคอมไพล์ด้วยสคริปต์
ฟีเจอร์นี้ช่วยให้คุณรับคำอธิบายของคอมโพเนนต์ในรูปแบบคำอธิบาย "Zod" ที่ปลอดภัยตามชนิดข้อมูล ซึ่งมอบการตรวจสอบสคีมาแบบ TS-first และการอนุมานชนิดแบบสถิตสำหรับคอนเทนต์ของคุณ
เพื่อตรวจดึงสคีมา Zod ของเรา เราจะโหลดไลบรารีบางส่วนและสร้างสคริปต์ที่ใช้ยูทิลิตีจาก cms-renderer ของเรา
มาเริ่มจากโครงสร้างโปรเจ็กต์ของเรากัน
apps/
web/
app/
page.tsx
scripts/
generate-schemas.ts // this is where our script lives
ตอนนี้เราจะไปแก้ไฟล์ generated-schema.ts นี้
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // importing my config
async function main() {
const { cmsUrl, websiteId, apiKey } = 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] NEXT_PUBLIC_PROFOUND_WEBSITE_ID is not set. Set it in your environment or .env file.'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] PROFOUND_API_KEY is not set. Set it in your environment or .env file.'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
if (schemas.length === 0) {
throw new Error(
'[generate-schemas] No components returned from the API. Check that PROFOUND_API_KEY is valid and points at the right website.'
);
}
await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');
console.log('[generate-schemas] Done.');
}
main().catch((err) => {
console.error('[generate-schemas] Failed:', 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 ของเรา เราจะกำหนดวิธีการรันสคริปต์และระบุ dependencies บางส่วน
หมายเหตุ: หากคุณยังไม่มี 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] Done.
เราควรได้ผลลัพธ์ที่คล้ายกัน และจะเห็นไฟล์ใหม่ในโครงสร้างโปรเจ็กต์ของเรา
apps/
web/
app/
page.tsx
scripts/
generated-schema.ts // this is where our script lives
generated/
cms-schema.ts // generated zod schema
คุณสามารถเปิดดูภายในเพื่อดูว่าสคีมาของคุณมีหน้าตาอย่างไร หากต้องการอัปเดตไฟล์นี้ คุณต้องรันคำสั่ง bun run generate-schemas อีกครั้ง ซึ่งคุณสามารถเชื่อมกับเวิร์กโฟลว์ dev หรือ build ได้
จากนั้นเราสามารถดึงอ็อบเจกต์ zod เหล่านี้เข้ามาใช้ในไฟล์ page.tsx ได้ดังนี้
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';
// call petFoodPostSchema.parse(obj) for type safe parsing of objects
คุณสามารถอัปเดตคอมโพเนนต์จากแผงผู้ดูแลระบบและดึงสคีมาที่อัปเดตอีกครั้งเพื่อความสะดวกในการพัฒนา