How should you structure the API layer in a Next.js project?
Suppose you have a server-side fetcher function and a client-side fetcher used in a React swr hook, both used on the same page. How should you organize these functions within your api folder to keep things clean and maintainable?
I want to do something similar to React Bulletproof
2 Replies
@Alexito You can structure your API folder like this for clarity:
Place server-side fetchers in lib/api/server/ and client-side fetchers in lib/api/client/, keeping shared types in lib/types/ this mirrors a “React Bulletproof” approach with clear separation of concerns.
okay thanks for sharing your structure. however it has nothing to do with bulletproof
My structure is
i put my client swr hooks and fetchers in /features/_api
like
/features/account/_api/useUser.ts
then my server fetchers in
/features/account/_server/getUser.ts