Next.js execute onClick event before href link routing

Question

Context

I'm using Next.js 13. And I'm using apollo client to store some client side variables.

What i'm trying to do

I'm trying to execute the onClick function prior to navigating to the href location.

My Code

<Link
      href={`/session/${session.id}`}
      onClick={() => {            
        updateDialogVars({
          dialogOpen: ATTENDANCE_DIALOG,
        })
      }}
    >
    <div>
      stuff
    </div>
</Link>

updateDialogVars is a mutation and updates a reactive vars in apollo client.

Question

Is it possible to use Next.js Link component and execute the onClick event before routing takes place with the href? Is the only option to change Link to a div and use next router to push the route change after the onClick function executes?

Suppress

Answer 1

This is typically achieved with a button and router hook, not an anchor tag (link).

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async () => {
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(`/session/${session.id}`);
  }
 }

 return (
  <button onClick={onClick}>Label</button>
 )
}

You can also achieve a similar result with next/link.

import { useRouter } from "next/router"; // if you use pages dir
import { useRouter } from "next/navigation"; // if you use app dir
import Link from "next/link";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async (event) => {
  event.preventDefault();
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(event.target.href);
  }
 }

 return (
  <Link href={`/session/${session.id}`} onClick={onClick}>Label</Link>
 )
}

Palatine

I was hoping to take advantage of the Next.js Link prefetch the page in the background. but if this is the only way to do it i guess that's alright – Suppress

I updated the answer to use next/link – Palatine

If you're rocking the app directory make sure to change the useRouter import path to next/navigation. See the docs here: nextjs.org/docs/app/building-your-application/routing/… – Ursel

That's not semantic though, see this answer to the question, "Why are buttons discouraged from navigation?" – Mikimikihisa