Below is a concise guide to create a Next.js app with a Flask backend. This setup uses Next.js for the frontend and Flask for the API, integrated via API routes and deployed with Vercel.
1. Set Up Project Structure
Create a project directory and initialize a Next.js app.
mkdir nextjs-flask-app
cd nextjs-flask-app
npx create-next-app@latest .
Choose defaults or customize (TypeScript, App Router recommended). Then, create a Flask API folder:
mkdir api
touch api/index.py api/requirements.txt
Your structure:
nextjs-flask-app/
├── api/
│ ├── index.py
│ ├── requirements.txt
├── pages/
├── public/
├── styles/
├── next.config.js
├── package.json
2. Set Up Flask Backend
In api/index.py, create a simple Flask API:
from flask import Flask, jsonify
app = Flask(__name__)
@app.route(‘/api/hello’, methods=[‘GET’])
def hello():
return jsonify({‘message’: ‘Hello from Flask!’})
if __name__ == ‘__main__’:
app.run(port=5328, debug=True)
In api/requirements.txt, add dependencies:
flask==3.0.3
Install Flask locally (requires Python 3):
cd api
python -m venv venv
source venv/bin/activate # Windows: venv\Scripts\activate
pip install -r requirements.txt
3. Configure Next.js to Proxy API Requests
In next.config.js, set up rewrites to forward /api/* requests to the Flask server:
/** @type {import(‘next’).NextConfig} */
const nextConfig = {
async rewrites() {
return [
{
source: ‘/api/:path*’,
destination: process.env.NODE_ENV === ‘development’
? ‘http://127.0.0.1:5328/api/:path*’
: ‘/api/’,
},
];
},
};
export default nextConfig;
4. Create a Next.js Frontend
Create a page to fetch data from the Flask API. Edit app/page.js (or pages/index.js if using Pages Router):
‘use client’;
import { useState, useEffect } from ‘react’;
export default function Home() {
const [message, setMessage] = useState(”);
useEffect(() => {
fetch(‘/api/hello’)
.then((res) => res.json())
.then((data) => setMessage(data.message));
}, []);
return (
Next.js + Flask App
{message || ‘Loading…’}
);
}
5. Run the Development Servers
Open two terminals:
Flask Backend:
cd api
source venv/bin/activate
python index.py
Flask runs on http://127.0.0.1:5328.
Next.js Frontend:
cd nextjs-flask-app
npm run dev
Next.js runs on http://localhost:3000.
Visit http://localhost:3000. You should see “Hello from Flask!”.
6. Deploy to Vercel
Vercel supports Python serverless functions for Flask. Follow these steps:
Add Vercel Configuration: Create vercel.json in the root:
{
“rewrites”: [
{
“source”: “/api/(.*)”,
“destination”: “/api/index”
},
{
“source”: “/(.*)”,
“destination”: “/”
}
]
}
Update requirements.txt: Ensure api/requirements.txt includes:
flask==3.0.3
gunicorn==23.0.0
Push to GitHub: Initialize a Git repo, commit, and push:
git init
git add .
git commit -m “Initial commit”
git remote add origin
git push origin main
Deploy on Vercel:
Go to vercel.com, import your GitHub repo.
Vercel auto-detects Next.js and Flask (Python serverless in /api).
Deploy. Your app will be live (e.g., https://your-app.vercel.app).
7. Test the App
Local: Visit http://localhost:3000 to see the Next.js page fetching Flask data.
Production: After Vercel deployment, visit your Vercel URL. The /api/hello endpoint should return the Flask response.
Notes
Port: Flask uses 5328 locally to avoid conflicts with Next.js (3000). Update next.config.js if you change the port.
Vercel: Flask runs as serverless functions in production, no need for a separate server. Ensure index.py is in /api for Vercel to recognize it.
CORS: If issues arise, install flask-cors and add CORS(app) to index.py.
Resources: For detailed guidance, check Vercel’s Next.js Flask Starter or tutorials like codevoweb.com.
This setup provides a scalable, full-stack app with Next.js for the frontend and Flask for the backend, deployable in minutes.
