How to use with next js?

import React from "react";
import { HoverEffect1,HoverEffect2 } from 'hover-effects'
import Link from "next/link";

function Home() {
  return (
    <div>
      <div>
        Click
        <HoverEffect1>
          <Link href="/about">
            here
          </Link>
        </HoverEffect1>
        to read more
      </div>

      <p>
        <HoverEffect2>Welcome to Next.js!</HoverEffect2>
      </p>

      <div>
        Click
        <Link href="/about">
            <HoverEffect1>
                here
            </HoverEffect1>
        </Link>
        to read more
      </div>

    </div>
  );
}

export default Home;

How to use with react-router?

import React from "react";
import { HoverEffect1,HoverEffect2 } from 'hover-effects'
import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <div>
        Click
        <HoverEffect1>
          <Link to="/about">About</Link>
        </HoverEffect1>
        to read more
      </div>

      <p>
        <HoverEffect2>Welcome to Next.js!</HoverEffect2>
      </p>

      <div>
        Click
        <Link to="/about">
            <HoverEffect1>
                here
            </HoverEffect1>
        </Link>
        to read more
      </div>

    </div>
  );
}

export default Home;