Next.js Discord

Discord Forum

folder structure

Unanswered
Nile perch posted this in #help-forum
Open in Discord
Nile perchOP
Hey guys, i have made a next js project which did not have a _app.tsx and everything would be done in my layout.tsx. in terms of what would be seen on every page. I am now starting a new next js project and was wondering what the best type of file structure i should have. It is going to be somewhat similar to the one I just completed with different pages. I have a app where all my / pages are, my client components are all the components which would be rerendered on different pages or home and then my page.tsx in app is my home page. public has my images/fonts and json stuff, but idk if this is proper file structuring, I want to have good file structuring for this next app I am making

55 Replies

Blue orchard bee
Best file placement for me would be to have corresponding components inside each subdirectory. For example, if you have:
/app
  /about
    page.jsx
/components
  /about
    componentA.jsx
    componentB.jsx


Instead, you can do something like
/app
  /about
    /components
      componentA.jsx
      componentB.jsx
  page.jsx
This way your components are easy to find by route and domain.
Nile perchOP
but say in that case if I did /about/components wouldnt it lead to that page
because as u can see I have my app folder then in my app folder about folder, that folder repersents /about on the site
Blue orchard bee
In App directory, it only creates a page if it says page.jsx or page.tsx
If you're using Pages Router what you say would be true
Nile perchOP
ok so if im in /app and i have a about folder it would only route to about if i have page.tsx, if i have about/component.tsx it would route anything?
and when u first start out what would u structuring be like to have a _app.tsx
like is my file structure proper or should i change it in any way
other than the compnent stuff which i will look into
@Nile perch ok so if im in /app and i have a about folder it would only route to about if i have page.tsx, if i have about/component.tsx it would route anything?
Blue orchard bee
Yes, it wouldn't route to nothing, you can try it out, it's best practice too to have your components be uppercase
Component.tsx for example
It's standard React convention and also in this case, separates your componnets from Next.js routing.
@Nile perch other than the compnent stuff which i will look into
Blue orchard bee
Something I don't understand here is this app file, are you using the App Router?
_app.tsx is present on Pages Router, no in App Router
@Blue orchard bee Yes, it wouldn't route to nothing, you can try it out, it's best practice too to have your components be uppercase
Nile perchOP
right so im assuming files which are present to be a page would be lower case and compnents uppercase
@Blue orchard bee Something I don't understand here is this app file, are you using the App Router?
Nile perchOP
in the app file no, it automatically linked since about -> page.tsx
thats why im confused on how i should be settings up my folders
i dont see much people who did it the way I did and i do client work so i want proper structuring
@Nile perch in the app file no, it automatically linked since about -> page.tsx
Blue orchard bee
Yes but, where did the "app.tsx" file come from?
If I create a new Next.js template project, with the App Router, it doesn't have this file.

I've seen it present only in the Pages Router as _app.tsx
@Blue orchard bee Yes but, where did the "app.tsx" file come from?
Nile perchOP
i dont have app.tsx, i see it in other peopls folder thats where they put all the information such as the favicon stuff, i diidnt have that so my layout.tsx was used instead
so i dont exactly know the proper app structure and the differenes from what i have and what the pages folder difference
Netherland Dwarf
for me personally i have the following:
/src
 /app
 /components
  /common
  /others
  /ui
  /framer
  index.js
/lib
  /services
  /utils
  /schemas
  /auth
/utils
  /common
  /others
  index.js
/hooks
  /framer
  /others
/redux
  /actions
  /types
  /reducers
  store.tsx
/enums
/sections
  /home
  /about
  index.js
/contentManagement  
  [filename].yaml
this is the structure i use for folders but it depends on project requirements you may not need all these but it to give an idea
@Blue orchard bee I see it in the picture you sent, you can safely remove it.
Blue orchard bee
@Blue orchard bee Click to see attachment
Nile perchOP
right I just saw that, thanks, it isnt necessary because it only works with a pages folder right?
Blue orchard bee
Yes, the Pages Router, correct.
Nile perchOP
i thought enxt js was used to not use pages router and auto route
Netherland Dwarf
@Nile perch yeah it depends on your project though, but it gives an idea how you can separate logic, this folder structure i needed for a client but in bigger projects there are even more folders like /components/svgs and /models or /thirdparty etc it all depends
especially if your using animations like gsap or framer
you want to isolate those animation logic
@Netherland Dwarf <@784954554088161280> yeah it depends on your project though, but it gives an idea how you can separate logic, this folder structure i needed for a client but in bigger projects there are even more folders like /components/svgs and /models or /thirdparty etc it all depends
Nile perchOP
yea bro looks super advanced, i can tell its for a larger project, the website im trying to change the structuring for is a static website mainly just to display information but im sure it gets a lot more complicated, just wondering, based on my structuring is it incorrect or correct, I can send the files opened if u would want to see those aswell!
Netherland Dwarf
Well this may be a personal opinion but i like to put navbar and header inside /components/common since theyre both used throughout the app hence the folder name “common”. And i dont personally use “client” folder unless doing a fullstack app but then next is a fullstack app so i dont use that foldet “client”
It just make sure your folder namingg is consistent and that you group related files
Thats my 2 cents so to speak, and that isnt a personal opinion^
@Netherland Dwarf It just make sure your folder namingg is consistent and that you group related files
Nile perchOP
I see, so don’t use a client folder instead just have a components and within that, have different folders, maybe header and footer have there own
Like a common, other components are in just regular folder
Like components/AboutCard/AboutCard.tsx
And component/common/Header/Header.Tex
Otherwise is the structure fine
Netherland Dwarf
Hm do you have other components inside /Header
Again this is a personal preference and what i have seen be used by professional devs that i worked with in their open source projects
This isnt a must do
But i find this folder structure to be very easy to maintain and read for anyone who jumps into the codebase for the first time
Blue orchard bee
I agree, I'd do

/app
  /components (shared by whole app)
    Button.tsx
  /about
    page.tsx
    /components (specific to the about section)
      Container.tsx
      Title.tsx
  /news
    page.tsx
  page.tsx
  layout.tsx


If it's purely static this should get you far and anyone should be able to pick up from there.
Sorry, edited it, sent it wrong first time.
Nile perchOP
thanks guys, i guess ill continue using this type of file structure with small tweaks that u guys recommended
Which is for shared stuff
The one in which I put Button.tsx in the example