The new `app` directory struture
Answered
Spectacled bear posted this in #help-forum
Spectacled bearOP
Hi all, I was working on migrating over a nextjs v13 project to next 14 which uses the new
app directory. While doing so I noticed that the component folder (which contained some components I need to display as individual pages) needed to be structured in a particular way folder wise. e.g app/components/input-component/page.tsx i.e each component needed it's own folder and within that folder the component needed to be called page.tsx I wanted to check if i've missed anything from the documentation or if this is the normal for next 14 projects?Answered by B33fb0n3
yea, it's seem's like your solution isn't correct. Each page will be called page.tsx. Inside your page you import your components. I like to use this structure: (see attached). I have a page for
So for you: define your pages and define your components as seperate components like
/pages/ and other pages for /[pageId] and /new. Components itself does not contain a page.tsx so it's not routable.So for you: define your pages and define your components as seperate components like
Component.tsx or some other name and then import it in your page.tsx like <Component \>.4 Replies
@Spectacled bear Hi all, I was working on migrating over a nextjs v13 project to next 14 which uses the new `app` directory. While doing so I noticed that the component folder (which contained some components I need to display as individual pages) needed to be structured in a particular way folder wise. e.g `app/components/input-component/page.tsx` i.e each component needed it's own folder and within that folder the component needed to be called `page.tsx` I wanted to check if i've missed anything from the documentation or if this is the normal for next 14 projects?
yea, it's seem's like your solution isn't correct. Each page will be called page.tsx. Inside your page you import your components. I like to use this structure: (see attached). I have a page for
So for you: define your pages and define your components as seperate components like
/pages/ and other pages for /[pageId] and /new. Components itself does not contain a page.tsx so it's not routable.So for you: define your pages and define your components as seperate components like
Component.tsx or some other name and then import it in your page.tsx like <Component \>.Answer
@Spectacled bear Thanks alot I will give this a try.
Sure thing. Please mark solution