#project structure, server actions, and data fetching

1 messages · Page 1 of 1 (latest)

vapid rose
#

What is the best way to structure the project?
Where server actions should be placed?
Where data fetching should be placed?

I want to seperate server actions (mutations) and data fetches

I saw on other forums that server actions and data fetches should be placed in the /app folder, is this true?

Let's say I have a folder called actions in the app folder, and a data folder, doesn't it affect the routing as it is placed in the app folder?

I would genuinely like to know the best practices.

Thanks! 🙂

light owlBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

hallow drum
#

It doesn’t matter where you place the folders. It doesn’t affect the routing as long as you avoid some file names.
There are are few you have to be aware of when placing your code inside the /app/ folder:
page.tsx
layout.tsx
loading.tsx
not-found.tsx
error.tsx and global-error.tsx
api/ folder (convention mostly)
route.ts
And a couple more.

But as long as you don’t export any of these reserved files from your non-routable folders you should be Ok.

The convention here is to prefix the all the folders that don’t map to a route (page.tsx or route.ts) with _ (underscore). This will make Next.js ignore these directories when routing.

vapid rose
#

Ahh yeah i just saw the underscore folder way, that make sense, also actions need use server, so it is called on the server, but what about data fetching? I just fetch it, without use server, and then it is automatically on the server?

hallow drum
#

Exactly when you’re on a server component you can just fetch data and pass down to client components, prefer this way whenever it’s possible.
Though, sometimes it’s just not possible or you need to fetch data exclusively from the client, but you still need the logic to live on the server, for this you’ll have to make a Route Handlers.
What I would suggest is that you put the logic in a utility function and use that wherever you need it, also this way makes it easier to cache the data access function, or check for auth before actually fetching the data, and have it behave the same no matter where you call it (directly in server components or route handlers).

Just have in mind, do not use “use server” to mark a server component, it’s not the intention of it. It only marks server functions (mutations) that are going to be called from the client. The rest lives on the server by default, and when you need to opt out you “use client”

vapid rose
#

I meant use server for server actions only yeah, that part is clear, wasn't sure of the data fetching part, as i was doing it in the server action file, where i did the mutation functions as well.

Thanks this make sense now.

light owlBOT
hallow drum
#

Happy to help! thinq

vapid rose
#

One last quick question, doesn't have src folder, so @/lib or @/utils/actions/user.ts for mutations and -> this has the "use server" as it is a mutation @/utils/queries/user.ts for data fetching -> this has server-only import to make sure it isn't imported to client components.

Does this make sense?