Next.js Discord

Discord Forum

What is the best way to setup this path?

Answered
Slovakian Wirehaired Pointer posted this in #help-forum
Open in Discord
Slovakian Wirehaired PointerOP
Hi,

So I'm not sure which way would be the most optimal to structure the paths for my app. I read on https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes that I basically have 4 options:

1) Stick with what I have now. The issue with this is that all 4 routes will be exactly the same page and structure-wise. just different parameters for the DB.

2) Use [hardware] and then a subroute [slug] and then use the data there, but I'm not sure if it is doable, and if it is do I have to use generateStaticParams ?

3) Use [...hardware]

4) Use searchParams

Would anyone be able to help me understand this better?
Answered by Ray
// app/presets/[hardware]/[slug]/page.tsx
export async function generateStaticParams() {
  return [
    { hardware: "headset", slug: "headset1" },
    { hardware: "headset", slug: "headset2" },
    { hardware: "keyboard", slug: "keyboard1" },
    { hardware: "keyboard", slug: "keyboard2" },
    { hardware: "mic", slug: "mic1" },
    { hardware: "mic", slug: "mic2" },
    { hardware: "mouse", slug: "mouse1" },
    { hardware: "mouse", slug: "mouse2" },
  ];
}
View full answer

8 Replies

and use generateStaticParams if you need to generate those page
Ray
// app/presets/[hardware]/[slug]/page.tsx
export async function generateStaticParams() {
  return [
    { hardware: "headset", slug: "headset1" },
    { hardware: "headset", slug: "headset2" },
    { hardware: "keyboard", slug: "keyboard1" },
    { hardware: "keyboard", slug: "keyboard2" },
    { hardware: "mic", slug: "mic1" },
    { hardware: "mic", slug: "mic2" },
    { hardware: "mouse", slug: "mouse1" },
    { hardware: "mouse", slug: "mouse2" },
  ];
}
Answer
@Ray hi, I would do `app/presets/[hardware]/[slug]/page.tsx`
Slovakian Wirehaired PointerOP
Hi, thank you for your response.

Just to clairify so; I’m building a site where users can register and create their own custom profile for pc hardware.

So Ill know the number of hardware pages that there are going to be, but not the number of sub pages. Would this still work? and is generateStaticParams optional?
so for your use case, I think you don't need it
@Ray yes if you don't export `generateStaticParams`, it will build the page on first visit
Slovakian Wirehaired PointerOP
Thank you!