I'm getting BAD_REQUEST after deploy on vercel

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

14.15.4

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

Vercel

Describe the Bug

I want to take screenshot of webpage using next js that’s why i created a dynamic api. but when i request to website i get the 404 erro & BAD_REQUEST.

My screenshot path is pages/api/screenshot/[id]/index.js

My code is like this

async function api(req, res) {    
    res.send(req.query.id)
}

export default api

When i request to website i get 404 the url is like this https://next-dynamic-munnyreol.vercel.app/api/screenshot/https%3A%2F%2Fnextjs.org

I add (encodeURIComponent) url after slash screenshot https%3A%2F%2Fnextjs.org mean https://nextjs.org . . I’m getting BAD_REQUEST when i request to https://next-dynamic-munnyreol.vercel.app/api/screenshot/https%3A%2F%2

Expected Behavior

When i request to https://next-dynamic-munnyreol.vercel.app/api/screenshot/https%3A%2F%2Fnextjs.org then i want to get the value which i put after slash screenshot screenshot/ For this request, i want to get https://nextjs.org as a output

To Reproduce

The GitHub repository is https://github.com/MunnyReol/next-dynamic

[ljosberinn]

Sorry it’s indeed query, but it works as expected (I’m using it in multiple sites).

export default function handler(req, res) {
  console.log(req);
  res.send(JSON.stringify(req.query));
}

[ljosberinn]

This is not Next.js related but with how URLs work. Pass the url instead as GET parameter, e.g.

https://next-dynamic-munnyreol.vercel.app/api/screenshot?url=https%3A%2F%2Fnextjs.org

export default function handler(req, res) {
  if(!req.param.url || Array.isArray(req.param.url)) {
    res.status(400).end();
    return;
  }
  
  res.send(req.param.url);
}