Bit of a complicated problem, wondering how you guys would solve it

[fast depot]

Hiya, I'm making a website like thisiswhyimbroke.com, that lists loads of different products as a gift giving guide.
Theres a few ways to search for products, by category, by occasion and by recipient. I want pages for each website.com/category, website.com/occasion, website.com/recipient to work and in each to display the different sub-pages (occasion/christmas, occasion/halloween) etc.

My problem is that the best way I've found so far is to make a folder for each, but I'd like them to be dynamic so they all look the same, just display different items etc.

Hopefully that makes sense

It'll be using server side rendering btw

[white geyser]

https://beta.nextjs.org/docs/data-fetching/generating-static-params#

[fast depot]

I did do that, but would that work with SSR?

because in the page it needs to fetch things on load

[white geyser]

"The generateStaticParams server function"

It looks like it but I haven't used it myself

[fast depot]

My concern is that it says it runs on build time, which I suppose just for generating those 3 routes it'd be fine, as long as it can then be used along with getServerSideProps

[white geyser]

can you not do app/[slug]/page.js ?

[fast depot]

I'm not on next13 but thats basically what i've done here

this index.js is what will actually be the page, i just need to make it so the "dynamic" route can only be those three

[white geyser]

oh, I am very sorry for assuming next13

[fast depot]

thats fine, i probably should upgrade but honestly i cba to learn the changes right now 😂

[white geyser]

I wouldn't switch an existing app at this point, 😛

to using the appDir that is

[fast depot]

yeah not worth the effort

I feel like I've not explained my problem very clearly tbh lmao

[white geyser]

I'm really new to nextjs. let me look at normal docs

I'm usually a doc master 😛

[fast depot]

pages
| category
| | [category]
| | | index.js
| | index.js
| occasion
| | [occasion]
| | | index.js
| | index.js
| recipient
| | [recipient]
| | | index.js
| | index.js

essentially thats how the "brute force" method would work

but each of those first level index.js are the same page, so it makes sense to me for that to be dynamic

pages
| [by]  (either category, occasion or recipient)
| | [section]
| | index.js

hopefully that makes it a little more clear what I'm trying to achieve

[white geyser]

can you not use slugs with the pages setup?

[fast depot]

thats what the [by] is, but that would mean you could put anything there, i want it to just be those three options

[white geyser]

can you just use a condition to check if you're one of the three options and throw a not found if not?

[fast depot]

yeah I gave that a go but it was throwing all sorts of errors, I'll maybe give it another quick go incase i was just being stupid

[white geyser]

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#notfound

I may be completely leading you into the wrong direction but I hope not

[fast depot]

export async function getServerSideProps(context) {
    const paths = ["category", "occasion", "recipient"]
    const query = context.query.by

    if (!paths.includes(query)) {
        return {
            notFound: true,
        }
    }

    return {
        props: { by: query },
    }
}

ok well this works

all paths other than those 3 return a 404

so now the next question...

I now want a [section].js path so you can have occasion/christmas, occasion/halloween etc.

I think i can figure that out but tbh my tired brain is making this so much more overwhelming than it needs to be

this is my first time properly messing with dynamic routes in next if you cant tell lmao

[white geyser]

yeah, I'm not the best to help

I've been using next13 for a few days and never used next12 😛

and haven't used React in years

well until this week

[fast depot]

I was happy with react but seo 😢

[white geyser]

how much of your site is public facing for seo? did you try rendering the page differently for crawlers?

[fast depot]

honestly i've not made it that far yet

[white geyser]

there are products for it but I can't remember their names

I meant as an alternative to making things SSR 😛

[fast depot]

tbh i just much prefer using ssr

[white geyser]

gotcha

[fast depot]

its faster, seo is vastly improved

theres obviously other workarounds but this is easiest, and also having the "backend" built in is pretty cool

[white geyser]

gotcha. I found it. prerender.io. neat solution for if you had an existing codebase and wanted to make 'er just work

are you talking about the pages/api stuff?

sorry, I'm polluting your thread.

[fast depot]

sorry nah just trying to wrap my head around this 😂

i think i got something working but its a mess 😂

pages/[by]/index.js

export async function getServerSideProps(context) {
    const paths = Object.keys(db.by)
    const query = context.query.by

    if (!paths.includes(query)) {
        return {
            notFound: true,
        }
    }

    //fetch all sub-pages
    return {
        props: { by: query },
    }
}```

pages/[by]/[section].js

export function getServerSideProps(context) {
    const paths = Object.keys(db.by)
    const query = context.query

    console.log(query.section)
    console.log(db.by[query.by])

    if (!paths.includes(query.by) || !db.by[query.by].sections.includes(query.section)) {
        return {
            notFound: true,
        }
    }

    
    //fetch products to go on this page
    return {
        props: { section: context.query.section },
    }
}```