Lessons from open-source: Replace zod with superstruct if you do not use zod’s advanced capabilities

#javascript #opensource #react #nextjs

This lesson is picked from [Next.js source code](This lesson is picked from Next.js source code. In this article, you will learn how Next.js replaced zod with superstruct.

As I was looking at the is-error.ts, I found an import isPlainObject.

Technically, I should have looked into shared/lib/is-plain-object.ts. But as shown above, unknowingly I clicked on file highlighted with red rectangle in the above image.

Practice the exercises based on documentation to become an expert in Next.js

This is where I saw compiled folder has superstruct’s minified code.

Perf: replace zod with superstruct this pull request has deeper insights into as to why Next.js chose to replace zod with superstruct.

Top reasons I found behind this switch:

Next.js does not use zod’s advanced capabilities
This switch resulted in a 44kb win meaning less size for app-page.runtime.prod.js
Reduced lines of code in flightRouterStateSchema

Conclusion

The important lesson here is try all the possible ways to reduce your build size to improve your app performance. Since Next.js did not use all of the advanced capabilities offered by zod, they decided to switch to superstruct, just for 44kb win meaning 44kb less in app-page.runtime.prod.js size that impacts cold boot.

You can choose to go with certain package, but as you research and learn more, you will find something better in the wild and if it helps improve your app performance in any way possible, go for it, assuming you did not break anything along the way ;)