digitros/nextjs-fastapi

nextjs-fastapi's Issues

Refreshing failing

I have been using this template for a personal project but unfortunately I have noticed that when I make any changes to my nextjs files the change isn't shown until I 'ctrl + c' on my terminal.

I believe this should be a quick fix and an improvement that would improve the experience of using this template.

No module named 'auth'

File "nextjs-fastapi-starter/api/index.py", line 7, in
from auth.auth_bearer import JWTBearer
ModuleNotFoundError: No module named 'auth'
Hi @digitros @steven-tey i have auth folder inside api. How can I fix this error? Thanks a lot!
I run npm run fastapi-dev

Virtual Environment?

What if I want to make a virtual environment to support my Python build? Where should I put /venv in the repo? I'm guessing the root, as that is where requirements.txt is, but that's just my guess. Would love to know if there is a best practice here.

Error: Python version not supported

When I tried to deploy this I got this error. I did not change anything while deploying

Error: connect ECONNREFUSED 127.0.0.1:8000

I've just followed the steps here:
https://vercel.com/templates/next.js/nextjs-fastapi-starter

and am getting this error when I run npm run dev:

[1] Requirement already satisfied: anyio<5,>=3.4.0 in c:\python311\lib\site-packages (from starlette<0.28.0,>=0.27.0->fastapi==0.100.1->-r requirements.txt (line 1)) (4.0.0)
[0] }[0] - error Error: connect ECONNREFUSED 127.0.0.1:8000
[0]     at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {[0]   errno: -4078,
[0]   code: 'ECONNREFUSED',
[0]   syscall: 'connect',
[0]   address: '127.0.0.1',
[0]   port: 8000
[0] }
[0] - wait compiling /favicon.ico/route (client and server)...
[0] - event compiled successfully in 64 ms (96 modules)

I am using Windows, and Node.js v18.15

Doesn't work on vercel

Just by adding a few python dependencies, the vercel build will time out and fail

reproduction:

diff --git a/requirements.txt b/requirements.txt
index 1428c53..384a2ad 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,2 +1,9 @@
 fastapi==0.100.1
-uvicorn[standard]==0.23.2
\ No newline at end of file
+uvicorn[standard]==0.23.2
+librosa==0.10.1
+pydantic==2.5.3
+scikit_learn==1.3.2
+scipy==1.11.4
+torch==2.1.2
+transformers==4.36.2
+python-multipart

Reading Vercel Environment Variables in Python

How can I read Environment Variables defined in Vercel e.g. when running in production?

Swagger UI

Thanks for the great template! I've been playing around with trying to get the Swagger UI to work. I found that if I make the following tweaks to next.config.js then I can see them in dev. Haven't tried deploying to Vercel yet. Curious to know if you see any issues with this approach?

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

module.exports = nextConfig;

README instructions don't start fastapi backend

running

npx create-next-app nextjs-fastapi --example "https://github.com/digitros/nextjs-fastapi"
cd nextjs-fastapi
npm run dev

produces the following error / localhost:8000/docs isn’t accessible

[1] > pip3 install -r requirements.txt && python3 -m uvicorn api.index:app --reload
[1] error: externally-managed-environment
[1]
[1] × This environment is externally managed
[1] ╰─> To install Python packages system-wide, try brew install
[1] xyz, where xyz is the package you are trying to
[1] install.
[1]
[1] If you wish to install a non-brew-packaged Python package,
[1] create a virtual environment using python3 -m venv path/to/venv.
[1] Then use path/to/venv/bin/python and path/to/venv/bin/pip.
[1]
[1] If you wish to install a non-brew packaged Python application,
[1] it may be easiest to use pipx install xyz, which will manage a
[1] virtual environment for you. Make sure you have pipx installed.
[1]
[1] note: If you believe this is a mistake, please contact your Python installation or OS distribution provider. You can override this, at the risk of breaking your Python installation or OS, by passing --break-system-packages.

Setting CORS for the FastAPI server to be accessed only be the NextJS frontend

Is it possible to enable CORS on the FastAPI server so that only the NextJS frontend can make requests to it?

I've tried the standard way below, which didn't work. Could the fix involve modifying the Next rewrite configs?

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=['http://localhost:3000', 'https://helloworld.vercel.app'],
    allow_methods=["*"],
    allow_headers=["*"],
)

...

api directory name conflicting with nextauth

The api directory conflicts with nextauth's directory structure /app/api/auth/[...nextauth]. I think that nextauth doesn't like another directory being called api. This has the result that nextauth's login page won't work. Is there a way to change the api directory name in root?

Swagger UI and openapi.json not available in Vercel Deployments

Check the live demo-- https://nextjs-fastapi-starter.vercel.app/

According to next.config.js, the swagger UI should be at https://nextjs-fastapi-starter.vercel.app/docs, and the openapi.json at https://nextjs-fastapi-starter.vercel.app/openapi.json

However, both of those 404.

Have cloned this project locally & deployed it to vercel and can confirm I see the same behavior.

Any ideas on how to get the swagger ui and openapi.json to route correctly? Thanks!

Meet 500 error in /api/python

I use the Deploy Your Own -> You can clone & deploy it to Vercel with one click to deploy the default version in vercel. But meet the 500 internal server error after successful deployment in the link of /api/python. And I try several times, the same issue is appear. I check the log of vercel of this project, bellow is the detail info:
using Asynchronous Server Gateway Interface (ASGI)
LAMBDA_WARNING: Unhandled exception. The most likely cause is an issue in the function code. However, in rare cases, a Lambda runtime update can cause unexpected function behavior. For functions using managed runtimes, runtime updates can be triggered by a function change, or can be applied automatically. To determine if the runtime has been updated, check the runtime version in the INIT_START log entry. If this error correlates with a change in the runtime version, you may be able to mitigate this error by temporarily rolling back to the previous runtime version. For more information, see https://docs.aws.amazon.com/lambda/latest/dg/runtimes-update.html
[ERROR] TypeError: Queue.init() got an unexpected keyword argument 'loop'
Traceback (most recent call last):
  File "/var/task/vc__handler__python.py", line 305, in vc_handler
    response = asgi_cycle(__vc_module.app, body)
  File "/var/task/vc__handler__python.py", line 202, in call
    self.app_queue = asyncio.Queue(loop=loop)

Do I miss any step in deploy process?

Add dockerfile

Hi, I plan to submit a PR to add a dockerfile to this repo. Let me know if it is a good idea and I'll work on it.

Examples Sending and Receiving Requests to the API

Hi,
Thanks for creating this repo! Can you please create a few examples of how the interaction between the next app and the python app would work in the context of 13.4 features like fetching data on the server using Server Components, Route Handlers, and Server Actions. I'd love to use Python as the backend of my next app but I'd love to see some more best practices as to how the client <-> server interactions happen.
Thanks!
Jacob

License?

Is there a license for this project? I did not see one.

Does this method work with the pages router?

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