Solving the Next.js Head problem that auto parse HTML entity

I want to share how I finally solved the Next.js Head problem that auto parse HTML entity. In my case, I want to remove & (ampersand sign) being encoded by Next.js Head.

My case

I want to hit ogimpact (social image API) which using amp; (ampersand) sign on the query URL.

How I solved it

With helped from Nextjs issue discussion on GIthub, which answered by @lukeshumard.

  1. Preparing the API to redirect the request create /pages/api/foldername/[…url].js
//here is an explicit example how I redirect to ogimpact image URL
export default function handler(req, res) {
    const { url } = req.query;
    const ogish_format = `${url.toString().replace(/\s/g, '%20')}&imageUrl=`
    const redirectUrl = decodeURIComponent(ogish_format);
  1. Call this API on tag
<meta property="og:image" content={`${encodeURIComponent(post.title)}`} />
nextjs react