Next.js Discord

Discord Forum

Passing data to a dynamic route

Answered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
Hey Next.js discord :)

I am currently building a website where we fetch articles from a custom CMS. This CMS doesn't generate slugs, only IDs in the form of GUIDs. On our website we want our articles to have the URL-sturcture /news/article-title, so I generate slugs for the articles based on their title.

The issue I'm facing is figuring out a way to know what article to fetch when I'm on the dynamic route for news/[articleSlug]. I'd rather not have the ID in the URL, but to my understanding that is the only way to pass data to a dynamic route/page in NextJS.

I am using app router on v14.

RIght now I'm looking into the possiblity of creating a map of IDs and slugs and save it locally or on server, and then use that as a lookup to get the correct ID for any given slug on my dynamic route. Just wanted to check if anyone here have encountered anything similar and might have some better solutions, feeling like mine is kinda janky (and I'm not 100 % sure it would even work lol).
Answered by Standard Chinchilla
I found a workaround, created a map in a separate file that I designated as a 'use server' file where i store a map of the fetched articles with their ID and generated slug, so I can perform a lookup on that map when I land on a dynamic route with a given slug. Seems to do the job, although I suspect it isn't the best solution to my problem. Marking as solved tho :)
View full answer

15 Replies

Northeast Congo Lion
1) create api endpoint on ur cms which will serve the slugs of news article:
[
'article_name_1',
'article_name_2'
]
you are correct, either use ID or Slug. Slug is better since url is more readable and favoured by SEO (i think)
inside ur folder under app
you would have:

app/news/[slug]
you can also use [...slug] to catch multiple nested routes, but since ur strucutre is 2 levels, [slug] will do.
Standard ChinchillaOP
The issue is the CMS (which I don't have design/code control over) doesn't generate or have slugs for their articles, only GUIDs. So I can't use the slug (that I generate myself after fetch) to look up an article, I would have to use the ID.

When you say "on ur cms", do you mean the CMS that is serving the articles or my NextJS app (the website I'm building)?
Northeast Congo Lion
The cms where you edit the articles
I just assumed you could make custom controller/route
apologies.
unfortunately, to pre-render dynamic paths you need to know the URLs
Standard ChinchillaOP
I don't necessarily need to pre-render the pages, I just need to somehow figure out the GUID of the article based on the slug on the route.

Let's say an article has a title of "Two Dozen Eggs", with a GUID of e73d2af5. My dynamic route will have the slug two-dozen-eggs, and based on this I need a way to retrieve the GUID so I can fetch the proper article from the CMS to display on the page.
Standard ChinchillaOP
I found a workaround, created a map in a separate file that I designated as a 'use server' file where i store a map of the fetched articles with their ID and generated slug, so I can perform a lookup on that map when I land on a dynamic route with a given slug. Seems to do the job, although I suspect it isn't the best solution to my problem. Marking as solved tho :)
Answer