Next.js Flask Starter

Next.js Flask Starter

Simple Next.js boilerplate that uses Flask as the API backend.

Introduction

This is a hybrid Next.js + Python app that uses Next.js as the frontend and Flask as the API backend. One great use case of this is to write Next.js apps that use Python AI libraries on the backend.

How It Works

This project uses Vercel Services to deploy a Next.js frontend and a Flask backend as part of a single Vercel project. Services are configured in vercel.json using the experimentalServices key:

• Frontend — Next.js, mounted at /
• Backend — Flask, mounted at /api/python

Vercel automatically routes requests to the correct service based on the URL path prefix. It also automatically injects environment variables based on the service name to easily route between services. To make requests to the Python backend service and keep preview environments in sync without having to hard-code urls, NEXT_PUBLIC_BACKEND_URL is automatically set.

Demo

https://nextjs-flask-starter.vercel.app/

Deploy Your Own

You can clone & deploy it to Vercel with one click:

Developing Locally

You can clone & create this repo with the following command

1
npx create-next-app nextjs-flask --example "https://github.com/vercel/examples/tree/main/python/nextjs-flask"

Getting Started

First, install the dependencies:

1
npm install
2
# or
3
yarn
4
# or
5
pnpm install

Then, run both services locally:

1
vercel dev -L

The -L flag runs all services together locally without authenticating with the Vercel Cloud. Open http://localhost:3000 with your browser to see the result.

Learn More

• Vercel Services - learn how services work on Vercel.
• Next.js Documentation - learn about Next.js features and API.
• Flask Documentation - learn about Flask features and API.