공부

[Next.js] 2. Navigate Between Pages

hahihuree 2021. 10. 22. 11:13

 

Next.js에서 페이지는 pages 디렉토리에서 export된 리액트 컴포넌트이다.

 

Next.js에서 새로운 페이지를 만들기 위해서는 pages 디렉토리 안에 새로운 페이지 파일을 생성해야한다.

  • pages/index.js 는 '/' 라우트와 관련있다.
  • pages/posts/first-post.js는 'post/first-post' 라우트와 관련있다.

 

새 페이지 만들기

pages 디렉토리 안에 posts라는 디렉토리를 만들고, first-post.js라는 파일을 만들어 아래 내용을 작성한다.

export default function FirstPost() {
  return <h1>First Post</h1>
}

컴포넌트는 어떤 이름으로 해도 상관 없으나, 반드시 default로 export 해야한다.

 

이처럼 pages 디렉토리 아래에 JS파일을 만들면 새로운 페이지가 생성되고, 파일의 경로가 URL 경로가 된다.

 

어느정도 HTML과 PHP파일을 이용해 웹사이트를 만드는 것과 비슷하지만, HTML을 작성하는 대신에 JSX를 작성하고 리액트 컴포넌트를 사용한다.

 

페이지 연결하기

웹사이트에서 페이지를 연결할 때, <a> HTML 태그를 사용한다.

 

Next.js에서는 next/link의 Link 컴포넌트를 사용한다. Link 컴포넌트는 한 어플리케이션에서 다른 페이지로의 client-side navigation을 가능하게 한다.

 

사용법

1. Link 컴포넌트를 import한다.

import Link from 'next/link'

 

2. <a> 태그 대신에 <Link>컴포넌트를 사용한다.

// before
<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

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

 

{' '} 빈 공간을 추가해야 텍스트 사이에 띄어쓰기가 된다.

 

이처럼 Link 컴포넌트는 <a> 태그를 사용하는 것과 유사하지만, <a href= " ... "> 대신에 <Link href=" ... ">를 사용하고 <a>태그를 그 안에 넣는다.

 

 

Client-Side Navigation

Link 컴포넌트는 같은 Next.js 앱에서 두 페이지간의 Client-Side Navigation을 가능하게 한다.

 

Client-Side Navigation이란 자바스크립트를 이용해 페이지 전환이 발생하는 것을 뜻하며, 이는 브라우저가 하는 기본 탐색보다 빠르다.

 

확인하기:

  • 개발자 도구를 열어 <html>의 background CSS를 yellow로 바꾼다.
  • 두개의 페이지를 왔다갔다 해본다.
  • 페이지가 바뀔때에도 background의 yellow색상은 그대로 유지된다.

 

이는 브라우저가 모든 페이지를 로드하지 않고 Client-Side Navigation이 작동한다는 것을 보여준다.

 

만약 <Link href=" ...">대신에 <a href=" ... ">을 썼다면, 브라우저가 전체 새로고침을 하기때문에 background 색상은 다른페이지로 이동했을 때 제거된다.

 

Code splitting and prefetching

Next.js는 code splitting을 자동으로 하기 때문에 각 페이지는 그 페이지에 필요한 부분만 로드한다. 이는 홈페이지가 렌더되면 다른 페이지에 대한 코드들은 초기에 제공되지 않는다는 뜻이다.

 

이는 수백개의 페이지가 있어도 홈페이지 로드가 빠르게 되는 것을 보장한다.

 

요청한 페지의 코드만 로딩하는 것은 페이지들이 격리되는 것이다. 만약 특정 페이지에서 에러가 발생했어도, 그 이외의 페이지들은 여전히 잘 작동한다.

 

Next.js의 제품 빌드에서 Link 컴포넌트가 브라우저에 나타날때마다 Next.js는 자동으로 백그라운드에서 연결된 페이지에 대한 코드를 자동으로 미리 가져온다. 그 링크를 클릭할 때 쯤이면 대상 페이지의 코드는 이미 백그라운드에 로드 되고 페이지 전환이 거의 즉각적으로 이루어진다.

 

Summary

Next.js는 code splitting, client-side navigation, prefetching을 통해 최상의 성능을 위해 어플리케이션을 자동으로 최적화 한다.

 

pages 아래에 파일을 생성하고 내장된 Link 컴포넌트를 사용함으로써 라우팅하기 때문에 라우팅 라이브러리도 필요 하지 않다.

 

※ 주의

  • Next.js 앱 외부 페이지에 링크해야 하는 경우에는 Link 컴포넌트 없이 <a>태그를 사용한다.
  • classname과 같은 속성을 추가할때에는 Link 컴포넌트가 아닌 <a>태그에 붙인다.
// Example: Adding className with <Link>
import Link from 'next/link'

export default function LinkClassnameExample() {
  // To add attributes like className, target, rel, etc.
  // add them to the <a> tag, not to the <Link> tag.
  return (
    <Link href="/">
      <a className="foo" target="_blank" rel="noopener noreferrer">
        Hello World
      </a>
    </Link>
  )
}

 

 

 

 

 

참고 https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs

참고 https://nextjs.org/learn/basics/navigate-between-pages/client-side