path.startsWith is not a function in next js

Question

Why it is showing me path startsWith error. I'm trying to send the amount to the path

 import { useRouter } from 'next/navigation'

      const checkoutHandler = ()=>{
        router.push({
          pathname: '/checkout/[amount]',
          query: { amount: customAmount},
        })
      }


    <div className="continue-btn" onClick={()=> checkoutHandler()}>
       Continue
     </div>

Answer 1

If you are using next/navigation you can't pass query params like this. Just use strings or template literals to add query params in next/navigation.

Check This URL : useRouter from next/navigation

Eg: In your code router.push(`/checkout/${[amount]}?amount=${customAmount}`)

N.B : I am not sure about your [amount] as you haven't mentioned whether it's from a dynamic route segment or something else.