본문 바로가기
카테고리 없음

next Link a

by 멈추지않아 2022. 3. 25.

next에서는 a태그를 안쓰고 Link를 쓰는지 알아보겠습니다.

pages/_app.js

import Nav from "../components/nav";
export default function App({ Component, pageProps }) {
  return (
    <>
      <Nav />
      <Component {...pageProps} />
      <style jsx global>
        {`
          .click {
            color: aqua;
          }
        `}
      </style>
    </>
  );
}

components/nav.js

import Link from "next/link";

export default function nav() {
  return (
    <div>
      <a href="/" className="button">
        메롱
      </a>
      <a href="/ack" className="click">
        메롱1
      </a>
    </div>
  );
}

이렇게 하고 한번 동작 시켜 보겠습니다

이렇게 css는 제대로 동작이 됩니다 하지만 저렇게 로딩창이 생기는것을 볼수있습니다.

즉 여기서는 다시 페이지를 처음부터 로드 하는거라서 로딩창이 생기게 됩니다.

그럼 Link를 사용해보겠습니다

componets/nav.js

import Link from "next/link";

export default function nav() {
  return (
    <div>
      <Link href="/">
        <a className="button">메롱</a>
      </Link>

      <Link href="/ack/ack1">
        <a className="click">메롱1</a>
      </Link>
    </div>
  );
}
여기는

이렇게 로딩이 생기지 않습니다.  왜 그런가보면 여기서는 페이지르 로드한다기보다는 안에내용을 수정하는 개념이기때문에 로딩이 생기지 않습니다.

그런데 Link를쓰면서 주의할점!

components/nav.js

import Link from "next/link";

export default function nav() {
  return (
    <div>
      <Link className="button" href="/">
        <a>메롱</a>
      </Link>

      <Link href="/ack/ack1">
        <a className="click">메롱1</a>
      </Link>
    </div>
  );
}
변경 하시고 보시면

Link에 클래스 설정했는데 왜 안되지... 바로 Link에 클래스 이름 넣으면 적용이안되그 그아래 a태그에 클래스를 넣어야지 제대로 동작이 됩니다.

사용할때 이점을 주의하면서 사용하셔야됩니다 ㅎㅎ