Next.js Discord

Discord Forum

tutorial confusing file layouts

Answered
Jumbo flying squid posted this in #help-forum
Open in Discord
Jumbo flying squidOP
I'm going through the tutorial https://nextjs.org/learn. I'm a bit confused by some of the file duplication that exists in the repo:
https://github.com/vercel/next-learn/tree/main/dashboard/final-example/app/dashboard
https://github.com/vercel/next-learn/tree/main/dashboard/final-example/app/ui/dashboard

why does the dashboard folder (with the same contents) exist in two different places? The tutorial seems to not mention the /ui version, but I suspect that's the idiomatic one?

Can someone enlighten me as to which is correct?
Answered by joulev
They don’t have the same content. app/ui/dashboard has the components needed in the dashboard page, while app/dashboard is the dashboard page
View full answer

40 Replies

Answer
joulev
You can put app/ui/dashboard anywhere. components/ui/dashboard, components/dashboard, hello/world/dashboard all work
Jumbo flying squidOP
ah sorry my bad. so app/dashboard is pages, and app/ui/dashboard is components
i don't mind the naming, I suppose I just want to know what an "expert" next.js dev would do
joulev
I personally would never put the ui folder inside app, you can add a page.tsx file there unknowingly and suddenly you have a new route available to the public
I would just make a components folder and put things there
Schneider’s Smooth-fronted Caiman
hmhm
Jumbo flying squidOP
that makes sense to me too
@Jumbo flying squid i don't mind the naming, I suppose I just want to know what an "expert" next.js dev would do
Schneider’s Smooth-fronted Caiman
Export default is used for Home or page route or layout
so if u do export default function Home(),
then u can use :
import Home from "./Home";
Jumbo flying squidOP
even instead of /app, I'd probably go "/pages" and "/components"
@Jumbo flying squid even instead of /app, I'd probably go "/pages" and "/components"
Schneider’s Smooth-fronted Caiman
Therre are 2 router
1. pages 2. app
Jumbo flying squidOP
but I'm new to this
Schneider’s Smooth-fronted Caiman
/app means app router, /pages is the pages one
ok wait
@Jumbo flying squid even instead of /app, I'd probably go "/pages" and "/components"
joulev
In the pages router you cannot put components inside the folder, but in the app router you can (doesn’t mean you must)
So yeah there is that subtle difference
Schneider’s Smooth-fronted Caiman
@Jumbo flying squid look u can switch router in nextjs docs
there is a option at left in docs
@Schneider’s Smooth-fronted Caiman <@596946218983227393> look u can switch router in nextjs docs
joulev
Whatever you have been speaking here doesn’t make much sense to me, what are you trying to say?
Schneider’s Smooth-fronted Caiman
if ur project has /src/app or /app then its app router so u can read its docs
@Jumbo flying squid even instead of /app, I'd probably go "/pages" and "/components"
Brown bear
App router doesn't need "/pages"
Jumbo flying squidOP
when you say "app router", what are you referring to exactly? is the app folder "hardcoded" effectively by the router?
@Jumbo flying squid when you say "app router", what are you referring to exactly? is the app folder "hardcoded" effectively by the router?
Schneider’s Smooth-fronted Caiman
nah thats jut a layout for files x
Jumbo flying squidOP
the "app" directory must be configured somewhere, right?
I had a lookaround, couldn't find it
@Jumbo flying squid the "app" directory must be configured somewhere, right?
Schneider’s Smooth-fronted Caiman
it is when u create-next-app
it asks Do you want to use the app router (or something revelant)
so files will go to /app
if u say no then its pages
Jumbo flying squidOP
ahhh ok I didn't realise that
Anon Dev
who can help concerning this error, its from the learn nextjs project
@Schneider’s Smooth-fronted Caiman it asks Do you want to use the app router (or something revelant)
Jumbo flying squidOP
and by "app router", do you mean "use folders as the router structure"?
Schneider’s Smooth-fronted Caiman
hm