500 error page throws client-side exception if it has a getStaticProps and there is a middleware.ts file

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:37 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.2
  npm: 8.7.0
  Yarn: 1.22.15
  pnpm: 6.11.0
Relevant packages:
  next: 12.2.3-canary.12
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

n/a

How are you deploying your application? (if relevant)

using next start

Describe the Bug

In production, if my app has a 500.tsx file that has getStaticProps exported and it also has a middleware.ts file, and the URL visited contains a query parameter, the app will throw a client-side exception after rehydrating, but before any ErrorBoundary defined in _app could catch it.

The 500 page is first correctly rendered serverside, then is replaced by this message in the browser:

Application error: a client-side exception has occurred (see the browser console for more information).

A number of superfluous requests seem to be being made:

The issue only exists on 12.2 and above, it works correctly if I downgrade to 12.1.6 and convert back to the pre-release middleware usage. When the url did not have a query parameter, this issue was resolved in 12.2.4.

Expected Behavior

I expect to see the static error page render successfully.

Link to reproduction

https://codesandbox.io/s/gifted-alex-0hlens?a=b

To Reproduce

• create a pages/500.ts file that has a getStaticProps
• create a middleware.ts file, it does not need to do anything (but also tested with always returning a NextResponse.next())
• throw in pages/index.ts when visiting the page with a query parameter

[LuudJanssen]

v12.3.0 does not seem to have fixed the issue for us. The issue @clarkeverdel mentioned is still happening:

• Using middleware
• Using getStaticProps
• Without query parameters
• Client side error: Error: Failed to load static props
• Both in dev and build mode

[abbathaw]

Same issue. deleting the middleware file for test purposes would render the custom 500 error page as expected without throwing errors on client side.

Issue is still happening on next 12.3.1, the custom 500 page is still showing the error on the browser console after what it seems a few duplicated GET requests to the page that was throwing the error.

My middleware file is just a rewrite for a one of the paths

export async function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl;
  if (pathname == '/') {
    const url = req.nextUrl.clone();
    url.pathname = '/lists';
    return NextResponse.rewrite(url);
  }
  return NextResponse.next();
}

And my 500.tsx get static props is just for grabbing the locales

export const getStaticProps = async ({ locale }: { locale: string }) => ({
  props: {
    ...(await serverSideTranslations(locale, ['common'])),
  },
});