Hızlı Başlangıç

Şemalar hakkında bir gönderi

Tür Güvenli Zod Şemaları Oluşturun

Bu özellik, bileşen açıklamanızı tür güvenli bir Zod şeması biçiminde almanıza olanak tanıyarak şunları sunar:

TypeScript öncelikli şema doğrulaması
Statik tür çıkarımı

Daha fazla bilgi edinin: https://zod.dev

Kurulum

Zod şemanızı çekmek için şunları yapacaksınız:

Gerekli bağımlılıkları yükleyin
cms-renderer araçlarını kullanarak bir betik oluşturun

Proje Yapısı

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # betik dosyası

Betik: `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 ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API\'den hiçbir bileşen dönmedi. PROFOUND_API_KEY değerinin geçerli olduğundan ve doğru web sitesini işaret ettiğinden emin olun.'
    );
  }

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

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

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

main().catch((err) => {
  console.error('[generate-schemas] Başarısız oldu:', err);
  process.exit(1);
});

CMS Yapılandırması Örneği

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

`package.json` Yapılandırması

Not: Bir tsconfig.json dosyanız yoksa, --tsconfig bayrağını kaldırın.

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

Betiği Çalıştırma

bun run generate-schemas

Örnek çıktı:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] 3 bileşen bulundu: post, categories, header
[generate-schemas] Tamamlandı.

Güncellenmiş Proje Yapısı

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # oluşturulan Zod şeması

`page.tsx` İçinde Kullanım

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

// Tür güvenli ayrıştırma için kullanın
petFoodPostSchema.parse(obj);

Notlar

Bileşeninizin yapısını anlamak için oluşturulan dosyayı inceleyin
Bileşeninizin yapısı her değiştiğinde betiği yeniden çalıştırın:

bun run generate-schemas

Bunu geliştirme veya derleme iş akışınıza entegre edebilirsiniz
Bileşenleri yönetim paneli aracılığıyla güncelleyin ve ardından yerel olarak yeniden oluşturun

NextSplit Screen JSON Component Builder with LLM›

Hızlı Başlangıç

Şemalar hakkında bir gönderi

Tür Güvenli Zod Şemaları Oluşturun

Bu özellik, bileşen açıklamanızı tür güvenli bir Zod şeması biçiminde almanıza olanak tanıyarak şunları sunar:

TypeScript öncelikli şema doğrulaması
Statik tür çıkarımı

Daha fazla bilgi edinin: https://zod.dev

Kurulum

Zod şemanızı çekmek için şunları yapacaksınız:

Gerekli bağımlılıkları yükleyin
cms-renderer araçlarını kullanarak bir betik oluşturun

Proje Yapısı

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # betik dosyası

Betik: `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 ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] CMS_WEBSITE_ID ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] PROFOUND_API_KEY ayarlanmadı. Ortamınızda veya .env dosyanızda ayarlayın.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] API\'den hiçbir bileşen dönmedi. PROFOUND_API_KEY değerinin geçerli olduğundan ve doğru web sitesini işaret ettiğinden emin olun.'
    );
  }

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

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

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

main().catch((err) => {
  console.error('[generate-schemas] Başarısız oldu:', err);
  process.exit(1);
});

CMS Yapılandırması Örneği

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

`package.json` Yapılandırması

Not: Bir tsconfig.json dosyanız yoksa, --tsconfig bayrağını kaldırın.

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

Betiği Çalıştırma

bun run generate-schemas

Örnek çıktı:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] 3 bileşen bulundu: post, categories, header
[generate-schemas] Tamamlandı.

Güncellenmiş Proje Yapısı

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # oluşturulan Zod şeması

`page.tsx` İçinde Kullanım

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

// Tür güvenli ayrıştırma için kullanın
petFoodPostSchema.parse(obj);

Notlar

Bileşeninizin yapısını anlamak için oluşturulan dosyayı inceleyin
Bileşeninizin yapısı her değiştiğinde betiği yeniden çalıştırın:

bun run generate-schemas

Bunu geliştirme veya derleme iş akışınıza entegre edebilirsiniz
Bileşenleri yönetim paneli aracılığıyla güncelleyin ve ardından yerel olarak yeniden oluşturun

NextSplit Screen JSON Component Builder with LLM›

Hızlı Başlangıç

Tür Güvenli Zod Şemaları Oluşturun

Kurulum

Proje Yapısı

Betik: generated-schema.ts

CMS Yapılandırması Örneği

package.json Yapılandırması

Betiği Çalıştırma

Güncellenmiş Proje Yapısı

page.tsx İçinde Kullanım

Notlar

Hızlı Başlangıç

Tür Güvenli Zod Şemaları Oluşturun

Kurulum

Proje Yapısı

Betik: generated-schema.ts

CMS Yapılandırması Örneği

package.json Yapılandırması

Betiği Çalıştırma

Güncellenmiş Proje Yapısı

page.tsx İçinde Kullanım

Notlar

Betik: `generated-schema.ts`

`package.json` Yapılandırması

`page.tsx` İçinde Kullanım

Betik: `generated-schema.ts`

`package.json` Yapılandırması

`page.tsx` İçinde Kullanım