From e8009e944d8592c6c3e54513376361b8061cdd22 Mon Sep 17 00:00:00 2001 From: Rami Maalouf Date: Mon, 18 Sep 2023 19:47:56 -0400 Subject: [PATCH 1/4] feat: you can now use both fastAPI and NextJS in the backend --- .gitignore | 4 ++++ README.md | 17 +++++++++++++---- api/index.py | 8 ++++---- app/api/healthcheck/route.ts | 23 +++++++++++++++++++++++ 4 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 app/api/healthcheck/route.ts diff --git a/.gitignore b/.gitignore index 8f322f0d..38830eaf 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,7 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# python +__pycache__/ +venv diff --git a/README.md b/README.md index db041800..10d3b3eb 100644 --- a/README.md +++ b/README.md @@ -5,19 +5,20 @@

-

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

+

Simple Next.js boilerplate that uses BOTH FastAPI AND NEXTJS 13 as the API backend unlike
## Introduction -This is a hybrid Next.js + Python app that uses Next.js as the frontend and FastAPI as the API backend. One great use case of this is to write Next.js apps that use Python AI libraries on the backend. +This is a hybrid Next.js + Python app that uses a fullstack Next.js application and FastAPI as another 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 -The Python/FastAPI server is mapped into to Next.js app under `/api/`. +The Python/FastAPI server is mapped into to Next.js app under `/api/py/` and the NextJS is mapped to `/api/`. -This is implemented using [`next.config.js` rewrites](https://github.com/digitros/nextjs-fastapi/blob/main/next.config.js) to map any request to `/api/:path*` to the FastAPI API, which is hosted in the `/api` folder. + +This is implemented using [`next.config.js` rewrites](https://github.com/digitros/nextjs-fastapi/blob/main/next.config.js) to map any request to `/api/py/:path*` to the FastAPI API, which is hosted in the `/api` folder. On localhost, the rewrite will be made to the `127.0.0.1:8000` port, which is where the FastAPI server is running. @@ -53,6 +54,14 @@ yarn pnpm install ``` +Create a virtual environment and install the dependencies for the FastAPI server: + +```bash +python3 -m venv venv +source venv/bin/activate +pip install -r requirements.txt +``` + Then, run the development server: ```bash diff --git a/api/index.py b/api/index.py index 44737eaf..93d9d9d2 100644 --- a/api/index.py +++ b/api/index.py @@ -1,7 +1,7 @@ from fastapi import FastAPI -app = FastAPI() +app = FastAPI(docs_url="/api/py/docs", openapi_url="/api/py/openapi.json") -@app.get("/api/python") -def hello_world(): - return {"message": "Hello World"} \ No newline at end of file +@app.get("/api/py/healthcheck") +def healthchecker(): + return {"status": "success", "message": "Integrated FastAPI Framework with Next.js successfully!"} \ No newline at end of file diff --git a/app/api/healthcheck/route.ts b/app/api/healthcheck/route.ts new file mode 100644 index 00000000..7cee4909 --- /dev/null +++ b/app/api/healthcheck/route.ts @@ -0,0 +1,23 @@ +import { type NextRequest, NextResponse } from "next/server"; + +export async function GET(req: NextRequest) { + const { searchParams } = new URL(req.url); + + try { + return NextResponse.json( + { + message: "Hello from the NextJS API", + }, + { + headers: { + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Headers": "*", + "Access-Control-Allow-Methods": "*", + // "Content-Type": "application/json", + }, + } + ); + } catch (e) { + return NextResponse.error(); + } +} From b7564d51ba06848491f84b85bb43ca2f7efcdf67 Mon Sep 17 00:00:00 2001 From: Rami Maalouf Date: Mon, 18 Sep 2023 19:53:53 -0400 Subject: [PATCH 2/4] final commit --- next.config.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/next.config.js b/next.config.js index e6b49bc5..cd6f8e87 100644 --- a/next.config.js +++ b/next.config.js @@ -3,25 +3,25 @@ const nextConfig = { rewrites: async () => { return [ { - source: "/api/:path*", + source: "/api/py/:path*", destination: process.env.NODE_ENV === "development" - ? "http://127.0.0.1:8000/api/:path*" + ? "http://127.0.0.1:8000/api/py/:path*" : "/api/", }, { source: "/docs", destination: process.env.NODE_ENV === "development" - ? "http://127.0.0.1:8000/docs" - : "/api/docs", + ? "http://127.0.0.1:8000/api/py/docs" + : "/api/py/docs", }, { source: "/openapi.json", destination: process.env.NODE_ENV === "development" - ? "http://127.0.0.1:8000/openapi.json" - : "/api/openapi.json", + ? "http://127.0.0.1:8000/api/py/openapi.json" + : "/api/py/openapi.json", }, ]; }, From b3af42e1da264cd5f4ebe5d770db6a7abbefe95e Mon Sep 17 00:00:00 2001 From: Rami Maalouf Date: Mon, 18 Sep 2023 17:58:42 -0600 Subject: [PATCH 3/4] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 10d3b3eb..4bfa3f50 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

-

Simple Next.js boilerplate that uses BOTH FastAPI AND NEXTJS 13 as the API backend unlike +

Simple Next.js boilerplate that uses BOTH FastAPI AND NEXTJS 13 as the API backend unlike [the example offered by NextJS](https://github.com/digitros/nextjs-fastapi)
@@ -32,14 +32,14 @@ https://nextjs-fastapi-starter.vercel.app/ You can clone & deploy it to Vercel with one click: -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdigitros%2Fnextjs-fastapi%2Ftree%2Fmain) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fpsycho-baller%2Fnextjs-and-fastapi-backend%2Ftree%2Fmain) ## Developing Locally You can clone & create this repo with the following command ```bash -npx create-next-app nextjs-fastapi --example "https://github.com/digitros/nextjs-fastapi" +npx create-next-app nextjs-fastapi --example "https://github.com/psycho-baller/nextjs-and-fastapi-backend" ``` ## Getting Started From 3aa296acf07346faa53fbcaa5f8ab445dafe49d5 Mon Sep 17 00:00:00 2001 From: Rami Maalouf Date: Wed, 20 Sep 2023 21:53:13 -0600 Subject: [PATCH 4/4] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4bfa3f50..1913746e 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

-

Simple Next.js boilerplate that uses BOTH FastAPI AND NEXTJS 13 as the API backend unlike [the example offered by NextJS](https://github.com/digitros/nextjs-fastapi) +

Simple Next.js boilerplate that uses BOTH FastAPI AND NEXTJS 13 as the API backend unlike the example offered by NextJS
@@ -15,7 +15,7 @@ This is a hybrid Next.js + Python app that uses a fullstack Next.js application ## How It Works -The Python/FastAPI server is mapped into to Next.js app under `/api/py/` and the NextJS is mapped to `/api/`. +The Python/FastAPI server is mapped into to Next.js app under `/api/py/`(easily changeable) and the NextJS is mapped to `/api/`. This is implemented using [`next.config.js` rewrites](https://github.com/digitros/nextjs-fastapi/blob/main/next.config.js) to map any request to `/api/py/:path*` to the FastAPI API, which is hosted in the `/api` folder.