Guida rapida

Un post sugli schemi

Genera schemi Zod con sicurezza di tipo

Questa funzionalità consente di ottenere la descrizione dei componenti sotto forma di uno schema Zod con sicurezza di tipo, offrendo:

Validazione degli schemi incentrata su TypeScript
Inferenza di tipi statica

Per saperne di più: https://zod.dev

Configurazione

Per recuperare il tuo schema Zod, devi:

Caricare le dipendenze necessarie
Creare uno script utilizzando le utility di cms-renderer

Struttura del progetto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # file di script

Script: `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 non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Nessun componente restituito dall\'API. Verifica che PROFOUND_API_KEY sia valido e punti al sito corretto.'
    );
  }

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

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

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

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

Esempio di configurazione del CMS

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

Configurazione di `package.json`

Nota: Se non hai un tsconfig.json, rimuovi il flag --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",
    "...": "..."
  }
}

Esecuzione dello script

bun run generate-schemas

Output di esempio:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Trovati 3 componenti: post, categories, header
[generate-schemas] Operazione completata.

Struttura del progetto aggiornata

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # schema Zod generato

Utilizzo in `page.tsx`

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

// Da usare per l'analisi con sicurezza di tipo
petFoodPostSchema.parse(obj);

Note

Esamina il file generato per comprendere la struttura del tuo componente
Esegui nuovamente lo script ogni volta che la struttura del tuo componente cambia:

bun run generate-schemas

Puoi integrare questo nel tuo flusso di lavoro di sviluppo o di build
Aggiorna i componenti tramite il pannello di amministrazione, quindi rigenerali in locale

NextSplit Screen JSON Component Builder with LLM›

Guida rapida

Un post sugli schemi

Genera schemi Zod con sicurezza di tipo

Questa funzionalità consente di ottenere la descrizione dei componenti sotto forma di uno schema Zod con sicurezza di tipo, offrendo:

Validazione degli schemi incentrata su TypeScript
Inferenza di tipi statica

Per saperne di più: https://zod.dev

Configurazione

Per recuperare il tuo schema Zod, devi:

Caricare le dipendenze necessarie
Creare uno script utilizzando le utility di cms-renderer

Struttura del progetto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # file di script

Script: `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 non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY non è impostato. Impostalo nel tuo ambiente o nel file .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Nessun componente restituito dall\'API. Verifica che PROFOUND_API_KEY sia valido e punti al sito corretto.'
    );
  }

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

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

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

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

Esempio di configurazione del CMS

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

Configurazione di `package.json`

Nota: Se non hai un tsconfig.json, rimuovi il flag --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",
    "...": "..."
  }
}

Esecuzione dello script

bun run generate-schemas

Output di esempio:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Trovati 3 componenti: post, categories, header
[generate-schemas] Operazione completata.

Struttura del progetto aggiornata

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # schema Zod generato

Utilizzo in `page.tsx`

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

// Da usare per l'analisi con sicurezza di tipo
petFoodPostSchema.parse(obj);

Note

Esamina il file generato per comprendere la struttura del tuo componente
Esegui nuovamente lo script ogni volta che la struttura del tuo componente cambia:

bun run generate-schemas

Puoi integrare questo nel tuo flusso di lavoro di sviluppo o di build
Aggiorna i componenti tramite il pannello di amministrazione, quindi rigenerali in locale

NextSplit Screen JSON Component Builder with LLM›

Guida rapida

Genera schemi Zod con sicurezza di tipo

Configurazione

Struttura del progetto

Script: generated-schema.ts

Esempio di configurazione del CMS

Configurazione di package.json

Esecuzione dello script

Struttura del progetto aggiornata

Utilizzo in page.tsx

Note

Guida rapida

Genera schemi Zod con sicurezza di tipo

Configurazione

Struttura del progetto

Script: generated-schema.ts

Esempio di configurazione del CMS

Configurazione di package.json

Esecuzione dello script

Struttura del progetto aggiornata

Utilizzo in page.tsx

Note

Script: `generated-schema.ts`

Configurazione di `package.json`

Utilizzo in `page.tsx`

Script: `generated-schema.ts`

Configurazione di `package.json`

Utilizzo in `page.tsx`