digitros / nextjs-fastapi

https://nextjs-fastapi-starter.vercel.app
MIT License
408 stars 117 forks source link

Does this method work with the pages router? #2

Open remusris opened 1 year ago

remusris commented 1 year ago

Can you copy the code from next.config.ts in an existing pages router nextJS project to get this method to work?

digitros commented 1 year ago

@remusris Absolutely. Just make sure you change the path to the python file in the package.json script. Something like this, if you're not using "src": "fastapi-dev": "pip3 install -r requirements.txt && python3 -m uvicorn pages.api.index:app --reload",

remusris commented 1 year ago

My second question is can this be used alongside trpc? I'm referring to a t3 stack scaffold

below is the t3 stack folder structure

├─ public │ └─ favicon.ico ├─ prisma │ └─ schema.prisma ├─ src │ ├─ env.mjs │ ├─ pages │ │ ├─ _app.tsx │ │ ├─ api │ │ │ ├─ auth │ │ │ │ └─ [...nextauth].ts │ │ │ └─ trpc │ │ │ └─ [trpc].ts │ │ └─ index.tsx │ ├─ server │ │ ├─ auth.ts │ │ ├─ db.ts │ │ └─ api │ │ ├─ routers │ │ │ └─ example.ts │ │ ├─ trpc.ts │ │ └─ root.ts │ ├─ styles │ │ └─ globals.css │ └─ utils │ └─ api.ts ├─ .env ├─ .env.example ├─ .eslintrc.cjs ├─ .gitignore ├─ next-env.d.ts ├─ next.config.mjs ├─ package.json ├─ postcss.config.cjs ├─ prettier.config.cjs ├─ README.md ├─ tailwind.config.ts └─ tsconfig.json

Would you just change the code below


const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/:path*"
            : "/api/",
      },
    ];
  },
};

module.exports = nextConfig;```

To something like the code below? 

```/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: "/api/folder/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/:path*"
            : "/api/folder",
      },
    ];
  },
};

module.exports = nextConfig;```
IdoPesok commented 12 months ago

@digitros will it work with tRPC ? ^

I got it to work correctly on my localhost but for some reason Vercel isn't recognizing the Python file in src/pages/api/[dir name]

Wolfleader101 commented 11 months ago

Just following up on if anyone got this working

Wolfleader101 commented 11 months ago

@digitros will it work with tRPC ? ^

I got it to work correctly on my localhost but for some reason Vercel isn't recognizing the Python file in src/pages/api/[dir name]

I've been update to replicate on localhost, it does not rewrite for me

JohnVersus commented 11 months ago

It should work with the app folder too, but you can't add the file inside app folder. Create a newapi folder in the root and add your python function API folder along with index.py.

reference: https://vercel.com/docs/functions/serverless-functions/runtimes

image
Wolfleader101 commented 11 months ago

It should work with the app folder too, but you can't add the file inside app folder. Create a newapi folder in the root and add your python function API folder along with index.py.

reference: https://vercel.com/docs/functions/serverless-functions/runtimes image

I haven't gotten it to work with the pages directory.

I have image image

  rewrites: async () => {
    return [
      {
        source: "/api/py/:path*",
        destination:
          process.env.NODE_ENV === "development"
            ? "http://127.0.0.1:8000/api/py/:path*"
            : "/api/py",
      },
    ];
  },

image

it seems to be deploying to /api/index

from fastapi import FastAPI, Request, APIRouter

router = APIRouter(prefix="/api/py")

@router.get("/")
def hello_world(request: Request):
    return {"message": "Hello World"}

app = FastAPI()
app.router.include_router(router)

which means this code never gets run

JohnVersus commented 11 months ago

@Wolfleader101 It works the same way in pages too.

Since you mentioned /api/py route as prefix in code, vercel will not use it for the path. Vercel only uses the file name or folder name for the API path

As per your current setup your python code should run in api/index/api/py

Wolfleader101 commented 11 months ago

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file... Any solution to get past this?

JohnVersus commented 11 months ago

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file... Any solution to get past this?

Yeah, I think that's a limitation when you are using Python runtime with the next js framework.

To fully utilize the Python runtime like one single Python backend app you need to remove the next js files and host it with just vercel config.

Wolfleader101 commented 11 months ago

api

It seems to be that it works but only on a per file basis - you can't have a fully setup fast API router, you need to have one per file... Any solution to get past this?

Yeah, I think that's a limitation when you are using Python runtime with the next js framework.

To fully utilize the Python runtime like one single Python backend app you need to remove the next js files and host it with just vercel config.

Yea seems to be a limitation with multiple project types. Hopefully they fix it in the future.