Hi all,
We are developing an application using the Next.js App Router framework and deploying it on Vercel. The application primarily uses Next.js for the frontend and its built-in API routes (under app/api/). However, we also need to include a specific backend task written as a Python Serverless Function.
Project Structure & Initial Problem:
Our project structure includes the standard Next.js app/ directory containing pages and API route handlers (app/api/). Initially, we placed our Python function (extract_recipe.py) inside a root /api directory, following the standard Vercel convention for Serverless Functions:
.
├── api // <--- ORIGINAL location for Python function
│ └── extract_recipe.py
├── app
│ ├── api // Next.js API Routes (incl. /api/auth/[...nextauth]/route.ts)
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ └── route.ts
│ │ └── ... (other Next.js API routes)
│ └── ... (other Next.js app files: pages, components, etc.)
├── requirements.txt // Python dependencies (in root)
├── vercel.json // Vercel configuration file (in root)
├── next.config.js
├── package.json
└── ... (other project files)
With this structure, we encountered a conflict. Requests to our Next.js API routes, specifically Next-Auth endpoints like /api/auth/signin (handled by app/api/auth/[…nextauth]/route.ts), started returning 404 errors when running vercel dev or when deployed. We believe this happened because Vercel’s routing prioritized the root /api directory (containing the Python function) for all requests starting with /api/…, preventing these requests from reaching the intended Next.js application handlers in app/api/.
Troubleshooting Step: Renaming the Python Directory
To resolve the conflict with Next.js API routes, we renamed the root directory containing our Python function from api to serverless-functions:
.
-├── api
-│ └── extract_recipe.py
+├── serverless-functions // <--- RENAMED location for Python function
+│ └── extract_recipe.py
├── app
│ ├── api // Next.js API Routes (incl. /api/auth/[...nextauth]/route.ts)
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ └── route.ts
│ │ └── ... (other Next.js API routes)
│ └── ... (other Next.js app files: pages, components, etc.)
├── requirements.txt // Python dependencies (in root)
├── vercel.json // Vercel configuration file (in root)
├── next.config.js
├── package.json
└── ... (other project files)
This renaming step successfully resolved the 404 errors for our Next.js /api/auth/… routes, confirming the path conflict was the cause.
Attempts to Configure the Renamed Python Function:
Now, needing to make the Python function work from the new serverless-functions directory, we took the following steps:
-
Directory Renamed: Function is now at /serverless-functions/extract_recipe.py.
-
Created requirements.txt: Ensured a requirements.txt file exists in the project root listing all necessary Python dependencies (Flask, requests, etc.).
-
Configured vercel.json: Created/updated vercel.json in the root to explicitly define the function and its route:
{
"functions": {
"serverless-functions/extract_recipe.py": {
"runtime": "@vercel/python", // Also tried without this line
"memory": 1024,
"maxDuration": 30
}
},
"routes": [
{
// Route requests to the function path to the python file
"src": "/serverless-functions/extract_recipe",
"dest": "serverless-functions/extract_recipe.py"
},
{
// Fallback route for Next.js
"src": "/(.*)",
"dest": "/$1"
}
]
}
- Verified Python Code: Confirmed that serverless-functions/extract_recipe.py is a valid Flask application defining an app = Flask(name) object at the module level and uses @app.route(‘/’) to handle requests routed to it by Vercel.
Current Issue:
Despite these configurations after renaming the directory, when running vercel dev, we now encounter the following error:
Error: The pattern "serverless-functions/extract_recipe.py" defined in `functions` doesn't match any Serverless Functions.
This error occurs even though the file exists at that path, requirements.txt is present, and the Python file contains a valid Flask app structure. It seems the Vercel build/dev process isn’t recognizing or discovering the Python file as a valid function now that it’s outside the default /api directory, even with the explicit vercel.json configuration.
Question:
Could you please help us understand why the functions configuration in vercel.json isn’t correctly identifying our Python function located at serverless-functions/extract_recipe.py after we renamed its parent directory from api/ to resolve conflicts with Next.js API routes? What is the correct way to configure vercel.json (or any other necessary steps) to allow our Python Flask function in the serverless-functions directory to be deployed and routed correctly alongside our Next.js App Router application, ensuring that Next.js API routes under app/api/ (especially /api/auth/…) also continue to function without conflict?
Thank you for your assistance.
Best regards,
Mike