[NextJS] NextJS에서 Link Component 사용하기

https://nomadcoders.co/nextjs-fundamentals/lectures/3440

All Courses – 노마드 코더 Nomad Coders

NextJS에서는 페이지간 이동에 a태그를 권장하지 않는다.

왜냐하면 a태그는 페이지 전체를 불러오기 때문에 속도와 최적화의 문제로 Link 컴포넌트를 권장하기 때문이다.

(React에서 React Router Link)를 사용하는 것과 비슷하다. 

Link 컴포넌트를 사용하기 위해 우선 임포트를 하고

import Link from "next/link";

수업에서 나온대로 링크 컴포넌트로 a태그를 감싸주면..!

import Link from "next/link";

import { useRouter } from "next/router";

 

export default function NavBar() {

    const router = useRouter();

    return (

        <nav>

            <Link href="/">

                <a>Home</a>

            </Link>

 

            <Link href="/about">

                <a >About</a>

            </Link>

        </nav>

    );

}

짜잔 오류가 난다

왜 이런고.. 강의 댓글과 이유를 찾아보니 NextJS가 13버전으로 올라가고 난 후에 생긴 에러였다.

a태그를 지워주거나 Link 컴포넌트 안에 legacyBehavior를 추가해주어야 한다고 한다.

https://nextjs.org/docs/messages/invalid-new-link-with-extra-ancho

import Link from "next/link";

import { useRouter } from "next/router";

export default function NavBar() {

    const router = useRouter();

    return (

        <nav>

            <Link href="/">Home</Link>

            <Link href="/about">About</Link>

        </nav>

    );

}

잘된다.

invalid-new-link-with-extra-anchor | Next.js