CODEWITHSUNDEEP
next.jsnext.js13next-routernextjs-dynamic-routing
Aditya
Aditya

Reputation: 370

Dynamic routing in nextjs 13

I want to develop a route which catches multiple parameters in a single route in nextjs 13 for SEO.

One of the sample route is:

/how-to-decide-which-{profession}-to-choose-after-{degree}

I have checked the documentation of nextjs 13 and did not find anything. Is it possible to create such routes?

Upvotes: 0

Views: 1399

Answers (1)

Victor Gorban
Victor Gorban

Reputation: 1699

Nextjs separates slug segments by slash '/'. No way to automatically separate url segments by '-' or any other character.

Otherwise, if you decide to use '/' for separating your slug segments, I know 2 approaches:

  1. Catch-all path: app/posts/[...slug]/page.jsx catches the following sample url: /posts/how-to/decide-which/profession/to-choose-after/college. The params.slug parameter here will be: ['how-to','decide-which','profession','to-choose-after','college']

  2. Parse your post title by yourself. I would create a normal 'parameter' path with the following directory structure: app/posts/[post_slug]/page.jsx. With your example url, /posts/how-to-decide-which-profession-to-choose-after-degree, you will get params.post_slug as how-to-decide-which-profession-to-choose-after-degree. Then split the slug:

    let splittedSlug = params.post_slug.split('-');

    Then process it just as you want to.

You may want to check the docs here. This is all we can do. No way to automatically separate slug segments by any other character but slash '/'

Upvotes: 1

Related Questions