Guia rápido

Uma postagem sobre schemas

Gere esquemas Zod com tipagem segura

Este recurso permite obter a descrição dos seus componentes na forma de um schema Zod com tipagem segura, proporcionando:

Validação de schemas com foco em TypeScript
Inferência de tipos estática

Saiba mais: https://zod.dev

Configuração

Para obter seu schema Zod, você irá:

Carregar as dependências necessárias
Criar um script usando utilitários do cms-renderer

Estrutura do projeto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # arquivo de 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 não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Nenhum componente retornado pela API. Verifique se PROFOUND_API_KEY é válido e aponta para o site correto.'
    );
  }

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

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

  console.log('[generate-schemas] Concluído.');
}

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

Exemplo de configuração do CMS

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

Configuração do `package.json`

Observação: Se você não tiver um tsconfig.json, remova a 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",
    "...": "..."
  }
}

Executando o script

bun run generate-schemas

Exemplo de saída:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Foram encontrados 3 componentes: post, categories, header
[generate-schemas] Concluído.

Estrutura do projeto atualizada

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

Uso em `page.tsx`

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

// Use para análise com tipagem segura
petFoodPostSchema.parse(obj);

Observações

Inspecione o arquivo gerado para entender a estrutura do seu componente
Execute o script novamente sempre que a estrutura do seu componente mudar:

bun run generate-schemas

Você pode integrar isso ao seu fluxo de trabalho de desenvolvimento ou build
Atualize os componentes pelo painel administrativo e, em seguida, regenere localmente

NextSplit Screen JSON Component Builder with LLM›

Guia rápido

Uma postagem sobre schemas

Gere esquemas Zod com tipagem segura

Este recurso permite obter a descrição dos seus componentes na forma de um schema Zod com tipagem segura, proporcionando:

Validação de schemas com foco em TypeScript
Inferência de tipos estática

Saiba mais: https://zod.dev

Configuração

Para obter seu schema Zod, você irá:

Carregar as dependências necessárias
Criar um script usando utilitários do cms-renderer

Estrutura do projeto

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # arquivo de 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 não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY não está definido. Defina-o no seu ambiente ou arquivo .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Nenhum componente retornado pela API. Verifique se PROFOUND_API_KEY é válido e aponta para o site correto.'
    );
  }

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

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

  console.log('[generate-schemas] Concluído.');
}

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

Exemplo de configuração do CMS

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

Configuração do `package.json`

Observação: Se você não tiver um tsconfig.json, remova a 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",
    "...": "..."
  }
}

Executando o script

bun run generate-schemas

Exemplo de saída:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Foram encontrados 3 componentes: post, categories, header
[generate-schemas] Concluído.

Estrutura do projeto atualizada

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

Uso em `page.tsx`

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

// Use para análise com tipagem segura
petFoodPostSchema.parse(obj);

Observações

Inspecione o arquivo gerado para entender a estrutura do seu componente
Execute o script novamente sempre que a estrutura do seu componente mudar:

bun run generate-schemas

Você pode integrar isso ao seu fluxo de trabalho de desenvolvimento ou build
Atualize os componentes pelo painel administrativo e, em seguida, regenere localmente

NextSplit Screen JSON Component Builder with LLM›

Guia rápido

Gere esquemas Zod com tipagem segura

Configuração

Estrutura do projeto

Script: generated-schema.ts

Exemplo de configuração do CMS

Configuração do package.json

Executando o script

Estrutura do projeto atualizada

Uso em page.tsx

Observações

Guia rápido

Gere esquemas Zod com tipagem segura

Configuração

Estrutura do projeto

Script: generated-schema.ts

Exemplo de configuração do CMS

Configuração do package.json

Executando o script

Estrutura do projeto atualizada

Uso em page.tsx

Observações

Script: `generated-schema.ts`

Configuração do `package.json`

Uso em `page.tsx`

Script: `generated-schema.ts`

Configuração do `package.json`

Uso em `page.tsx`