Loading video...

Video Failed to Load

Go Home

Been using a similar pattern for a long time in the Next.js, but now with the app router we can also add a loader function that's executed in a server component. (Thanks Ryan Florence for the inspiration) ✅ Infer/validate params/searchParams from Zod schema. ✅ Infer data

22,573 views • 2 years ago •via X (Twitter)

10 Comments

Eelco Wiersma's profile picture
Eelco Wiersma2 years ago

@ryanflorence Source code here:

Kyle Gill's profile picture
Kyle Gill2 years ago

That create page function looks 👌

Eelco Wiersma's profile picture
Eelco Wiersma2 years ago

Thanks Kyle!

Chris Ribeiro's profile picture
Chris Ribeiro2 years ago

@nextjs @ryanflorence Look nice! CreatePage is a public library?

Eelco Wiersma's profile picture
Eelco Wiersma2 years ago

@nextjs @ryanflorence Yeah will release it in the next days 👌

Renato Ribeiro's profile picture
Renato Ribeiro2 years ago

@nextjs @ryanflorence What happens if zod can't parse params/searchParams? It will pass down type as `z.infer<T> | undefined`, it will throw or it will show a pre-defined error ui page?

Eelco Wiersma's profile picture
Eelco Wiersma2 years ago

@nextjs @ryanflorence Right now it will throw and render error.tsx if it exists. But other options like a safe mode is also a consideration.

JB Hutch's profile picture
JB Hutch2 years ago

@nextjs @ryanflorence Ooh I like this!

Dale's profile picture
Dale2 years ago

@nextjs @ryanflorence Oh this is a great idea!

Chris Eagle's profile picture
Chris Eagle2 years ago

@nextjs @ryanflorence I like this

Related Videos