[Next.js] 페이지 간 이동하기

 

이 글은 Next.js의 공식 튜토리얼 문서를 참고하여 작성한 글입니다.

 

---

 

이전 글에서 Next.js프로젝트를 만들고 실행을 시켰다면 다음과 같은 화면을 볼 수 있다.

 

 

이제 이 페이지를 조금 바꿔보자.

pages/index.js에서 <h1>태그 안에 있는 "Welcome to"를 "Learn"으로 바꾸고 저장한다.

 

 

페이지간 이동하기

현재 우리가 만든 애플리케이션에는 한 개의 페이지 밖에 없지만 웹 애플리케이션에는 보통 많은 페이지들이 존재한다.

이제부터 어떻게 더 많은 페이지들을 해당 애플리케이션에 추가시키는지 알아보자.

 

해당 글에서 배울 것들

• 파일 시스템 라우팅을 이용한 새로운 페이지 생성
• 페이지 간에 클라이언트 사이드 네비게이션을 가능하게 할 Link컴포넌트의 사용법 
• 코드 스플릿팅과 프리페칭의 사용법

 

Next.js에서의 페이지

Next.js에서의 페이지는, pages디렉토리 안에 있는 파일에서 export한 React 컴포넌트이다.

각 페이지들은 기본적으로 그들의 파일명과 연관된다. 예를 들어 pages/index.js는 /라우트이다. pages/posts/first-post.js는 /posts/first-post와 연결된다.

우리 애플리케이션에는 이미 pages/index.js파일이 있다. 이제 pages/posts/first-post.js파일을 만들어보자.

 

페이지는 pages디렉토리 안에 만들어야 한다. pages디렉토리 안에 posts디렉토리를 하나 만들어주자.

그리고 posts디렉토리 안에 first-post.js파일을 만든다. first-post.js의 내용은 다음과 같다.

 

export default function FirstPost() {
  return <h1>첫 포스트!</h1>
}

 

컴포넌트명은 아무것이나 될 수 있으나 export할 때 default를 붙여주어야 한다.

이제 서버를 실행시키고 localhost:3000/posts/first-post를 방문해보자. 그러면 다음과 같은 화면을 보게 될 것이다.

 

 

여기까지가 Next.js에서 다른 페이지를 생성하는 방법이다. 간단하게 pages디렉토리안에 URL경로가 될 파일을 생성해주기만 하면 된다. 이는 HTML과 PHP를 사용하여 개발하는 것과 비슷한 방법이다. 대신에 HTML을 React 컴포넌트에서 JSX를 사용하여 작성하는 것이 다르다.

 

이제는 새로운 페이지로의 링크를 추가하고 이동해보자.

 

Link 컴포넌트

웹사이트에서 페이지를 연결하고 이동할 때는 <a>태그를 사용한다.

Next.js에서는 Link컴포넌트가 <a>태그를 래핑하여 사용된다. next/link의 <Link>컴포넌트는 애플리케이션에서 페이지 간에 클라이언트 사이드 네비게이션이 가능하게 해준다.

 

먼저, pages/index.js를 열고 next/link에서 Link컴포넌트를 import해주자.

 

import Link from "next/link";

 

그리고 h1태그를 다음과 같이 바꿔준다.

 

<h1 className="title">
  Read{' '}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

 

{' '}는 공백 문자를 추가해준다.

 

다음으로 pages/posts/first-posts.js를 열어 다음과 같이 코드를 변경해주자.

 

import Link from "next/link";

export default function FirstPost() {
  return (
    <>
      <h1>첫 포스트!</h1>
      <h2>
        <Link href="/">
          <a>홈으로 돌아가기</a>
        </Link>
      </h2>
    </>
  )
}

 

코드에서 보이는대로, Link컴포넌트는 <a>태그와 사용법이 비슷하다. <a href="...">대신에 <Link href="...">로 사용하고, Link컴포넌트 안에 <a>태그를 넣어주는 것이 다른 점이다.

 

또한 주의해야할 점이 있다.

• Next.js 앱 외부의 페이지로 링크를 걸 때는, Link없이 a태그만을 사용한다.
• className과 같은 속성을 추가할 때는 Link태그에 추가하지 않고 a태그에 추가해야 한다.

 

그럼 애플리케이션에서 확인해보자.

 

 

this page가 first-post로의 링크가 되었고, 이를 클릭하면 first-post로 페이지가 넘어간다.

 

 

Client-Side Navigation

Link컴포넌트는 Next.js 앱에서 두 페이지 간 클라이언트 사이드 네비게이션을 가능하게 해준다.

클라이언트 사이드 네비게이션이 의미하는 것은 기존의 브라우저가 사용하는 기본 네비게이션 기능보다 빠른 자바스크립트를 사용하여 페이지를 변경하는 것을 말한다.

 

이게 무슨 말인지는  간단하게 확인이 가능하다.

• 개발자 도구를 열고 html의 background속성을 hotpink로 바꾼다.
• 두 페이지에서 만든 링크를 클릭해본다.
• hotpink로 설정한 배경 색상이 페이지가 이동해도 지속되는 것을 볼 수 있다.

 

이것은 브라우저가 전체 페이지를 로딩하지 않고 클라이언트 사이드 네비게이션이 동작하고 있다는 말이다.

만약 Link컴포넌트를 사용하지 않고 기존의 방식대로 a태그를 사용했다면 페이지를 이동할 때 브라우저가 전체를 새로고침하기 때문에 배경화면이 흰색으로 초기화 될 것이다.

 

Code splitting and prefetching

Next.js는 자동으로 코드 스플릿팅을 해준다. 따라서 각 페이지는 정말 필요한 자원들만 로드하게 된다. 이것은 홈페이지가 렌더링될 때, 다른 페이지의 코드들은 로드되지 않는 것을 말한다.

 

이러한 특징은 만일 페이지가 수백개가 있다고 해도 홈페이지의 빠른 로딩 속도를 보장한다.

 

내가 요청한 페이지의 코드만 로딩이 된다는 것은 각 페이지가 독립적이라는 말도 된다. 만약 한 페이지에서 에러가 발생했다고 해도, 애플리케이션의 다른 페이지들은 계속 동작할 수 있다.

 

게다가, Next.js는 자동으로 백그라운드에서 링크된 페이지의 코드를 프리페치하기 때문에 Link컴포넌트를 사용할 때마다 브라우저의 viewport에 나타나게 된다. 링크를 클릭하면 링크된 페이지에 대한 코드가 이미 백그라운드에 로드되어 페이지 전환이 거의 바로 이루어지게 되는 것이다.

 

요약

Next.js는 코드 스플릿팅, 클라이언트 사이드 네비게이션, 프리페칭을 통해 우리의 애플리케이션을 자동으로 최적화 해준다.

pages폴더 안에 파일을 만드는 것으로 라우트 시스템을 편하게 구현할 수 있고, Link컴포넌트를 사용하여 간단하게 페이지 전환을 할 수 있다.