project structure, server actions, and data fetching
Answered
MarkMiklos posted this in #help-forum
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! 🙂
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! 🙂
Answered by LuisLl
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.
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.
7 Replies
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.
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.
Answer
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?
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
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”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.
Thanks this make sense now.
Happy to help! 
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?
Does this make sense?