Next js에서는 a태그대신에 Link태그를 사용하자 !

안녕하세요 ! 

이번에는 Next JS에서는 Link태그에 대해서 ! 또한 단순히 a태그를 이용하면 안되는 이유에 대해서 알아보겠습니다 ! 

 

먼저 바로 단순히 a태그만 이용해서 구현해보겠습니다

 

 

a태그 이용하기

일단 간단히 a태그만 이용하면 저런식으로 경고문자가 나와줍니다!!! 

/ 이거말고 /about 이런식으로 이용하면 없어지긴하는데 next js에서 제공해주는 Link 태그를 사용합시다 !!! 

 

Link태그 이용하기

저런식으로 위에처럼 간단히 할 수 있습니다 !!! 

 

하지만 여기서 a태그를 왜 써야하지? 라는 의문이 있을 수 있습니다 !! 

그럼 한번 a태그를 빼볼까요??? 

 

이런식으로 잘 들어오는것을 확인 할 수 있습니다 !!! 

하지만 ! 저희가 저기 Link태그에 클래스명을 줘서 스타일을 적용하고 싶다면 ?? 

 

한번 Link태그에 클래스명을 줘보겠습니다

결과는 적용되지 않습니다 ㅜㅜ 그러면 어떻게 해야할까요?? 

바로 ! a태그를 넣어주는 것입니다 !! 

 

한번 Link태그안에 a태그를 넣고 클래스명을 줘볼까요? 

성공입니다 !!! 

 

 

결론 ! 

next js에서 a태그를 이용 할 때는 Link태그를 대신써주고 그 안에 a태그를 넣어서 클래스명을 넣으면서 사용하는것을 추천합니다 !!! 

또한 추후에 Link태그에 관해서는 더 깊게 알아보겠습니다 !! 오늘도 감사합니다 !