Next.js Discord

Discord Forum

Issues with Next Dynamic Routing and Drizzle / Turso

Answered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Hello!
I´m trying to make a page to show details of a specific product, getting the data from Server Side Props and then selecting the data from the db depending on the ID that the page recieves.

Issue is, it doesn´t work somehow. See, everytime, no matter what, I get redirected to a 404.
I already tried "product/[id]/page.tsx" and even "product/[id].tsx" but none of this work
There´s no syntax errors or any errors at all rather than the 404. Hope someone can help me 🙂

https://github.com/yoboywhat/routing/blob/main/components/product/%5Bid%5D.tsx
Answered by Anay-208
You're using page router, hence the file paths were wrong i.e. for routes, its supposed to be @/product/[pathname].ts|js
Ref: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

This was the solution to the issue.
View full answer

141 Replies

joulev
do NOT repost the question
@joulev do NOT repost the question
Masai LionOP
wait I reposted?
bro cmonnnn
sorry
sorry @joulev I’ve been real busy and forgetting everything I do 😭
I forgot to update code but it’s like you mentioned @Anay-208
and well…
Anay-208
also, You don't seem to be exporting a default function
@Anay-208 also, You don't seem to be exporting a `default` function
Masai LionOP
I modified that on a new version of the code
I will see if I can send it
Could you give me a sec?
I will update the GitHub
Anay-208
git add .
git commit -m "update code"
git push origin main
@Anay-208 bash git add . git commit -m "update code" git push origin main
Masai LionOP
I had my laptop closed lol 😢
Let me open rq
@Anay-208
Did the commit
It’s now updated
Anay-208
can you try removing the getServerSideProps, and use dummy data for product?
because If I'm right, getServerSideProps is depreciated
@Anay-208 can you try removing the `getServerSideProps`, and use dummy data for product?
Masai LionOP
I did and doesn’t work as well 😦
@Anay-208 because If I'm right, `getServerSideProps` is depreciated
Masai LionOP
Dayum… then that would be my alternative or the best approach :meow_stare:
Anay-208
page.tsx, to be a server component where you fetch product data, and create a new file like client.tsx, where you can pass the data
So basically making a small api inside my app
that’s smart
@Anay-208 page.tsx, to be a server component where you fetch product data, and create a new file like `client.tsx`, where you can pass the data
Masai LionOP
I will try it in a while cuz it’s like 3 am but if I there’s something wrong can I ping you or something ?
Anay-208
Sure, you can also ping me on any new help-forums, or any other issues!
@Anay-208 Sure, you can also ping me on any new help-forums, or any other issues!
Masai LionOP
Oh thanks! Very much appreciated
I will keep you updated with any… updates…?
lol
Anyways thanks again
Anay-208
Alright, I'm waiting
@Anay-208 Alright, I'm waiting
Masai LionOP
question
would it be better to do normal fetch? or to use getStaticProps?
although the page isn’t static at all
ye I can’t as it will pre-render on build
Anay-208
normal fetch imo
@Anay-208 normal fetch imo
Masai LionOP
Server side props are really deprecated?
I’ve always preferred using it rather than fetching
Anay-208
If I'm right, its only available in page router(not 100% sure)
@Anay-208 If I'm right, its only available in page router(not 100% sure)
Masai LionOP
:meow_stare: oh, but when I put it inside a page router it gives me a 404
and when I put it inside app, it says I can’t use getServerSideProps inside app/
I think it would be 100% correct to use fetch then
Anay-208
yup
@Anay-208 yup
Masai LionOP
okay so basically im doing a small api that will trigger when onClick function is triggered and then send the data from API to the product page
Masai LionOP
@Anay-208 basically, it still shows 404 lmao
Masai LionOP
https://github.com/yoboywhat/routing/tree/main
i updated the files and added the components that make this try to work
i have no idea what to do now
idk if using a cms would work
something like strapi
Anay-208
I’ll see when i get free
@Anay-208 I’ll see when i get free
Masai LionOP
ty
BRO USING STYLED ROUTES
Masai LionOP
Yes
Anay-208
RENAME it to route.ts immediatley
you may get banned otherwise by mods
not tsx, extension should be ts
@Masai Lion
@Anay-208 RENAME it to route.ts immediatley
Masai LionOP
😮
@Anay-208 not tsx, extension should be ts
Masai LionOP
oh dayum
maybe that’s why it ain’t working
Anay-208
Once the issue is resolved, either delete the repo or force push route.ts, removing the prev commits of using route.tsx
Would you recommend me using Strapi instead?
Anay-208
I’ve never used strapi
Masai LionOP
Or should I continue using normal fetch and my SQLite
@Masai Lion something like strapi
Anay-208
In fact, I heard about it today only with this message
@Anay-208 I’ve never used strapi
Masai LionOP
Well uhh it’s basically a CMS
and uses SQLite
Anay-208
Ya I researched about it
Is the issue resolved?
@Anay-208 Is the issue resolved?
Masai LionOP
Working on it
@Anay-208 Is the issue resolved?
Masai LionOP
No
Still getting funny 404 page
Anay-208
…
First update the repo
Then comment all the code and return hello world
@Anay-208 First update the repo
Masai LionOP
it isn’t the official one, these are just snippets or whole small codes
@Anay-208 Then comment all the code and return hello world
Masai LionOP
just the api I’m doing
@Anay-208 Then comment all the code and return hello world
Masai LionOP
I did that and nothing prints
And I get tons of Error: fetch failed
After I implemented strapi
Lol
@Anay-208 Wait so it’s not the official?
Masai LionOP
It is, but not the whole code
Like other components and some stuff not there
Anay-208
Would you mind creating a min repro repo, including package.json
@Anay-208 Would you mind creating a min repro repo, including package.json
Masai LionOP
like the whole thing?
Anay-208
Not the whole thing, like create a fresh app, and try to reproduce the error
because it works on my device
Masai LionOP
Well I’m using NextJs 4.1 not sure if that’s the issue lmao :sunglasses_1:
Sure let me create a fresh app
And try replicate
Anay-208
@Masai Lion Are you using page router?
Although it isn’t inside app
Anay-208
You're basically mixing app + pages router
thats why you get this error
Masai LionOP
it’s 

