Next.js frontend with Flask as the API backend.
This is a hybrid Next.js + Python app that uses Next.js as the frontend and Flask as the API backend. I will use the Next.js app to access Python AI libraries + time series data on the backend.
The Python/Flask server is mapped into to Next.js app under /api/.
This is implemented using next.config.js rewrites to map any request to /api/:path* to the Flask API, which is hosted in the /api folder.
On localhost, the rewrite will be made to the 127.0.0.1:5000 port, which is where the Flask server is running.
In production, the Flask server is hosted as Python serverless functions on Vercel.
You can clone & create this repo with the following command
npx create-next-app nextjs-flask --example "https://github.com/ncfausti/bh-demo/tree/main/"First, install the dependencies:
npm install
# or
yarn
# or
pnpm installThen, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
The Flask server will be running on http://127.0.0.1:5000 – feel free to change the port in package.json (you'll also need to update it in next.config.js).
To learn more take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Flask Documentation - learn about Flask features and API.
- InfluxDB Documentation - learn about getting started with InfluxDB.