Cara mudah validasi data di Astro dengan Zod
Zod adalah pustaka TypeScript yang fokus pada skema, deklarasi dan validasi. Dengan Zod, kita punya “kamus” yang baku, sehingga mudah dijadikan sebagai pedoman ketika kita pakai frontmatter, karena field-field seperti name, categories, tags, author sudah dipetakan di Zod, frontmatter dan CMS tinggal menyesuaikan saja dengan config yang ada di Zod.
Cara kerja Zod
Misalnya, pada Zod kita sudah punya postsCollection, seperti dibawah ini:
import { defineCollection, z } from 'astro:content';
const postsCollection = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
pubDate: z.date(),
authors: z.string(),
heroImage: z.string().optional(),
category: z.array(z.string()).optional(),
tags: z.array(z.string()).optional(),
}),
});
export const collections = {
'posts': postsCollection,
};Kita tingga petakan ulang di config.ts TinaCMS (atau CMS lainnya), seperti berikut:
import { defineConfig } from 'tinacms';
export default defineConfig({
contentApiUrl: "/api/tina/gql", // sesuaikan dengan routing kamu
media: {
tina: {
mediaRoot: '',
publicFolder: 'public',
},
},
schema: {
collections: [
{
name: 'posts',
label: 'Posts',
path: 'src/content/posts', // sesuaikan dengan lokasi konten kamu
format: 'md', // atau 'mdx' jika kamu pakai MDX
fields: [
{
type: 'string',
name: 'title',
label: 'Title',
required: true,
},
{
type: 'datetime',
name: 'pubDate',
label: 'Published Date',
required: true,
},
{
type: 'string',
name: 'authors',
label: 'Author',
required: true,
},
{
type: 'image',
name: 'heroImage',
label: 'Hero Image',
required: false,
},
{
type: 'string',
name: 'category',
label: 'Category',
list: true,
required: false,
},
{
type: 'string',
name: 'tags',
label: 'Tags',
list: true,
required: false,
},
],
},
],
},
});Tanpa atau dengan CMS, frontmatter harus tetap mengikuti Zod, sehingga kita punya format baku untuk konten kita, baik posts, pages, authors, dan lainnya.
Contoh frontmatter yang mengikuti Zod diatas:
---
title: "10 Tips Menulis Blog yang Konsisten"
pubDate: 2025-07-30
authors: "maucariapacom"
heroImage: "/images/blog-writing.avif"
category:
- "writing"
- "productivity"
tags:
- "blog"
- "tips"
- "habit"
---
Menulis blog secara konsisten bukan soal inspirasi, tapi soal kebiasaan dan sistem...INFO
Astro secara default sudah menggunakan Zod, sehingga kita dapat langsung bekerja di frontmatter atau CMS, penggunaannya pun sangat mudah.
Kesimpulan
Dengan menggunakan Zod, kita dapat membuat satu set aturan baku yang mudah diterapkan, dengan dua pilihan yaitu wajib dan opsional. Ketika properti Zod di set required maka wajib diisi, tapi jika property Zod di set optional, kita boleh menggunakannya atau tidak.
Topik dalam Artikel Ini
Memuat kontributor…
Dan para kontributor lainnya yang mendukung MauCariApa.com.
InstaWPInstaWP is a cloud platform for building, hosting, managing, and selling sites WordPress instantly. No credit card required.
InstaWP is a cloud platform for building, hosting, managing, and selling sites WordPress instantly. No credit card required.
Lanjut Membaca
Apa itu EmDash CMS?
Cloudflare meluncurkan EmDash, suksesor WordPress berbasis TypeScript & Astro. Solusi CMS open-source dengan keamanan plugin lewat Dynamic Workers.
Bagaimana pipeline Newline bekerja
Newline tidak dibuat untuk menyenangkan best practice dan development secara textbook, tetapi mendefinisikan ulang.
Diskusi & Komentar
Panduan Komentar