Javascript in NextJS – How To Structure?

Hoping someone can help! I’m building a nextJS website and wanting to incorporate some javascript. I want this javascript to run each time a user navigates to a separate page.

Let’s say I want to log something to the console each time.

I’ve written a script here using React. I believe I have to use useEffect?

import React, { useEffect } from 'react'

const Alerter = () => {
  useEffect(() => {
    console.log("Page Rendered !!");
  }, [])
}

export default Alerter

Then, do I have to import that on each individual page.js, and then also run it? Such as the below

import buttonStyles from '../components/global/button.module.css'

//Scripts
import Alerter from '../scripts/runAlert'

export default function LoginPage() {
  return (
    <div>
      <form>
        <button className={buttonStyles.button} formAction={login}>Log in</button>
      </form>
      <Alerter />
    </div>
  )
}

Is there a cleaner way?