Sharing schemas between server and client

In a typical nextJs setup, what is the idiomatic way to share zod schemas between frontend and backend?

Suppose the following use-case:
we have a mutation that takes an input:

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

const schema = z.object({
    email: z.string().email({ message: 'Enter a valid email address' }),
    subject: z.string()
    message: z.string()
})

on the frontend, we are building a form with react-hook-form that would also like to use this schema to validate the user input.

The main question is: Where would we put this schema so that we can use it in both places. In terms of colocation, I think I would like to have it somewhere close on the server and then maybe just import it on the client from there? How are you all handling this? Thanks

Sharing schemas between server and client

Similar Threads

Similar Threads

Similar Threads