Multiple pages in one route?
Answered
Dwarf Hotot posted this in #help-forum
Dwarf HototOP
Maybe I'm overlooking something, but is the only way to have multiple pages under one route to export an implementation of
Use case: Creating a static html site with multiple pages under root ala
These pages all have unique content and layout and are not dynamic pages generated from any data source. But, per what I can find the docs, it does seem to suggest that I will need to create some sort of data-sourcing layer to have these pages created.
getStaticPaths?Use case: Creating a static html site with multiple pages under root ala
/index.html/foo.html/bar.htmlThese pages all have unique content and layout and are not dynamic pages generated from any data source. But, per what I can find the docs, it does seem to suggest that I will need to create some sort of data-sourcing layer to have these pages created.
Answered by josh
Maybe I'm misunderstanding, but wouldn't
app/index/page.ts, app/foo/page.ts and app/bar/page.ts solve this problem?26 Replies
Maybe I'm misunderstanding, but wouldn't
app/index/page.ts, app/foo/page.ts and app/bar/page.ts solve this problem?Answer
Dwarf HototOP
Maybe? I'll try it out. From reading, that pattern (using the new App Router) seemed to suggest that I would end up with
/index.html, /foo/index.html and /bar/index.htmlNope, you'll end up with
index.html, foo.html and bar.htmlI just ran a static export of one of my sites
Dwarf HototOP
You're right, that did work. But now I have a question about why. This is the page I was reading that suggested the opposite behavior: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Since
foo is a folder under app, I would've expected it to define a corresponding foo folder in the output.Actually, I kinda do see this behavior if I run
next dev.That page doesn't prescribe the output structure, only how it works route-wise
If you have
If you have
foo/page.ts then /foo will show you the output of foo/page.tsDwarf HototOP
I was just about to arrive at a similar conclusion.
it's about the router, not the generation
yeah
the output differs between targets but the end result is the same, and that's what the doc is talking abuot
Dwarf HototOP
does that mean that everything gets flattend with
output: export?what do you mean?
/foo/bar/xax/page.ts will resolve at /foo/bar/xaxDwarf HototOP
I was going to use NJS to build a chrome extension
static output, handles 'webpack', managed react components, etc...
but that means needing certain html files to be put in certain places and I'm wondering now how much I'll have to manually lift vs leveraging nextjs build rules.
ah i have no idea about that sorry
Dwarf HototOP
I thought the app router + export rules would mean that I could use the folder structure to layout my pages/content, but maybe not in the way I was thinking...
No worries, I appreciate the insights!
np! you can mark a message as solution with Right click -> Apps -> Mark Solution
Dwarf HototOP
After some testing, there's a bit of clarification on the answer.
Dwarf HototOP
A
page.ts file under a directory turns that directory into a route with the same name as the directory. i.e. under output: export, app/foo/page.ts becomes /foo.html and app/bar/page.ts becomes /bar.html like you might expect, but adding another intermediate directory like, app/bar/spam/page.ts becomes /bar/spam.htmlSo you can get multiple pages under one sub-directory with
export by using dir/page.ts to identify your leafs while any intermediate directory (with and without a page.ts file) will become a sub-directorySounds right to me