(Next.js) Link를 사용하여 페이지 이동하기

Next.js

 

Next.js 로 Link를 이용하여 페이지 이동을 구현해보겠습니다.

 

import Link from 'next/link';
import React from 'react';

function Header() {
  return (
    <header>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/profile">
        <a>Profile</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
    </header>
  );
}

export default Header;

 

Header 컴포넌트를 만들고 그 안에 next에서 제공해주는 Link에 href를 이용하여 페이지 이동을 해줄 수 있습니다.

참고로 페이지가 될 컴포넌트들은 components 폴더가 아닌 pages 폴더에 만들어주시면 됩니다.

그러면 next에서 자동적으로 pages 내부의 파일들을 찾아서 이동시켜줍니다.

 

---

http://localhost:3000/

Home 화면

---

http://localhost:3000/profile

Profile 화면

---

http://localhost:3000/about

About 화면

---

잘 작동합네요 리액트 라우터의 기능처럼 뒤에 /profile /about 이런식으로 이동됩니다.

pages 폴더에 다시 새로운 디렉토리를 만들고 안에 프로필 파일을 넣어둬도 Link href 값을

"/directory/profile" 이렇게 해두면 페이지가 잘 이동됩니다.