Next Js Dynamic URL Console Error [SOLVED]

 

your code (randomShorts(8) - generate 8 character random strings)

<Link

href = {`/shorts/${randomShorts(8)}`}

className = "flex py-2 px-4 text-sm hover:bg-gray-700 items-center rounded-md"

>

<img src="./sidebar/shorts.svg" />

<span className={`pl-6 ${isOpen ? 'block' : 'hidden'}`}>Shorts</span>

</Link >

Solution

<Link

href={{ pathname: '/shorts/[id]', query: { id: randomShorts(8) } }}

as="/shorts/[id]"

className="flex py-2 px-4 text-sm hover:bg-gray-700 items-center rounded-md"

>

<img src="./sidebar/shorts.svg" />

<span className={`pl-6 ${isOpen ? 'block' : 'hidden'}`}>Shorts</span>

</Link>