Ātrā uzsākšana

Raksts par shēmām

Ģenerējiet tipdrošas Zod shēmas

Šī funkcija ļauj iegūt jūsu komponentu aprakstu tipdrošas Zod shēmas formā, nodrošinot:

Shēmu validāciju ar TypeScript kā pamatu
Statisku tipu secināšanu

Uzziniet vairāk: https://zod.dev

Iestatīšana

Lai iegūtu savu Zod shēmu, jums būs nepieciešams:

Ielādēt nepieciešamās atkarības
Izveidot skriptu, izmantojot cms-renderer utilītas

Projekta struktūra

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # skripta fails

Skripts: `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 nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API neatgrieza nevienu komponenti. Pārbaudiet, vai PROFOUND_API_KEY ir derīgs un norāda uz pareizo vietni.'
    );
  }

  console.log(
    `[generate-schemas] Atrastas ${schemas.length} komponentes: ${schemas.map((s) => s.name).join(', ')}`
  );

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

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

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

CMS konfigurācijas piemērs

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

`package.json` konfigurācija

Piezīme: Ja jums nav tsconfig.json, noņemiet --tsconfig karogu.

{
  "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",
    "...": "..."
  }
}

Skripta palaišana

bun run generate-schemas

Piemēra izvade:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Atrastas 3 komponentes: post, categories, header
[generate-schemas] Pabeigts.

Atjauninātā projekta struktūra

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # ģenerētā Zod shēma

Izmantošana failā `page.tsx`

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

// Izmantojiet tipdrošai parsēšanai
petFoodPostSchema.parse(obj);

Piezīmes

Pārbaudiet ģenerēto failu, lai saprastu jūsu komponenta struktūru
Palaidiet skriptu vēlreiz ikreiz, kad mainās jūsu komponenta struktūra:

bun run generate-schemas

Varat integrēt to savā izstrādes vai būvēšanas darbplūsmā
Atjauniniet komponentes, izmantojot administrēšanas paneli, un pēc tam ģenerējiet tās lokāli

NextSplit Screen JSON Component Builder with LLM›

Ātrā uzsākšana

Raksts par shēmām

Ģenerējiet tipdrošas Zod shēmas

Šī funkcija ļauj iegūt jūsu komponentu aprakstu tipdrošas Zod shēmas formā, nodrošinot:

Shēmu validāciju ar TypeScript kā pamatu
Statisku tipu secināšanu

Uzziniet vairāk: https://zod.dev

Iestatīšana

Lai iegūtu savu Zod shēmu, jums būs nepieciešams:

Ielādēt nepieciešamās atkarības
Izveidot skriptu, izmantojot cms-renderer utilītas

Projekta struktūra

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # skripta fails

Skripts: `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 nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY nav iestatīts. Iestatiet to savā vidē vai .env failā.'
    );
  }

  const schemas = await fetchAllCustomSchemaFields({ cmsUrl, websiteId, apiKey });

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API neatgrieza nevienu komponenti. Pārbaudiet, vai PROFOUND_API_KEY ir derīgs un norāda uz pareizo vietni.'
    );
  }

  console.log(
    `[generate-schemas] Atrastas ${schemas.length} komponentes: ${schemas.map((s) => s.name).join(', ')}`
  );

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

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

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

CMS konfigurācijas piemērs

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

`package.json` konfigurācija

Piezīme: Ja jums nav tsconfig.json, noņemiet --tsconfig karogu.

{
  "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",
    "...": "..."
  }
}

Skripta palaišana

bun run generate-schemas

Piemēra izvade:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Atrastas 3 komponentes: post, categories, header
[generate-schemas] Pabeigts.

Atjauninātā projekta struktūra

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # ģenerētā Zod shēma

Izmantošana failā `page.tsx`

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

// Izmantojiet tipdrošai parsēšanai
petFoodPostSchema.parse(obj);

Piezīmes

Pārbaudiet ģenerēto failu, lai saprastu jūsu komponenta struktūru
Palaidiet skriptu vēlreiz ikreiz, kad mainās jūsu komponenta struktūra:

bun run generate-schemas

Varat integrēt to savā izstrādes vai būvēšanas darbplūsmā
Atjauniniet komponentes, izmantojot administrēšanas paneli, un pēc tam ģenerējiet tās lokāli

NextSplit Screen JSON Component Builder with LLM›

Ātrā uzsākšana

Ģenerējiet tipdrošas Zod shēmas

Iestatīšana

Projekta struktūra

Skripts: generated-schema.ts

CMS konfigurācijas piemērs

package.json konfigurācija

Skripta palaišana

Atjauninātā projekta struktūra

Izmantošana failā page.tsx

Piezīmes

Ātrā uzsākšana

Ģenerējiet tipdrošas Zod shēmas

Iestatīšana

Projekta struktūra

Skripts: generated-schema.ts

CMS konfigurācijas piemērs

package.json konfigurācija

Skripta palaišana

Atjauninātā projekta struktūra

Izmantošana failā page.tsx

Piezīmes

Skripts: `generated-schema.ts`

`package.json` konfigurācija

Izmantošana failā `page.tsx`

Skripts: `generated-schema.ts`

`package.json` konfigurācija

Izmantošana failā `page.tsx`