It's possible to structure the pages inside pages directory?
Answered
Caribbean Elaenia posted this in #help-forum
Caribbean ElaeniaOP
I have folders with page.tsx files inside them. Is it possible to structure these into a single pages directory and place script files like home.tsx, contact.tsx, and others directly inside?
Any way to do that?
Any way to do that?
Answered by James4u
I am not sure how you set up next.js project but if you tried create-next-app you should have seen the options like app router/page router
66 Replies
Caribbean ElaeniaOP
Like this
It's way better
@Caribbean Elaenia I don't think it's how Next.js App router vs Page rotuer works
pages vs app inside src folder menas app router vs page router which is totally different.Caribbean ElaeniaOP
What
Well, I think it's kind of working now
But it returns an error:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
See more info here: https://nextjs.org/docs/messages/react-hydration-error@Caribbean Elaenia Click to see attachment
what do you think is this? app router or page router?
Caribbean ElaeniaOP
Page router
I see page.tsx which is an entry point of a route in
app router but again you have pages directory which means page routerCaribbean ElaeniaOP
Well, I've set it up now
then what's page.jsx and layout.jsx?
oh so you are talking about migrating app router into page router?
Caribbean ElaeniaOP
Yes
I don't think you need to do that manually
I am not sure how you set up next.js project but if you tried create-next-app you should have seen the options like app router/page router
Answer
and they recommend app router over page router
Caribbean ElaeniaOP
So, it's not possible manually?
I didn't say that 😅 it's totally possible
am asking the reason you are moving to the page router
Caribbean ElaeniaOP
Oh
But however it's returning some errors
Like this
Hydration errors
I believe that's because you migrated manually
see the error message, html tag is inside div
Caribbean ElaeniaOP
This is _app.jsx
that's the difference between layout.tsx and page.tsx in app router and _app.tsx, _document.tsx in page router
Caribbean ElaeniaOP
Oh
try to create a new next.js page router project and see how it looks like
Caribbean ElaeniaOP
So, if I want to wrap an application with ThemeProvider, how can I do it just like layout.tsx?
@James4u try to create a new next.js page router project and see how it looks like
Caribbean ElaeniaOP
Alr
there is no layout.tsx in page router @Caribbean Elaenia
Caribbean ElaeniaOP
But gonna need to save the files
@James4u there is no layout.tsx in page router <@1086702224324972605>
Caribbean ElaeniaOP
Yea Ik
What's the equivalent of it?
@James4u try to create a new next.js page router project and see how it looks like
Caribbean ElaeniaOP
What command should I use? create-next-app@latest?
yeah
npx create-next-app@latestCaribbean ElaeniaOP
Or I think I'll stay with App router
It's gonna be difficult to setup agian
💀
yeah, I have never seen a migration from app router to page router, lol
Caribbean ElaeniaOP
Well, I thought a pages directory would be more structured.
Nope, it's a misconception I believe
what makes you think so?
Caribbean ElaeniaOP
Wait, for the components, scripts, assets, and etc can they be outside the app directory?
yeah ofc
Caribbean ElaeniaOP
Damn
That's why
Lol
I have components inside app
And scripts
Alright, ty
nope, they shouldn't be inside app
@James4u nope, they shouldn't be inside app
Caribbean ElaeniaOP
Ye
inside app, like inside pages in page route,r you should have only route directories
Caribbean ElaeniaOP
I thought only the pages directory supports that
So, app directory is basically like pages directory
yes, app router does also!
yeah, it's just implementation of react server component
Caribbean ElaeniaOP
Ty for the help
Original message was deleted
sure, just remember to mark a solution!
Caribbean ElaeniaOP
Ye