Next.js app with Python serverless functions

[timothypettingill]

I cannot for the life of me get Python serverless functions to work when trying to deploy a Next.js app. I have tried all three examples found in the official documentation (see here and here).

A simplified version of my project layout is as follows:

├── pages
│ ├── api
│ │ └── date.py
│ └── index.js
├── README.md
├── package.json
├── now.json
└── requirements.txt

If I deploy the project as-is the index page loads correctly but if I navigate to "/api/date" I get a 404 error. I can get the API endpoint to work by adding { "src": "pages/api/*.py", "use": "@now/python" } to the "builds" property of now.json but that causes pages/index.js to not show up in the rendered app. I only get a directory view which I can follow to the API endpoint.

I'm really hoping there's something simple I've missed that will make me feel really dumb when it is explained to me. If you have any ideas where I went wrong I would appreciate your input.

Additional notes:

• I added entries for the "cleanURLs" and "trailingSlash" properties in now.json to make sure including/excluding the file extension or a trailing slash in the URL doesn't matter.
• Using the "functions" property in now.json resulted in the same 404 error.
• Including the exmaple JS API route shown in the Next.js documentation works with my current project layout.
• Also tried a WSGI app endpoint using Flask and an ASGI app endpoint using Starlette but neither of those yielded different results.

[paulogdm]

Hello,

Next.js allows API routes in the framework itself. For that reason, it is not possible to use other languages than Node when using /pages/api. One thing that you can try is to defer the API-side to Now itself, but be aware that you may lose a few functionalities:

• Create api/.
• Create api/index.py.
• Make sure you are not using pages/api/, otherwise, you can have a few conflicts in routes.
• Redeploy.

Let me also clarify a few things:

I can get the API endpoint to work by adding { "src": "pages/api/*.py", "use": "@now/python" } to the "builds" property of now.json but that causes pages/index.js to not show up in the rendered app. I only get a directory view which I can follow to the API endpoint.

That happens because you are opting-out of Zero Config. For that reason, you need to explicitly tell Now to also build your Next.js app:

"builds": [
  { "src": "pages/api/*.py", "use": "@now/python" },
  { "src": "package.json", "use": "@now/next" }
]

The general recommendation is that you stay in Next.js territory and only deploy Node functions. Those will be under the umbrella of the framework and unlock all the official features available to you.

Let us know how it goes.

[STRRL]

Thanks! You save my day! ❤️

Just a minor update, an error "Error! Found usage of dynamic routes but not on a new enough version of Next.js." occurred to me, after I updated vercel.json.

I think @now/next has been outdated, using @vercel/next would make it work well.

My vercel.json

{
    "builds": [
        {
            "src": "api/*.go",
            "use": "@now/go"
        },
        {
            "src": "package.json",
            "use": "@now/next"
        }
    ]
}

[elijahcarrel]

This use case seems common. Most large websites write back-end code in a different language.

It sounds like this design is not recommended, however.

What is the recommendation from Vercel as to how to accomplish something like this? Should we create two separate deployments?

[raivatshah]

Hi everyone, opening this discussion again to see if this solution also works with the app router? Has anyone tried it so far?

[leerob]

Hey there! We have a template here with Next.js and a Flask API: https://vercel.com/templates/next.js/nextjs-flask-starter