step1과 이어집니다.
Pages in Next.js
Next.js 디렉터리 구조에는 pages 라는 디렉토리가 있는데 이곳에는 리엑트 컴포턴트로 이루어진 페이지들이 있습니다.
pages 디렉토리에 file name이 라우터의 path가 됩니다.
예를들어
pages/index.js->/로 라우팅 됨pages/posts/first-post.js->/posts/first-post로 라우팅 됨
새로운 페이지 만들어 보자
pages 디렉토리 안에 posts 디렉토리를 만들고 first-post.js를 만들고 다음과 같이 코드를 작성해 보자.
export default function FirstPost() {
return (
<h1>
First Post
</h1>
)
}그리고 http://localhost:3000/posts/first-post 로 접속해 보자
우리가 pages 파일안에 쓴 이름대로 라우팅이 되어 내용이 표시되는 것을 확인 할 수있다.
페이지를 이동시켜 보자
보통 <a> 태그를 사용하여 페이지를 이동시킨다. Next에서는 <Link> 를 사용하여 컴포넌트를 이동시킨다.
import Link from 'next/link'다음 코드를 통해 Link를 가져온다.
<h1 className="title">
Learn <a href="https://nextjs.org">Next.js!</a>
</h1>다음 예제 코드를
<h1 className="title">
Read{' '}
<Link href="/posts/first-post">
<a>this page!</a>
</Link>
</h1>이렇게 변경시켜 보자
그후 this page!를 클릭하여 화면이 이동하는지 확인해 보자
first-post.js 도 이렇게 코드를 수정해보자
import Link from 'next/link'
export default function FirstPost() {
return (
<>
<h1>First Post</h1>
<h2>
<Link href="/">
<a>Back to home</a>
</Link>
</h2>
</>
)
}그 후에 홈화면과 이동이 잘 되는지 확인해 보자
Navigate Between Pages
Link 컴포넌트는 client-side navigation가 가능합니다 두가지 페이지 사이에서. 이것을 간단히 이해하기 위해 브라우저 개발자 도구를 통해 확인해 봅시다.
- 브라우저 개발자 도구를 연다.
- html 태그에 바탕색을 입혀보고 화면 이동을 해본다.
확인하면 같은 바탕색을 갖고있음을 확인 할 수 있습니다.
만약 a 태그를 사용하면 브라우저가 새로고침 되므로 배경색이 유지되지 않겠죠.
Code splitting and prefetching
Next.js 는 페이지의 필요한 부분만 로딩해 옵니다. 필요하지 않은 다른 페이지들은 로드해 오지 않습니다.
수백 수천개의 페이지가 있어도 해당하는 페이지만 로드해오기 때문에 걱정하지 않아도 됩니다.
또 오류난 페이지가 있어도 다른 페이지에는 영향을 주지 않습니다.
또한 Next.js의 프로덕션 빌드에서 Link가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 링크 된 페이지의 코드를 자동으로 준비합니다. 링크를 클릭하면 대상 페이지의 코드가 백그라운드에서 이미 로드되고 페이지 전환이 거의 즉시 수행됩니다. 그러므로 좋은 퍼포먼스를 낼 수 있게 됩니다.
