CODEWITHSUNDEEP
node.jsreactjsnext.js
anlijudavid
anlijudavid

Reputation: 539

How to create dynamic url with hyphens in Next.js?

I need to create a dynamic path in Next.js like 'courses-demo-[dynamic_name]'. I created nested folders like this:

This folder structure just support path as /courses-demo/a, /courses-demo/b/c, etc. But I want to have a URL like this: /courses-demo-photograpy, courses-demo-web-development, and another many dynamic names. How could I do this?

Upvotes: 0

Views: 1549

Answers (1)

Mike
Mike

Reputation: 24363

You could just make a file called [slug].js in your /pages directory and use the javascript to extract the actual slug to fetch the content. Since both the static and dynamic parts can have hyphens, you can't just split on hyphens, so you could do something like this to get the appropriate static and dynamic part, something like this:

// You will obviously get this from the URL, not hard-coded like here
let params = {
  slug: 'courses-demo-photography'
}

// List all of your possible categories
let categories = [
  'courses-demo',
  'courses-paid'
];

let category = categories.reduce(cat => params.slug.startsWith(cat) && cat)
let dynamicPart = params.slug.substring(category.length + 1)
console.log(category)
console.log(dynamicPart)

Upvotes: 2

Related Questions