How can I link to homepage when I get error : `Link` is defined multiple times

Developing with Prismic
,
#1

I'm trying to put a navigation link in my next.js index.js file which is my homepage but I can't use the Link from next.js because I'm using the other Link from Prismic prismic-reactjs. How can I make a link that goes to / which is my homepage? Prismic is so confusing.

here is my index.js

import Head from 'next/head';
import Layout, { siteTitle } from '../components/layout';
import styles from '../components/layout.module.css';
import utilStyles from '../styles/utils.module.css';

import Link from 'next/link';
import Date from '../components/date';
import { createClient } from '../prismicio';
import { RichText } from 'prismic-reactjs';
import { SliceZone } from '@prismicio/react';
import { components } from '../slices';
import { Link } from 'prismic-reactjs';




export async function getStaticProps({ previewData }) {

  const client = createClient({ previewData })

  const page = await client.getSingle('homepage')
  const nav = await client.getSingle('navigation')

 

  return {
    props: { page, nav}, // Will be passed to the page component as props
  }
}



export default function Home({page, nav}) {
  return (
    <Layout>
      <Head>
        <title>{siteTitle}</title>
      </Head>

      <nav className={styles.navmobile}>

        

        {nav.data.navlinks.map( (element) => (
          <a href={Link.url(element.pagelink)}>
          <RichText render={element.linktext} />
          </a>
         
          ))
         }
        </nav>
      <header className={styles.header}>

       

        <div>
        <img src={nav.data.navImage.url} alt={nav.data.navImage.alt} />
        </div>

        


        <nav className={styles.navigation}> 
       
         {/* <a href={Link.url(nav.data.navlinks[0].pagelink)}>
           <RichText render={nav.data.navlinks[0].linktext} />
           </a> */}

         {/* <a href={Link.url(nav.data.navlinks[1].pagelink)}>
           <RichText render={nav.data.navlinks[1].linktext} />
         </a>   */}
         {nav.data.navlinks.map( (element) => (
          <a href={Link.url(element.pagelink)}>
          <RichText render={element.linktext} />
          </a>
         
          ))
         }

          
        </nav>
        { console.log(nav)}
      </header>
     
      <div>
        
         <RichText render={page.data.homeText} />
          {console.log(page)}
          {/* this works */}
        
          
        
         
        
      </div>

    </Layout>
  );
}
#2

nevermind. I had to use:

<PrismicLink href="/">
    <p>HOME</p>
</PrismicLink>