In Next.js, with the pages router, I want to be able to handle errors in my app properly. If something is missing or invalid, I want to redirect users to an error page.

Problem is, my render function will run to completion, even after calling router.push(). This forces me to short-circuit my render function and render something else. Otherwise, the TypeScript types will be incorrect after the type check.

But if I short-circuit by returning null for example, the user will get a flash of white before the error page loads.

Ideally, I just want to interrupt the render function, and have html stay frozen until the next page is loaded and rendered.

Is this possible?