getInitialProps with custom server URL mapping breaks the routing

[Sealos]

Bug report

Describe the bug

Using a custom server with a custom page mapping breaks the application when using getInitialProps, it does work with getStaticProps

Unhandled Runtime Error
Error: The provided `as` value (/empty-component) is incompatible with the `href` value (/[lang]/empty-component). Read more: https://err.sh/zeit/next.js/incompatible-href-as

To Reproduce

While using SSR application with the current folder structure:

• pages
  • [lang]
    • component.jsx

component.jsx

import React from 'react';

function Empty() {
    return (
        <>
        </>
    );
}

export const getInitialProps = function defaultGetProps(ctx) {
    let locale = ctx.params.lang || 'en';
    let lang = {};

    return {
        props: {
            lang,
            locale,
        },
    };
};

export default Empty;

And using a custom server to support default language routes:
Mapping /component -> /en/component (If the default language is en)

Mapping function called from Express

function renderPage(req, res, nextApp, props = {}) {

    const defaultRootLocale = '/en';

    const localizedURL = (defaultRootLocale + req.path).replace(/\/$/, '');

    let { query } = parse(req.url, true);

    const pageProps = { ...query, ...props }

    query.lang = language.defaultLocale;
    req.originalUrl = localizedURL;
    req.url = localizedURL;
    req.path = localizedURL;

    return nextApp.render(req, res, localizedURL, pageProps);
}

Expected behavior

It should not crash, and function the same was as with using getStaticProps

Screenshots

System information

• OS: macOS
• Browser (if applies) any
• Version of Next.js: 9.4.2
• Version of Node.js: 14.4