Are you using the app directory, or the pages directory?

app

Go to your browser, and go to the page with the code in the first screenshot (ProjectsPage)

And tell me what the page URL is

Without clicking on any link

sure

Yeah ok so the issue is that the link is trying to take you to localhost:3000/projects/projects/${project.slug}

(I think)

well but heres the 404 page

Oh it's because you can't have it the way you set it up in the app dir.

yeah thats what happens if i remove the /projects in proejcts page functino

You need to have one folder for projects, and inside of that a page.tsx file. And then if you want a sub-route or dynamic route - make a folder for it and do the same thing.

yeah i have that

oh

Nah

and then another one thats like "content"

You just have another file

nono but i have projects folder

which has my page.tsx

Open your projects folder, and any sub-folders and screenshot it and send it here.

right now its just htis

Yeah that's wrong.

You should have it so that inside of projects, you have a page.tsx file - and then a folder called [projectId] - and then inside of that folder, a file called page.tsx as well

ohhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

And then you can take the project ID out of the query parameters in the props of the page component

hello can i ask one question for a sec?

Read that @Beans

Make a different thread smh

already done

Don't ask me here then

wating for someone to reply

yeah isee

Wait harder, you have literally been waiting 120 seconds...

That's still not right, but I'm just gonna say for you to look at the docs now.

fair enough, but it does seem to be working

Because

You only have one route manually defined. So if e.g. you then try and go to /projects/project2 - it will 404.

You can make one page handle multiple routes with dynamic routing, though.]

are you sure? works with two projects also

It's not gonna give you the right data, though.

Read the docs.

oh i trust you

yeah i see now

so wouldn't it be smarter just to call it [slug]?

You can put whatever you want inside of the brackets.

And then you can de-structure whatever you set it as from the page props

right

sorry again, but what i don't quite understand is, isnt [slug]/page.js just the same page file?

🤦‍♂️

nvm

i think i go tit

because its dynamic it routes to whichever it matches

If you have e.g. [slug]/page.tsx, and you went to the page with the "slug" as e.g. bread - it would run the same page.tsx code as if you put cheese - it's just down to you to fetch that slug/param, and then display something different on the page based on that param/slug.

Alright?

oh i see

Hold on one sec

no worries

Look at a past site I made for a client with Next

That'd be e.g. the parent route with the page.tsx in

And then each card just navigates to the nested dynamic route and passes the product ID as the "slug".

e.g. https://www.theflowerhouse-burwash.co.uk/product/prod_MSj0pEMPqhdHwI

And then I can get that in the page file props via de-structuring the props, and then I can fetch data with it and show the right content on the page.

Get it now?

Sorta, your slug is a variable you use to display different info depending on it

Is how I’m understanding it

I think this is the part I don’t understand

You’re just using one page.tsx but depending on the slug it displays different stuff?

Read the docs and examples.

I am, but I'm wondering if this is the best approach for what I'm trying to do

since each page is so varied, because it is a project page

but all good, i'll figure it out. thanks for the help