Hey everyone! I’m relatively new to Next.js and I’m trying to implement a Feature-Sliced Design (FSD) inspired architecture. My current data flow looks like this:

UI Component ➔ Custom Hook ➔ Server Action ➔ Service Layer ➔ Database (Firestore)

I’m finding this helpful for separation of concerns, but I have a few doubts:

Is a custom hook between the UI and Server Action overkill, or is it better for client-side state management?
Does the 'Service' layer make sense in a serverless/edge environment, or should Server Actions talk directly to the DB?
Are there any specific pitfalls with this 'layered' approach regarding Next.js caching or streaming?

Would love to find any resources on how to structure web apps or if there are any repos I should check out.

Thanks!