I’ve got an app the follows the following architecture:
- NextJS frontend
- Multiple backend service APIs (fastapi, but doesnt matter)
- A NextJS API layer that handles all the routing between backend services, auth, etc
This all works great, but here’s the problem:
No matter what I try, Cursor agents constantly try to bypass the NextJS api and fetch data directly from the backend. I’ve even gone as far as creating an “always on” cursor rule defining the behavior:
---
alwaysApply: true
---
Whenever adding functionality that integrates the web frontend (`/web`) with a backend service (`/services`), you must follow these steps:
1) Deterime what backend service APIs and endpoints you need to interact with. If the endpoints don't exist, implement them.
2) Update the relevant client to access these APIs (e.g. configServiceClient.ts and analystServiceClient.ts)
3) Update/Implement the Next.js api endpoints to serve as a gateway between the backend services and the web app. These are located in `/web/src/app/api/*`.
4) Update/Implement the relevant cliend-side context and hooks in `/web/src/context` and `/web/src/hooks`
5) Finally, implement the UI implementation, creating reusable components in `/web/src/components/` where reasonable.
When configuring the UI, you should use the following guidelines:
1) Always optimistically update the UI while waiting for the backend to respond.
2) Always roll back the UI when the backend returns an error response.
3) Always show a loading state when the backend is loading.
4) Always show an error state when the backend returns an error response.
Has anyone gotten something similar to work consistently? Tired of constantly prompting for this.