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태그에 클래스를 넣어야지 제대로 동작이 됩니다.
사용할때 이점을 주의하면서 사용하셔야됩니다 ㅎㅎ