the name u put between [] will be available in the params prop

so in /nation/[nation]/page.tsx

params.nation

also react components need to be Uppercase

This is where the confusion is. So the folder name is nation, but I need to rename the page.ts to [nation].ts?? I delete the folder named [nation] ?? Does it have to be a .js file or can I use .ts?

@Welsh Terrier .tsx not .ts, the x after ts makes it a typescript xml file which basically means you can use html/react elements

.ts is good for backend code because you’re not using any html elements in the backend

So I'm assuming I need the tsx because this is UI code and I might need html, and this is not the database or API layer. Besides, Next has combined server/client code into one app, so this is all jumbled up anyway. Seems like somebody tossed the rule book "out the winder."

no its easy

everything is serversided by default

"use client" directive puts it into client

rest is server only

If u have trouble to understand, i suggest reading the docs

LOL, "its easy" ... aaaaaaand '404' again... 😢

Server/client components are not the same as server files. Server components are server side which means they’re rendered on the server first. If you add “use server” in a server file it ensures the backend code is run on the server side, but it’s not the same as a server component.

wrong

"use server" is for server actions

I’m going to find this video that details how it works better

u mean rsc

that’s what I just said

which is default for tsx files

server actions are not rsc

I was referring to ts files

u can call server actions from the client which u can not with rsc

this is the difference

@Welsh Terrier I see you are new to react and nextjs right?

check this

I see where you’re getting confused. You’re not doing /[nation].tsx, which is ok but it’s better if you do /nation/[nation].tsx and then link to /nation/usa

But right now you’re linking to /usa as if its setup as /[nation].tsx in your file manager which you said it isn’t

https://youtu.be/5QP0mvrJkiY?si=TJacZUjTM8CWX4BT

This video is great and helped me when I first started learning nextjs. I personally hate reading docs and I’m a much better visual learner so I recommend this video/channel

Yes and no. I was a .net/SQL developer for years, now learning javascript, and it's like the wild west out here. VERY difficult to learn, tutorials are obsolete almost right away and the stuff I happen to need keeps getting deprecated and I have to start over again with something new. It's been ... excruciating... and the documentation is terrible, no offense intended.... Such as, I just find that <link> has an old version and a new version and Eff if I know which one I'm using or I need to use. Yet another rabbit hole I haven't yet visited. .... but I digress...
...
I'm also making the assumption that I really don't care at this point what is "server-side" or "client-side" if this doesn't even compile, right??? That's a performance thing later and waaaay over my head right now.

Just focus on using next/navigation package for everything, I agree it’s a bit confusing at first.

ima help you

did u do the things i told u?

Make sure your components are uppercase first

also send me a screenshot of your app/ structure

and tell me which route shows a 404

what route shows a 404?

Just link to /nation/usa in your button not /usa, problem solved.

Change the link and see if that works

u dont have a route named usa

your [nation].tsx is wrong

still wrong

is usa your dynamic id?

this is how it should look like ->
/nation/[id]/page.tsx

as described in the docs

u can further extend this using catch all segments

which automatically matches multiple dynamic routes

so at the end u can have everything as a dynamic route -> /usa/nyc/blablabla

This is how the href should look or the folder structure names?

folder structure

ignore the href

its not the issue

also,
your app/ folder is strictly for routing

yup

this will match everything under /nation/<id>

I thought the code in each page.tsx in each folder controls the UI for each folder???

page.tsx, layout.tsx and so on are conventions for routing only

so everything else doesnt belong in there

Ah. Progress!

good job, but i kindly tell u again that u should read the docs link i send above

it summarizes everything you will possibly need for dynamic routing

cause im pretty much repeating everything that is in the docs rn

This is where I get confused again. The docs for pages shows HTML in the page.ts file and doesn't mention NOT putting code in there.

its a tsx file

page.tsx

the only files that are important for you rn are page.tsx and layout.tsx, everything else that u have in app/, you should move out

this is the first important thing to do, to correctly setup your nextjs app

otherwise it will grow into more issues later

Move them 'out' to where?

to your root directory

->
components/
app/
fonts/

wait

wth

keep app in src

infact everything in src

src/app/
src/components/
public/

Next created a 'src' directory from Yarn, but for some reason it doesn't seem to be using it at all. It's only using the /app folder

move the public folder out of src

move everything from app into src/app/

move everything from app/ that is not page.tsx or layout.tsx into src/

public is under root dir

good

This is a little terrifying. like... I'll never get this to run again....

keep this structure ->
src/app/
src/components/
public/

like thata

web is the root folder

correct

now it looks clean

move the components and fonts folder out

into src/

they are currently in src/app/

this happens because your fonts folder is now in the parent folder

cant u use @ as the path

@ is the root path in this case

so @/fonts

I don't see any @ s??? what do I need to do?

i mean importing

import your GeistMonoVF.woff from @/fonts/GeistMonoVF.woff

this?

ill fix every issue u have

yes, but be gentle... What is anydesk?

remote desktop

i can basically control your mouse and keyboard

i helped out many people on this server with that

cause its quick and fast

otherwise i dont have that much time solve all your issues

How do you connect to me?

if u open anydesk u will see a code

u send me that and i connect to you, and you only give me mouse and keyboard permissions

1916302819

one sec

shitty anydesk is doing license errors rn

@Welsh Terrier i can connect now

there we go

fantastic!! thank you so much!!!

no problem

glad i could help

u can mark this thread as solved

? how

rightclick on my message where i told u to hop into anydesk

and go to apps -> mark solution

thanks ❤️

@gin @Welsh Terrier glad it works out this time but for the future please don't do this.

we want to avoid dealing with cases where a computer gets compromised after someone grants an internet stranger system access, there are way too many cases like that, you can look them up.

remember here we are all strangers, you should not trust me or anyone else here more than a random dude you see on the street.

you can use zoom or DM (both highly discouraged) if you want to, but please don't grant a stranger system access to your computer