💣 Improved next/link: Simplified API with automatic <a> | Next.js 13

🔪 왜 갑자기 에러..?

1. NavigationBar를 생성하여 페이지에 적용했다.

import Link from 'next/link';

export const NavigationBar = () => {
  return (
    <nav>
      <Link href={'/'}>
        <a>Home</a>
      </Link>
      <Link href={'/about'}>
        <a>About</a>
      </Link>
    </nav>
  );
};

2. 에러가 발생했다. 왜죠????
   

The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.
⇒ Next.js가 13버전을 릴리즈 하면서 Link에 a태그를 자식으로 추가할 필요가 없어졌다!

✨ next/link

next/link no longer requires manually adding <a> as a child.

This was added as an experimental option in 12.2 and is now the default. In Next.js 13, <Link> always renders an <a> and allows you to forward props to the underlying tag. For example:

⇒ Next.js 13에서 <Link>는 항상 <a>태그를 렌더링합니다.

import Link from 'next/link'

// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

If the child is <a> tag

만약 a태그를 Link의 자식으로 넣고 싶다면, legacyBehavior 속성을 추가해줍니다.

• legacyBehavior - Changes behavior so that child must be <a>. Defaults to false.
  ⇒ a태그가 자식으로 동작할 수 있도록 변경. 기본값은 false.

import Link from 'next/link'

function Legacy() {
  return (
    <Link href="/about" legacyBehavior>
      <a>About Us</a>
    </Link>
  )
}

export default Legacy

a태그로 감싸진 custom component 또는 functional component에도 legacyBehavior 속성을 넣어주어야 합니다.

If the child is a custom component that wraps an <a> tag

import Link from 'next/link'
import styled from 'styled-components'

// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
  color: red;
`

function NavLink({ href, name }) {
  return (
    <Link href={href} passHref legacyBehavior>
      <RedLink>{name}</RedLink>
    </Link>
  )
}

export default NavLink

If the child is a functional component

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

참고

• Next.js 13 - next/link
• Next.js - API Reference - next/link