How to get NextJS to pickup multiple dynamic routes?

Question

I'm using a dynamic page creation through NextJS called

[video].tsx

The dynamic pages are created as:

 const Video = (props) => {
 const router = useRouter()
 const { video } = router.query
 const videoData = GeneralVideo.find((d) => d.link === video)

The linking is setup as:

<Link  href={'/videos/' + item.link} passHref={true}>

Dynamic pages are then successfully created with URLs such as:

http://localhost:3000/videos/100004_SF

and the [video].tsx page is correctly picked up.

Now , I want to set up a second set of dynamic pages as

[early].tsx

Dynamic pages are then created as:

 const Early = (props) => {
 const router = useRouter()
 const { early } = router.query
 const videoData = GeneralVideo.find((d) => d.linkEarly === early)

The linking is setup as:

 <Link href={'/videos/' + item.linkEarly} passHref={true}>

Now, dynamic links are successfully generated as

http://localhost:3000/videos/100159_SF_early

But the [early].tsx component is not picked up correctly delivering an empty page.

Where is my mistake in the setup?

Answer 1

Lets say you create two dynamic routes, /videos/[video] and /video/[early], you may think that these two represent different routes because the dynamic parameter being used has different names, but for NextJS, its the same route. So there are two ways of going about it:

---

Method 1

Change your dynamic routes to /videos/normal/[link] and /videos/early/[link]

---

Method 2

In your original route ie /videos/[link], pass different url parameters, those that come after a question mark , for the two categories of videos and then use it inside your router query to render components accordingly.

---