app
| files

components
| files

pages
| files
@Anay-208 You're basically mixing app + pages router
Masai LionOP
:meow_stare:
Anay-208
Wait, let me clarify. My question is when you were creating a nextjs app, did you select: "would you like to use app router(recommended)" as yes or no?
idk why
maybe I should make everything again
:meow_stare:
Anay-208
Do you know the difference between page & app router?
@Anay-208 Do you know the difference between page & app router?
Masai LionOP
Well app is server centric and pages client side
should I make a whole new next project and just pass my codes?
Anay-208
The only difference I know is pages router is slower and has CSR.
Masai LionOP
lmao Im considering that
Anay-208
If I were you, I'd make a whole new project
@Anay-208 If I were you, I'd make a whole new project
Masai LionOP
And just pass the code I need to the new one
Anay-208
If you want to continue with page router, check this:
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes
If you're migrating to app router, then this: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Masai LionOP
btw… Im not sure if I should go for Turso DB + Drizzle ORM or go for Strapi (Headless CMS) :lolsob:
@Anay-208 If you're migrating to app router, then this: https://nextjs.org/docs/app/building-your-application/routing/defining-routes
Masai LionOP
I think I will take this, its a whole mess not having app router
Anay-208
Ok, so let me share the summary
Masai LionOP
Should I use ESLint?
I don’t think so
Anay-208
Yes
I use it
Masai LionOP
:meow_stare:
src directory?
Anay-208
yes
Masai LionOP
I don’t want to customize the import alias so Nuh uh
Anay-208
yup, I do the same
Anay-208
You're using page router, hence the file paths were wrong i.e. for routes, its supposed to be @/product/[pathname].ts|js
Ref: https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

This was the solution to the issue.
Answer
Anay-208
Since you're planning to migrate to app router in the future, I'll help you further if you face any issues there. Feel free to ping me after creating a #help-forum !
@Anay-208 Mark this message as a solution
Masai LionOP
U farming points don’t ya
Anyways
Thanks!
:sunglasses_1:
Anay-208
No, the forum has the tag "Answered"
makes it easier for other people to identify marked answers