How to integrate Next.js server components and server actions with FastAPI backend

[nemanjam]

I often run into threads asking how to integrate modern Next.js with a custom "non-Next.js API" backend, or even a backend written in a completely different programming language. This is a quite reasonable requirement, since there are many rich and versatile backend ecosystems that integrate with certain technologies far better than TypeScript.

One such example is FastAPI, which is a perfect backend for working with the rich ecosystem of Python AI/ML/Data libraries.

I found myself in a similar dilemma, questioning whether to call FastAPI endpoints directly using React Query, use custom middleware, make a generic proxy, or some combination of these. I did some research, read opinions, reviewed all available examples I could find, and tested various approaches in sandbox projects.

Eventually, I migrated the official FastAPI full-stack template to Next.js 16 with server components and server actions. I chose to completely hide FastAPI behind the Next.js server and treat it as an internal service. This allows for a standard modern Next.js/React full-stack workflow, as if there is no custom backend. I am satisfied with the end result and how everything worked out.

I consolidated all of my findings, both for my own future reference and for others who want to do the same into a blog article:

https://nemanjamitic.com/blog/2026-01-03-nextjs-server-actions-fastapi-openapi

Also GitHub repository:

https://github.com/nemanjam/full-stack-fastapi-template-nextjs

Have you tackled similar challenges yourself? Did you use a different approach? I am looking forward to your feedback and discussion.