Húzd le a komponenseid Zod-leírását fordításkor egy script segítségével.
Ez a funkció lehetővé teszi, hogy a komponensed leírását típusbiztos "Zod" leírás formájában kapd meg, amely TS-első sémaellenőrzést és statikus típuslevezetést biztosít a tartalmadhoz.
Ahhoz, hogy lehúzzuk a Zod sémánkat, be fogunk tölteni néhány függőséget, és létrehozunk egy scriptet, amely a cms-renderer néhány segédprogramját használja.
Kezdjük a projektstruktúránkkal
apps/
web/
app/
page.tsx
scripts/
generate-schemas.ts // itt található a scriptünk
Most szerkesztjük ezt a generated-schema.ts fájlt
import { fetchAllCustomSchemaFields, saveZodSchemaCode } from 'cms-renderer/lib/custom-schemas';
import { cmsConfig } from '../lib/cms-config'; // a konfigurációm importálása
async function main() {
const { cmsUrl, websiteId, apiKey } = cmsConfig;
if (!cmsUrl) {
throw new Error(
'[generate-schemas] A NEXT_PUBLIC_CMS_API_URL nincs beállítva. Állítsd be a környezetedben vagy az .env fájlban.'
);
}
if (!websiteId) {
throw new Error(
'[generate-schemas] A NEXT_PUBLIC_PROFOUND_WEBSITE_ID nincs beállítva. Állítsd be a környezetedben vagy az .env fájlban.'
);
}
if (!apiKey) {
throw new Error(
'[generate-schemas] A PROFOUND_API_KEY nincs beállítva. Állítsd be a környezetedben vagy az .env fájlban.'
);
}
const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });
if (schemas.length === 0) {
throw new Error(
'[generate-schemas] Az API nem adott vissza komponenseket. Ellenőrizd, hogy a PROFOUND_API_KEY érvényes-e, és a megfelelő webhelyre mutat-e.'
);
}
await saveZodSchemaCode(schemas, './generated/cms-schemas.ts');
console.log('[generate-schemas] Kész.');
}
main().catch((err) => {
console.error('[generate-schemas] Sikertelen:', err);
process.exit(1);
});
A CmsConfig-nek így kell kinéznie
export const cmsConfig = {
cmsUrl: process.env.NEXT_PUBLIC_CMS_API_URL,
apiKey: process.env.CMS_API_KEY,
websiteId: '...',
};
A package.json fájlunkban meghatározzuk, hogyan futtassuk a scriptet, és megadunk néhány függőséget
MEGJEGYZÉS: Ha nincs tsconfigod, akkor eltávolíthatod a
--tsconfigjelzőt és az értékét
{
"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",
"...": "..."
}
}
Most, miután futtatjuk
$ bun run generate-schemas
tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Kész.
Hasonló kimenetet kell kapnunk, és láthatunk egy új fájlt a projektstruktúránkban
apps/
web/
app/
page.tsx
scripts/
generated-schema.ts // itt található a scriptünk
generated/
cms-schema.ts // generált zod séma
Belül is megvizsgálhatod, hogyan néz ki a sémád. A fájl frissítéséhez újra kell futtatnod a bun run generate-schemas parancsot, amelyet összekapcsolhatsz a dev vagy build munkafolyamatoddal.
Ezután a következő módon húzhatjuk be ezeket a zod objektumokat a page.tsx fájlunkba
import type { PetFoodPost, SiteConfig } from '@/generated/cms-schemas';
import { petFoodPostSchema } from '@/generated/cms-schemas';
// hívd meg a petFoodPostSchema.parse(obj) függvényt az objektumok típuskövető feldolgozásához
A komponensedet frissítheted az admin felületről, és a könnyebb fejlesztés érdekében ismét lehúzhatod a frissített sémát