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:
Catatan:
Jangan ikut ketik tanda backtick
di awal dan akhir kode/perintah, itu cuma penanda blok kode untuk memudahkan penulisan.
---
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.
Memuat kontributor…
Dan para kontributor lainnya yang mendukung MauCariApa.com.
seedbacklinkMarketplace backlink terbesar dan terpercaya di Indonesia
Marketplace backlink terbesar dan terpercaya di Indonesia
Diskusi & Komentar
Panduan Komentar
- • Gunakan bahasa yang sopan dan konstruktif
- • Hindari spam, promosi, atau link yang tidak relevan
- • Komentar akan terus dipantau secara berkala