Next.js Discord

Discord Forum

Using route with slug but id as an argument

tanmayk posted this in #help-forum
Open in Discord
Hi. I am totally new to nextjs & learning things on my own. I am trying to build a small app which lists down articles using API. Here are two APIs available.

/api/articles - Returns json response with articles with id, title.
/api/article/[ID] - Returns single article containing details for each field.

For now, I am able to list down articles I am getting using /api/articles API. This list is just a title with link. Next thing is to build a page for article itself. I want to have a url something like /article/my-article. The page file is created at app/article/[slug]/page.tsx. In this file, I am getting slug argument. But I want ID as an argument because if you see the API, I need ID to fetch article details.

Basically URL must be /article/my-article & I should be able to fetch article using ID.

How do I achieve this? Is this even possible? Or should I use the url /article/my-article-123 where I should extract id (123) & then use it?

4 Replies

European sprat
I'm confused about what you're trying to do
This should explain the various scenarios you need
Well, I am trying to have url as /article/my-article. But in actual page, I need ID parameter as it is required to fetch article details. I can't fetch article details using slug (my-article). I read that doc, but didn't understand how to achieve this. Sorry if this is silly question, I am very much new to next js or even react.