React & Zod: validating Supabase data before rendering

The problem

response.json() returns a value typed any. A TypeScript interface checks nothing at runtime: if the database changes, the error shows up in a component, far from its cause.

The fix

A Zod schema describes the data and provides the type:

const result = articleListSchema.safeParse(await response.json());
if (!result.success) throw new Error("Invalid articles response");

What about the Markdown content?

The content is rendered with react-markdown, never with dangerouslySetInnerHTML. A tag like <script>alert(1)</script> is displayed as plain text.