How to properly use getServerSideProps with dynamic routes?

[Jacker64]

Summary

I'm trying to fetch data on the server side using getServerSideProps in a dynamic route like [slug].js. The data doesn't show up correctly on first load. Am I missing something? Any suggestions or examples would help!

Additional information

No response

Example

No response

[nhhai71]

I ran into this too. If you're using getServerSideProps with a dynamic route like [slug].js, make sure the file is inside the pages directory (not the new app directory). Also, check that you're accessing context.params.slug properly. For me, the issue was that I forgot to return the data as props, so the page didn’t receive anything. Once I fixed that, it worked fine.

[ankur-ctrl-z]

Great point — especially about the pages/ vs app/ directory! 🚀
I’d also add that when using getServerSideProps, making sure the API URL is absolute (like https://api.example.com/...) is important — relative paths can break during server-side rendering.

Another common pitfall: if the API returns null or undefined, be sure to handle that with a notFound: true or a proper fallback UI to prevent rendering issues.

[ankur-ctrl-z]

Great point — especially about the pages/ vs app/ directory! 🚀
I’d also add that when using getServerSideProps, making sure the API URL is absolute (like https://api.example.com/...) is important — relative paths can break during server-side rendering.

Another common pitfall: if the API returns null or undefined, be sure to handle that with a notFound: true or a proper fallback UI to prevent rendering issues.