next에서 link 사용하기

react에서는 react router를 이용하여 link를 걸고 페이지를 이동을 하였다.

next에서는

import Link from 'next/link';를 작성하면 자체적으로 지원이된다.

 

형태는 아래처럼 사용을 한다.

            <div>
                <Link href="/"><a>노드버드</a></Link>
                <Link href="profile"><a>프로필</a></Link>
                <Link href="signup"><a>회원가입</a></Link>
            </div>

href 안에 이동하고 싶은 페이지의 이름

<a> 태그안에 사용하고 싶은 이름을 작성해주면

 

이렇게 링크가 걸리며 각 페이지로 이동을 할 수 있다.

 

 

또 next에는 react hor loader 기능이 알아서 적용되어있다.

서버를 키고 코드를 바꾸면 알아서 바꾸어 진다.