Vercel/NextJS: How to access serverless functions from frontend during local devel?

[Blmzv]

My React/NextJS front end has a Button component that fetches data via a serverless function when the button is clicked. I want to test this functionality during local development with the Vercel dev/CLI tools, as manetioned here

You must be registered to see links

I am getting a 404 result when attempting to access my lambda functions. Here are the approximate steps that I’ve gone through so far:

1. Create package.json with a dev script:
   

   ...
   "scripts": {
       "dev": "yarn codegen && next --hostname=0.0.0.0 --port=3001",
   }
   ...

2. Link to deployed vercel project
3. Create vercel.json to specify builds and routes:
   

   ...
       [COLOR=var(--hljs-string)]"builds"[/COLOR]: [
           { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"*.html"[/COLOR], [COLOR=var(--hljs-string)]"use"[/COLOR]: [COLOR=var(--hljs-string)]"@now/static"[/COLOR] },
           { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"pages/api/*.py"[/COLOR], [COLOR=var(--hljs-string)]"use"[/COLOR]: [COLOR=var(--hljs-string)]"@now/python"[/COLOR] },
       ],
       [COLOR=var(--hljs-string)]"routes"[/COLOR]: [
           { [COLOR=var(--hljs-string)]"src"[/COLOR]: [COLOR=var(--hljs-string)]"/api/validate"[/COLOR], [COLOR=var(--hljs-string)]"dest"[/COLOR]: [COLOR=var(--hljs-string)]"/pages/api/validate.py"[/COLOR] }
       ]
   ...

4. Create my test Lambda function (in python):
   

   [COLOR=var(--primary-very-high)][B]from[/B][/COLOR] http.server [COLOR=var(--primary-very-high)][B]import[/B][/COLOR] BaseHTTPRequestHandler
   [COLOR=var(--primary-very-high)][B]from[/B][/COLOR] datetime [COLOR=var(--primary-very-high)][B]import[/B][/COLOR] datetime
   
   [COLOR=var(--primary-very-high)][B]class[/B][/COLOR] [COLOR=var(--hljs-literal)][B]handler[/B][/COLOR](BaseHTTPRequestHandler):
   
     [COLOR=var(--primary-very-high)][B]def[/B][/COLOR] [COLOR=var(--hljs-string)][B]do_GET[/B][/COLOR](self):
       self.send_response([COLOR=var(--hljs-number)]200[/COLOR])
       self.send_header([COLOR=var(--hljs-string)]'Content-type'[/COLOR], [COLOR=var(--hljs-string)]'text/plain'[/COLOR])
       self.end_headers()
       self.wfile.write([COLOR=var(--tertiary-high)]str[/COLOR](datetime.now().strftime([COLOR=var(--hljs-string)]'%Y-%m-%d %H:%M:%S'[/COLOR])).encode())
       [COLOR=var(--primary-very-high)][B]return[/B][/COLOR]

5. Create my Button component:
   

   ...
       <Button
           variant=[COLOR=var(--hljs-string)]"contained"[/COLOR]
           color=[COLOR=var(--hljs-string)]"secondary"[/COLOR]
           onClick={() => {
               fetch([COLOR=var(--hljs-string)]'api/validate'[/COLOR])
                   .then(response => { [COLOR=var(--tertiary-high)]console[/COLOR].log(response)
                       response.json() })
                   .then(data => [COLOR=var(--tertiary-high)]console[/COLOR].log(data))
           }}
       >
           Generate sample dataset
       </Button>
   ...

6. Run vercel dev
7. Access website at localhost:3001 (next dev server address)
8. Click button

Result:
I’m receiving a 404 response
Note: I can access the lambda function from localhost:3000/pages/api/validate.py (vercel dev server address). This appears to manually kickstart the lambda function build and serve process. I thought that it should have been built and served already from the vercel.json specification and be available at localhost:3001/api/validate. This seems to agree with the

You must be registered to see links

.
Note 2: Next dev/CLI tools build and serve javascript/typescript files just fine. I’m using python and Go functions as well, which are supported by Vercel dev/CLI but not Next.