How do dynamic /api routes (specifically catch all routes) work?

[qodesmith]

I can't seem to get "catch all" routes to work (i.e. [...slug]). Here's the link to my repo which is a basic Vite-generated app with the added /api folder for serverless functions. As you'll see, I've got an /api folder structure as follows:

For the "catch all" route of [...slug].ts, I'm simply sending back a response of req.query:

// [...slug].ts
export default function handler(req: VercelRequest, res: VercelResponse) {
  res.json(req.query)
}

With that being said, I get the following responses from the api:

url	response	route type	was expected	expected instead
/api/users	{users: [...]}	explicit	✅	-
/api/users/1	{user: {...}}	dynamic	✅	-
/api/cars	404	-	✅	-
/api/cars/corvette	{"...slug": "corvette"}	catch all	❌	{slug: ["corvette"]}
/api/cars/corvette/2017	404	catch all	❌	{slug: ["corvette", "2017"]}

With a file name of /api/cars/[...slug].ts, I expected Vercel to parse this as a "catch all" route and respond to any number of path segments from /api/cars/unlimited/segments/here/.... What am I doing wrong?

[qodesmith]

Could this be a bug in how Vercel parses the /api directory?

[amyegan]

Hi @qodesmith! The documentation you linked to is for Next.js, but your project does not seem to be a Next.js project. The catch all API route behavior is a Next.js feature.

I think it's possible build something to achieve a similar effect with Vite and other frameworks, but it would require some complex customization. I don't know enough about Vite to be able to offer specific advice on that.

[qodesmith]

Hi @amyegan, thanks for the reply. The Vercel docs mention in the Deploying Serverless Functions section that you need to add an /api directory in order to deploy functions. A little further down that page is the Path Segments section that seems to indicate it supports dynamic routes. Technically it only mentions dynamic routes with single brackets - [name].ts. This made me think it had parity with how it's done in Next.js since it's all deployed on Vercel infrastructure anyway.

Could you confirm if this is the only dynamic feature available on Vercel for the filesystem-based /api back end routes on Serverless Functions?

[amyegan]

Right, dynamic routes in non-Next apps are limited to just the single dynamic path segment value (or more if you string them together). The catch all feature belongs to Next.js. That's why you're getting {"...slug": "corvette"} instead of {"slug": "corvette"} back from /api/cars/corvette.

If you know how many segments you expect, you can set up the path with multiple segments that will all pass through to the function at the end of that path. For example, I was able to get {"second":"beta","first":"alpha"} from path /api/alpha/beta by adding /api/[first]/[second].ts to my app.

[qodesmith]

Ok awesome. Thank you for confirmation! If you can, pass along this info as a feature request to Vercel to have /api feature parity with how Next.js does it.