#Dynamic slug with multiple slugs

1 messages · Page 1 of 1 (latest)

brisk acorn
#

Now we have a folder [site] that holds the name of the website. That we need to get the correct data for the matching website, and then we have a folder [...slug] that we need to get the correct data for the current visited page.

Lets say our client has multiple locations and every location can have their own news items. That means that we could have a slug that would be '/rotterdam/news' and '/amsterdam/news' (they can name their page urls like this if they want) could even go a bith further with '/netherlands/amsterdam/news' etc.

This means that we would need '/amsterdam/news' as slug to fetch that current page their data. [...slug] returns a array, which is fine we can work with that for now. But now get the issue at the following moment.

Whenever you click on the detail page of that news item, the slug would become '/amsterdam/news/news-title-items-1 (the last part would be the name of the news item)
This means the slug becomes '/amsterdam/news/news-title-item-1', but since we are fetching the current page data, we cannot use the last part where we hold the news item's name.

Now we are kinda stuck because we don't really know how to solve this problem. '/amsterdam/news' should be the slug, 'news-title-item-1' should be another slug

I hope that i described the issue good enough, and hope that someone can help us how we can get a workaround for this. We are not able to create folder that holds a static name, because every client can name their pages whatever they want.

gray mirageBOT
#

Hi @brisk acorn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, you can use the concept of Dynamic Routes and Catch-all Segments in Next.js to solve your problem.

Dynamic Segments are used when you don't know the exact segment names ahead of time and want to create routes from dynamic data. A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug]. Dynamic Segments can be accessed from useRouter.

Catch-all Segments can be extended to catch all subsequent segments by adding an ellipsis inside the brackets [...folderName]. For example, pages/shop/[...slug].js will match /shop/clothes, but also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.

In your case, you can use a catch-all route to capture the entire path after the site name, including the news item's name. The catch-all route will return an array of path segments, which you can then manipulate as needed to fetch the correct data.

Here's an example of how you might structure your route:

pages/site/[...slug].js

In this file, you can access the slug array like this:

import { useRouter } from 'next/router'
 
export default function Page() {
 const router = useRouter()
 const slug = router.query.slug // This will be an array: ['amsterdam', 'news', 'news-title-item-1']
 
 // You can then manipulate the slug array as needed to fetch your data
}

In this example, slug will be an array containing each segment of the path. You can then use this array to fetch the correct data for the current page. If you need to exclude the last segment (the news item's name) when fetching the page data, you can simply remove the last element from the array.

Remember, this is just a starting point. You'll need to adjust this code to fit your specific data fetching needs.