Confused with Next.js 13.4 folder structure
Answered
Acorn Woodpecker posted this in #help-forum
Acorn WoodpeckerOP
Hey, I'm confused with Next.js 13.4 folder structure. when we create a next app the folder structure looks like following:
but what if I want to add other pages like login, dashboard, register, profile, etc.. I tried something following :
so that means I have to create folder and then a
|_ src
|_app
|_layout.tsx
|_ page.tsxbut what if I want to add other pages like login, dashboard, register, profile, etc.. I tried something following :
|_ src
|_app
|_ Login
|_ page.tsx
|_layout.tsx
|_ page.tsxso that means I have to create folder and then a
page.tsx file for each page I want to add in my application ?Answered by aardani
One of the reason i can think of why they choose to use folders is that because each "route" can have a layout that can be nested with the parent "route"
10 Replies
@Acorn Woodpecker Hey, I'm confused with Next.js 13.4 folder structure. when we create a next app the folder structure looks like following:
|_ src
|_app
|_layout.tsx
|_ page.tsx
but what if I want to add other pages like login, dashboard, register, profile, etc.. I tried something following :
|_ src
|_app
|_ Login
|_ page.tsx
|_layout.tsx
|_ page.tsx
so that means I have to create folder and then a `page.tsx` file for each page I want to add in my application ?
there are dynamic routes and catch-all routes if you still want to opt to handle it yourself
and reduce the number of files you have to create
@aardani there are dynamic routes and catch-all routes if you still want to opt to handle it yourself
Acorn WoodpeckerOP
But isn't the page routing convention is good in this case ? This is first time I'm working on app routing but in pages routing the structure looks like following :
Like its still
|_ pages
|_ index.tsx
|_ app.tsx
|_ auth
|_ login.tsx
|_ register.tsx
|_ dashboard
|_ profile.tsx
|_ settings.tsxLike its still
auth/login and dashboard/profile but isn't it good compare to different folder for different pages ?@Acorn Woodpecker But isn't the page routing convention is good in this case ? This is first time I'm working on app routing but in pages routing the structure looks like following :
|_ pages
|_ index.tsx
|_ app.tsx
|_ auth
|_ login.tsx
|_ register.tsx
|_ dashboard
|_ profile.tsx
|_ settings.tsx
Like its still `auth/login` and `dashboard/profile` but isn't it good compare to different folder for different pages ?
there are a lot more differences in between the pages dir and app dir.
and i can't say which one is better as i've only used the app dir (see nickname)
if you think the pages dir's routing is better theres no stopping you to use the
and i can't say which one is better as i've only used the app dir (see nickname)
if you think the pages dir's routing is better theres no stopping you to use the
pages dir convention in next.js 13 :) its still supportedthough all app dir features are only in the app folder, and can't be used in the pages folder
@Acorn Woodpecker But isn't the page routing convention is good in this case ? This is first time I'm working on app routing but in pages routing the structure looks like following :
|_ pages
|_ index.tsx
|_ app.tsx
|_ auth
|_ login.tsx
|_ register.tsx
|_ dashboard
|_ profile.tsx
|_ settings.tsx
Like its still `auth/login` and `dashboard/profile` but isn't it good compare to different folder for different pages ?
One of the reason i can think of why they choose to use folders is that because each "route" can have a layout that can be nested with the parent "route"
Answer
as in nested layouts
@aardani One of the reason i can think of why they choose to use folders is that because each "route" can have a layout that can be nested with the parent "route"
Acorn WoodpeckerOP
okay got it. I'll stick to app dir. want to experience layout and other features : )