#Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>

1 messages · Page 1 of 1 (latest)

maiden plinth
#

Found some old project, decided to update, and an error appears on the / page; Solutions on the official resource didn't help

import { IconName } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { GenericMeta } from 'components/GenericMeta'
import { NowPlayingCard } from 'components/NowPlayingCard'
import { Weather } from 'components/Weather'
import { Account, AccountData } from 'data/accounts'
import { MainLayout } from 'layouts/MainLayout'
import { useTheme } from 'next-themes'
import dynamic from 'next/dynamic'
import toast from 'react-hot-toast'
import { v4 as uuidv4 } from 'uuid'

const Time = dynamic(() => import('components/Time'), {
  ssr: false,
})

const SocialLink = ({ name, href, icon, copyEmail }: Account) => {
  return (
    <a
      aria-label={name}
      onClick={() => name === 'Email' && copyEmail()}
      className="cursor-pointer fill-current focus:outline-none transition duration-300 ease-in-out hover:text-indigo-900 dark:hover:text-indigo-200"
      href={href}
      rel="noopener noreferrer"
      target="_blank"
    >
      <FontAwesomeIcon size="1x" icon={icon ? icon : ['fab', name.toLowerCase() as IconName]} />
    </a>
  )
}

const Home = () => {
  const { theme } = useTheme()

  const copyEmail = () => {
    navigator.clipboard.writeText('email@gmail.com')
    theme === 'dark'
      ? toast.success('Copied email to clipboard!', {
          style: {
            background: '#333',
            color: '#fff',
          },
        })
      : toast.success('Copied email to clipboard!')
  }

  return (
    <>
      <GenericMeta
        title="title"
        description="description"
      />

      <MainLayout margin={false}>
        <h1 className="text-6xl font-bold">aksuikava</h1>
        <p className="text-lg text-gray-600 dark:text-gray-400 max-w-sm mt-2">
          text <span className="font-semibold">text-semibold</span> text.
        </p>
        <div className="grid grid-flow-col w-48 mt-3 text-lg">
          {AccountData.map((account) => (
            <SocialLink
              key={uuidv4()}
              name={account.name}
              href={account.href}
              icon={account.icon}
              copyEmail={copyEmail}
            />
          ))}
        </div>
        <div className="grid my-8 gap-2">
          <Time />
          <Weather />
        </div>
        <div>
          <NowPlayingCard />
        </div>
      </MainLayout>
    </>
  )
}

export default Home

⨯ node_modules\next\dist\client\link.js (274:22) @ LinkComponent
 ⨯ Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
    at LinkComponent (webpack-internal:///./node_modules/next/dist/client/link.js:269:23)
page: '/'
null

Help me understand what the problem isPaimonNomming

mortal islandBOT
#

Hi @maiden plinth. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you're seeing is due to a change in the behavior of the Link component in Next.js 13. Starting with Next.js 13, Link renders as an a tag, so attempting to use a as a child is invalid.

In your SocialLink component, you're using an a tag as a child of the Link component. To fix this issue, you can either remove the a tag or use the legacyBehavior prop with the Link component.

Here's an example of how to use legacyBehavior from the Next.js documentation:

import Link from 'next/link'
 
// `onClick`, `href`, and `ref` need to be passed to the DOM element
// for proper handling
const MyButton = React.forwardRef(({ onClick, href }, ref) => {
 return (
 <a href={href} onClick={onClick} ref={ref}>
 Click Me
 </a>
 )
})
 
function Home() {
 return (
 <Link href="/about" passHref legacyBehavior>
 <MyButton />
 </Link>
 )
}
 
export default Home

In this example, MyButton is a functional component that's being used as a child of Link. The passHref and legacyBehavior props are being used with Link to ensure that the href, onClick, and ref props are passed to the a tag in MyButton.

You can apply a similar approach to your SocialLink component.

#

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: