Hello everyone,

I'm currently working on a cart and coupon feature in my Next.js application. In my cart page, I have a link that redirects users to a separate coupon page where they can choose a coupon to apply. After selecting the coupon, the user is redirected back to the cart page.

Here's the relevant code for the cart page:

<CartLinks
  prefetch
  icon='/images/misc/discount.png'
  title='Apply Coupon'
  href='/cart/coupons'
  className='my-5 md:mb-3 md:text-sm'
/>

And for the coupon page:

const applyDiscount = useDiscountStore((state) => state.applyDiscount);
const router = useRouter();

const handleClick = avoidClickBomb(async () => {
  await applyDiscount(coupon);
  router.back();
});

return (
  <div
    onClick={handleClick}
    role='button'
    className='dino-white-card relative mb-6 mr-1 min-h-[9rem] !shadow'
  >
  {/* rest of the code */}
</div>
);

My issue is that, when using router.back() to go back to the cart page, the coupon page still remains in the browser history. Is there a way to remove the coupon page from the browser history after redirecting back to the cart page?

Any help would be appreciated.

Thank you!