Bug report

Describe the bug

internal server error occurs when redirect path includes query strings of non-ascii character(like Japanese).

in this PR, non-ascii character is passed to ‘Location’ header without encoding. https://github.com/vercel/next.js/pull/17323/files

To Reproduce

1. Set next.config.js with trailing slash config true.

<!-- next.config.js -->
module.exports = {
  trailingSlash: true
};

1. Open link with query strings of non-ascii character

<!-- indes.jsx -->
export default function IndexPage() {
  return (
    <div>
      <a href="/about?tag=日本語">
        with query strings
      </a>
    </div>
  );
}

1. Redirected to /about?tag=日本語 page, not /about/?tag=日本語. and 500 error occurs.

TypeError [ERR_INVALID_CHAR]: Invalid character in header content ["Location"]
    at ServerResponse.setHeader (_http_outgoing.js:488:3)
    at Object.fn (/node_modules/next/next-server/server/next-server.ts:569:15)
    at Router.execute (/node_modules/next/next-server/server/router.ts:200:40)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at DevServer.run (/node_modules/next/next-server/server/next-server.ts:855:23)

here is a demo. https://codesandbox.io/s/non-ascii-query-error-c8esl

Expected behavior

redirected to /about/?tag=日本語, with trailing slash. otherwise, encode japanese character.