Inicio rápido

Una publicación sobre esquemas

Genera esquemas de Zod con tipado seguro

Esta función te permite obtener la descripción de tus componentes en forma de un esquema Zod con tipado seguro, lo que proporciona:

Validación de esquemas con prioridad para TypeScript
Inferencia de tipos estática

Más información: https://zod.dev

Configuración

Para obtener tu esquema de Zod, deberás:

Cargar las dependencias necesarias
Crear un script usando las utilidades de cms-renderer

Estructura del proyecto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # archivo del 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 no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] La API no devolvió componentes. Verifica que PROFOUND_API_KEY sea válido y apunte al sitio web correcto.'
    );
  }

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

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

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

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

Ejemplo de configuración de CMS

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

Configuración de `package.json`

Nota: Si no tienes un tsconfig.json, elimina la bandera --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",
    "...": "..."
  }
}

Ejecución del script

bun run generate-schemas

Salida de ejemplo:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Se encontraron 3 componentes: post, categories, header
[generate-schemas] Listo.

Estructura del proyecto actualizada

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

Uso en `page.tsx`

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

// Úsalo para un análisis con tipado seguro
petFoodPostSchema.parse(obj);

Notas

Inspecciona el archivo generado para comprender la estructura de tu componente
Vuelve a ejecutar el script cada vez que cambie la estructura de tu componente:

bun run generate-schemas

Puedes integrar esto en tu flujo de trabajo de desarrollo o de compilación
Actualiza los componentes desde el panel de administración y luego regenera localmente

Nextjson y código de Claude›

Inicio rápido

Una publicación sobre esquemas

Genera esquemas de Zod con tipado seguro

Esta función te permite obtener la descripción de tus componentes en forma de un esquema Zod con tipado seguro, lo que proporciona:

Validación de esquemas con prioridad para TypeScript
Inferencia de tipos estática

Más información: https://zod.dev

Configuración

Para obtener tu esquema de Zod, deberás:

Cargar las dependencias necesarias
Crear un script usando las utilidades de cms-renderer

Estructura del proyecto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # archivo del 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 no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY no está configurado. Configúralo en tu entorno o en el archivo .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] La API no devolvió componentes. Verifica que PROFOUND_API_KEY sea válido y apunte al sitio web correcto.'
    );
  }

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

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

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

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

Ejemplo de configuración de CMS

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

Configuración de `package.json`

Nota: Si no tienes un tsconfig.json, elimina la bandera --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",
    "...": "..."
  }
}

Ejecución del script

bun run generate-schemas

Salida de ejemplo:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Se encontraron 3 componentes: post, categories, header
[generate-schemas] Listo.

Estructura del proyecto actualizada

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

Uso en `page.tsx`

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

// Úsalo para un análisis con tipado seguro
petFoodPostSchema.parse(obj);

Notas

Inspecciona el archivo generado para comprender la estructura de tu componente
Vuelve a ejecutar el script cada vez que cambie la estructura de tu componente:

bun run generate-schemas

Puedes integrar esto en tu flujo de trabajo de desarrollo o de compilación
Actualiza los componentes desde el panel de administración y luego regenera localmente

Nextjson y código de Claude›

Inicio rápido

Genera esquemas de Zod con tipado seguro

Configuración

Estructura del proyecto

Script: generated-schema.ts

Ejemplo de configuración de CMS

Configuración de package.json

Ejecución del script

Estructura del proyecto actualizada

Uso en page.tsx

Notas

Inicio rápido

Genera esquemas de Zod con tipado seguro

Configuración

Estructura del proyecto

Script: generated-schema.ts

Ejemplo de configuración de CMS

Configuración de package.json

Ejecución del script

Estructura del proyecto actualizada

Uso en page.tsx

Notas

Script: `generated-schema.ts`

Configuración de `package.json`

Uso en `page.tsx`

Script: `generated-schema.ts`

Configuración de `package.json`

Uso en `page.tsx`