Изтегляйте 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 не е зададен. Задайте го във вашата среда или във файла .env.'
);
}
if (!websiteId) {
throw new Error(
'[generate-schemas] NEXT_PUBLIC_PROFOUND_WEBSITE_ID не е зададен. Задайте го във вашата среда или във файла .env.'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] PROFOUND_API_KEY не е зададен. Задайте го във вашата среда или във файла .env.'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
ако (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) за типобезопасно парсване на обекти
Можете да актуализирате вашия компонент от администраторския панел и да изтеглите актуализираната схема още веднъж за лесна разработка