Best Practices for Structuring a Next.js + FastAPI + Supabase Project?

How To
1

I’ve built my third project using Next.js with a FastAPI backend, authentication, and Supabase. However, in my last project, I reached a point where I had to rewrite everything due to issues like:

  • Authentication problems
  • The frontend making too many requests
  • Scaling challenges when adding new features

Now, I’m planning to include an admin dashboard and a payment system, and I want to structure the project properly from the start.

I’d appreciate advice on:

  1. What’s the best sequence for implementing features? (e.g., auth first, then API, etc.)
  2. How to prevent major code breaks when adding new features?
  3. Best practices for optimizing API calls to avoid excessive frontend requests?
  4. Any recommended project structure or tools to manage complexity?

Any insights, experiences, or resources would be really helpful. Thanks!

2

Cursor has some great features to help manage complex projects like this

For preventing code breaks, use Agent mode with the “Yolo” setting enabled - it’ll run your test suite automatically when making changes. You can also set up rules in .cursor/rules to enforce patterns for specific folders/files

For optimizing API calls, try using @Docs to index both your Next.js and FastAPI docs at once. This helps Cursor understand the relationship between your frontend and backend code better

When adding new features, Composer mode is super helpful - it creates checkpoints as you work and can fix lint errors automatically. Plus you can use @Git to scan diffs for potential bugs before committing

For managing complexity across the full stack, make sure to set up proper codebase indexing (check out docs here). You can use .cursorignore to optimize which parts get indexed

These tools working together should help keep your project maintainable as it grows

3

Hi,

I think most of the topic is not cursor specific :slight_smile:

I am trying the same thing. NextJS (or tanstack router) frontend, FastAPI AI Backend and Supabase for the rest.
For supabase I use “npx supabase gen types typescript --local --schema public > src/utils/db.ts”. Unfortunately there is no pydantic output. Also I use React Query to cache data and try to optimize queries that I can fetch the whole page data in one query. I use supabse auth, this might be different on your end. I only want to depend on an open-souce stack, just as an insurance. I do most query calls from “use client” in NextJS the SSR thing for me is mostly valuabe for landing pages and not for pages behind auth. I keep the whole project into one repo and use
Currently I experiment with serving pages (tanstack router) directly via fastapi static to simplify hosting. But I am back and forth between NextJS and Tanstack Router.

I would be interested into having an idea what would be a good approach for the cursor rules for a project which has a frontend and backend folder.

Feel free to reach out to me to exchange approaches.

/ jryannel