Configure API to work on Vercel from Next SSR

apps/api/requirements.txt

@@ -1 +1,2 @@
 fastapi==0.104.1
+python-multipart==0.0.5

apps/api/src/app.py

@@ -1,7 +1,11 @@
 from fastapi import FastAPI
 
+from routers import demo
+
 app = FastAPI()
 
+app.include_router(demo.router, prefix="/demo", tags=["demo"])
+
 
 @app.get("/")
 async def root() -> dict[str, str]:

apps/api/src/dev.py

@@ -3,6 +3,7 @@
 if __name__ == "__main__":
     uvicorn.run(
         "app:app",
+        host="localhost",
         log_level="info",
         access_log=True,
         use_colors=True,

apps/api/src/routers/demo.py

@@ -0,0 +1,17 @@
+from typing import Annotated, Union
+
+from fastapi import APIRouter, Cookie, Form
+
+router = APIRouter()
+
+
+@router.get("/me")
+async def me(username: Annotated[Union[str, None], Cookie()] = None) -> str:
+    """Who are you?"""
+    return f"You are {username or 'nobody'}"
+
+
+@router.post("/square")
+async def square(value: Annotated[int, Form()]) -> int:
+    """Calculate the square of the value."""
+    return value * value

apps/site/next.config.js

@@ -1,4 +1,25 @@
+// All server-side API requests are handled by lib/utils/api.ts
+// but this rewrite still exists for locally testing native POST requests
+const LOCAL_API_URL = "http://localhost:8000";
+
+// When deployed on Vercel, this path acts like a rewrite in vercel.json
+// Next.js would normally be unable to find the API endpoint
+// but Vercel somehow steps in and makes the Serverless Function visible
+const VERCEL_API_PATH = "/api/";
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+	rewrites: async () => {
+		return [
+			{
+				source: "/api/:path*",
+				destination:
+					process.env.NODE_ENV === "development"
+						? `${LOCAL_API_URL}/:path*`
+						: VERCEL_API_PATH,
+			},
+		];
+	},
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

apps/site/package.json

@@ -19,6 +19,7 @@
 		"@react-three/drei": "^9.88.14",
 		"@react-three/fiber": "^8.15.11",
 		"@types/three": "^0.158.2",
+		"axios": "^1.6.2",
 		"clsx": "^2.0.0",
 		"lucide-react": "^0.292.0",
 		"next": "13.5.6",

apps/site/src/app/demo/Demo.tsx

@@ -0,0 +1,21 @@
+import api from "@/lib/utils/api";
+
+async function getMessage(): Promise<string> {
+	const res = await api.get<string>("/demo/me");
+	return res.data;
+}
+
+async function Demo() {
+	const message = await getMessage();
+	return (
+		<div>
+			<p>Demo: {message}</p>
+			<form method="post" action="/api/demo/square">
+				<input type="number" required name="value" style={{ color: "black" }} />
+				<button type="submit">Submit</button>
+			</form>
+		</div>
+	);
+}
+
+export default Demo;

apps/site/src/app/demo/page.js

@@ -0,0 +1 @@
+export { default as default } from "./Demo";

apps/site/src/lib/utils/api.ts

@@ -0,0 +1,24 @@
+import axios from "axios";
+import { cookies } from "next/headers";
+
+const LOCAL_API_URL = "http://localhost:8000";
+const SERVER_HOST = process.env.NEXT_PUBLIC_VERCEL_URL;
+
+// The Vercel Serverless Function for the API lives outside the scope of Next.js
+// so the publicly deployed URL must be used instead of a rewrite
+const api = axios.create({
+	baseURL: SERVER_HOST ? `https://${SERVER_HOST}/api/` : LOCAL_API_URL,
+});
+
+api.interceptors.request.use((config) => {
+	const cookieStore = cookies();
+
+	// Inject user's client-side cookies along with API request
+	const provided = config.headers.get("Cookie");
+	const newCookies = (provided ? `${provided}; ` : "") + cookieStore.toString();
+	config.headers.set("Cookie", newCookies);
+
+	return config;
+});
+
+export default api;

apps/site/vercel.json

@@ -1,6 +1,5 @@
 {
 	"buildCommand": "cd ../.. && turbo run build --filter={apps/site} && cd apps/site && ./copy-api.sh",
-	"rewrites": [{ "source": "/api/(.*)", "destination": "api/index.py" }],
 	"functions": {
 		"api/index.py": {
 			"memory": 512,