Update nextjs flask example (#1452)

### Description

Update Next.js + Flask example to use Services

### Demo URL

<!--
Provide a URL to a live deployment where we can test your PR. If a demo
isn't possible feel free to omit this section.
-->

### Type of Change

- [ ] New Example
- [x] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)

### New Example Checklist

- [ ] 🛫 `npm run new-example` was used to create the example
- [ ] 📚 The template wasn't used but I carefuly read the [Adding a new
example](https://github.com/vercel/examples#adding-a-new-example) steps
and implemented them in the example
- [ ] 📱 Is it responsive? Are mobile and tablets considered?

Author: ricardo-agz

python/nextjs-flask/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 __pycache__
+*.egg-info/
+build/
+dist/

python/nextjs-flask/README.md

@@ -15,13 +15,13 @@ This is a hybrid Next.js + Python app that uses Next.js as the frontend and Flas
 
 ## How It Works
 
-The Python/Flask server is mapped into to Next.js app under `/api/`.
+This project uses [Vercel Services](https://vercel.com/docs/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:
 
-This is implemented using [`next.config.js` rewrites](https://github.com/vercel/examples/blob/main/python/nextjs-flask/next.config.js) to map any request to `/api/:path*` to the Flask API, which is hosted in the `/api` folder.
+- **Frontend** — Next.js, mounted at `/`
+- **Backend** — Flask, mounted at `/api/python`
 
-On localhost, the rewrite will be made to the `127.0.0.1:5328` port, which is where the Flask server is running.
-
-In production, the Flask server is hosted as [Python serverless functions](https://vercel.com/docs/concepts/functions/serverless-functions/runtimes/python) on Vercel.
+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
 
@@ -53,26 +53,16 @@ yarn
 pnpm install
 ```
 
-Then, run the development server:
+Then, run both services locally:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+vercel dev -L
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-The Flask server will be running on [http://127.0.0.1:5328](http://127.0.0.1:5328) – feel free to change the port in `package.json` (you'll also need to update it in `next.config.js`).
+The `-L` flag runs all services together locally without authenticating with the Vercel Cloud. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
 ## Learn More
 
-To learn more about Next.js, take a look at the following resources:
-
+- [Vercel Services](https://vercel.com/docs/services) - learn how services work on Vercel.
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-- [Flask Documentation](https://flask.palletsprojects.com/en/1.1.x/) - learn about Flask features and API.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+- [Flask Documentation](https://flask.palletsprojects.com/) - learn about Flask features and API.

python/nextjs-flask/api/index.py

@@ -1,6 +1,8 @@
-from flask import Flask
+from flask import Flask, jsonify
+
 app = Flask(__name__)
 
-@app.route("/api/python")
-def hello_world():
-    return "<p>Hello, World!</p>"
+
+@app.route("/")
+def python_route():
+    return jsonify(message="Hello from Flask!")

python/nextjs-flask/api/pyproject.toml

@@ -0,0 +1,8 @@
+[project]
+name = "vercel-flask-starter"
+version = "0.1.0"
+requires-python = ">=3.12"
+dependencies = [
+  "flask>=3.1,<4.0",
+  "gunicorn~=23.0.0"
+]

python/nextjs-flask/app/page.tsx

@@ -1,15 +1,16 @@
 import Image from 'next/image'
-import Link from 'next/link'
+
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL
 
 export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
         <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
           Get started by editing&nbsp;
-          <Link href="/api/python">
+          <a href={`${BACKEND_URL}`}>
             <code className="font-mono font-bold">api/index.py</code>
-          </Link>
+          </a>
         </p>
         <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
           <a

python/nextjs-flask/next.config.js

@@ -1,16 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  rewrites: async () => {
-    return [
-      {
-        source: '/api/:path*',
-        destination:
-          process.env.NODE_ENV === 'development'
-            ? 'http://127.0.0.1:5328/api/:path*'
-            : '/api/',
-      },
-    ]
-  },
-}
+const nextConfig = {}
 
 module.exports = nextConfig

python/nextjs-flask/package.json

@@ -3,9 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "flask-dev": "FLASK_DEBUG=1 pip3 install -r requirements.txt && python3 -m flask --app api/index run -p 5328",
-    "next-dev": "next dev",
-    "dev": "concurrently \"pnpm run next-dev\" \"pnpm run flask-dev\"",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
@@ -15,7 +13,6 @@
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
-    "concurrently": "^8.0.1",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.2",
     "next": "^16.0.10",