Γρήγορη εκκίνηση

Μια δημοσίευση σχετικά με τα σχήματα

Δημιουργήστε σχήματα Zod με ασφάλεια τύπων

Αυτή η δυνατότητα σας επιτρέπει να λάβετε την περιγραφή των components σας με τη μορφή ενός σχήματος Zod με ασφάλεια τύπων, προσφέροντας:

Επικύρωση σχήματος με προτεραιότητα το TypeScript
Στατική συμπερασματολογία τύπων

Μάθετε περισσότερα: https://zod.dev

Ρύθμιση

Για να ανακτήσετε το σχήμα Zod σας, θα πρέπει να:

Φορτώσετε τις απαιτούμενες εξαρτήσεις
Δημιουργήσετε ένα script χρησιμοποιώντας βοηθητικά εργαλεία από το cms-renderer

Δομή έργου

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # αρχείο 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 δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] Το CMS_WEBSITE_ID δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] Το PROFOUND_API_KEY δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Δεν επιστράφηκαν components από το API. Ελέγξτε ότι το PROFOUND_API_KEY είναι έγκυρο και δείχνει στο σωστό website.'
    );
  }

  console.log(
    `[generate-schemas] Βρέθηκαν ${schemas.length} components: ${schemas.map((s) => s.name).join(', ')}`
  );

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

  console.log('[generate-schemas] Ολοκληρώθηκε.');
}

main().catch((err) => {
  console.error('[generate-schemas] Απέτυχε:', err);
  process.exit(1);
});

Παράδειγμα ρύθμισης CMS

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

Διαμόρφωση `package.json`

Σημείωση: Αν δεν έχετε tsconfig.json, αφαιρέστε το 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",
    "...": "..."
  }
}

Εκτέλεση του script

bun run generate-schemas

Παράδειγμα εξόδου:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Βρέθηκαν 3 components: post, categories, header
[generate-schemas] Ολοκληρώθηκε.

Ενημερωμένη δομή έργου

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # παραγόμενο σχήμα Zod

Χρήση στο `page.tsx`

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

// Χρησιμοποιήστε το για ανάλυση με ασφάλεια τύπων
petFoodPostSchema.parse(obj);

Σημειώσεις

Εξετάστε το παραγόμενο αρχείο για να κατανοήσετε τη δομή του component σας
Εκτελέστε ξανά το script κάθε φορά που αλλάζει η δομή του component σας:

bun run generate-schemas

Μπορείτε να το ενσωματώσετε στη ροή εργασιών ανάπτυξης ή build
Ενημερώστε τα components μέσω του πίνακα διαχείρισης και, στη συνέχεια, αναδημιουργήστε τα τοπικά

Nextjson και Claude κώδικας›

Γρήγορη εκκίνηση

Μια δημοσίευση σχετικά με τα σχήματα

Δημιουργήστε σχήματα Zod με ασφάλεια τύπων

Επικύρωση σχήματος με προτεραιότητα το TypeScript
Στατική συμπερασματολογία τύπων

Μάθετε περισσότερα: https://zod.dev

Ρύθμιση

Για να ανακτήσετε το σχήμα Zod σας, θα πρέπει να:

Φορτώσετε τις απαιτούμενες εξαρτήσεις
Δημιουργήσετε ένα script χρησιμοποιώντας βοηθητικά εργαλεία από το cms-renderer

Δομή έργου

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts   # αρχείο 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 δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

  if (!websiteId) {
    throw new Error(
      '[generate-schemas] Το CMS_WEBSITE_ID δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

  if (!apiKey) {
    throw new Error(
      '[generate-schemas] Το PROFOUND_API_KEY δεν έχει οριστεί. Ορίστε το στο περιβάλλον σας ή στο αρχείο .env.'
    );
  }

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

  if (schemas.length === 0) {
    throw new Error(
      '[generate-schemas] Δεν επιστράφηκαν components από το API. Ελέγξτε ότι το PROFOUND_API_KEY είναι έγκυρο και δείχνει στο σωστό website.'
    );
  }

  console.log(
    `[generate-schemas] Βρέθηκαν ${schemas.length} components: ${schemas.map((s) => s.name).join(', ')}`
  );

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

  console.log('[generate-schemas] Ολοκληρώθηκε.');
}

main().catch((err) => {
  console.error('[generate-schemas] Απέτυχε:', err);
  process.exit(1);
});

Παράδειγμα ρύθμισης CMS

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

Διαμόρφωση `package.json`

Σημείωση: Αν δεν έχετε tsconfig.json, αφαιρέστε το 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",
    "...": "..."
  }
}

Εκτέλεση του script

bun run generate-schemas

Παράδειγμα εξόδου:

tsx --tsconfig tsconfig.json scripts/generate-schemas.ts
[generate-schemas] Βρέθηκαν 3 components: post, categories, header
[generate-schemas] Ολοκληρώθηκε.

Ενημερωμένη δομή έργου

apps/
  web/
    app/
      page.tsx
    scripts/
      generated-schema.ts
    generated/
      cms-schemas.ts   # παραγόμενο σχήμα Zod

Χρήση στο `page.tsx`

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

// Χρησιμοποιήστε το για ανάλυση με ασφάλεια τύπων
petFoodPostSchema.parse(obj);

Σημειώσεις

Εξετάστε το παραγόμενο αρχείο για να κατανοήσετε τη δομή του component σας
Εκτελέστε ξανά το script κάθε φορά που αλλάζει η δομή του component σας:

bun run generate-schemas

Μπορείτε να το ενσωματώσετε στη ροή εργασιών ανάπτυξης ή build
Ενημερώστε τα components μέσω του πίνακα διαχείρισης και, στη συνέχεια, αναδημιουργήστε τα τοπικά

Nextjson και Claude κώδικας›

Γρήγορη εκκίνηση

Δημιουργήστε σχήματα Zod με ασφάλεια τύπων

Ρύθμιση

Δομή έργου

Script: generated-schema.ts

Παράδειγμα ρύθμισης CMS

Διαμόρφωση package.json

Εκτέλεση του script

Ενημερωμένη δομή έργου

Χρήση στο page.tsx

Σημειώσεις

Γρήγορη εκκίνηση

Δημιουργήστε σχήματα Zod με ασφάλεια τύπων

Ρύθμιση

Δομή έργου

Script: generated-schema.ts

Παράδειγμα ρύθμισης CMS

Διαμόρφωση package.json

Εκτέλεση του script

Ενημερωμένη δομή έργου

Χρήση στο page.tsx

Σημειώσεις

Script: `generated-schema.ts`

Διαμόρφωση `package.json`

Χρήση στο `page.tsx`

Script: `generated-schema.ts`

Διαμόρφωση `package.json`

Χρήση στο `page.tsx`