Next js 튜토리얼 2편 : 페이지 이동

목차

Next js 튜토리얼 1편: 시작하기 

Next js 튜토리얼 2편 : 페이지 이동 - 현재 글

Next js 튜토리얼 3편 : 공통 컴포넌트 사용 

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅 

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포

Navigate Between Pages

간단한 Next.js를 실행 시켜 보았습니다. 이전 편에서 index.js를 추가했던 것처럼 원하는 만큼 여러가지의 페이지를 추가할 수 있습니다.

이번에는 about 페이지를 만들어 봅시다.

pages/about.js를 생성하고 아래의 내용을 추가해 주세요

export default function About() {

  return (

    <div>

      <p>This is the about page</p>

    </div>

  );

}

그 후 http://localhost:3000/about에 접속하면 about 페이지가 뜨는 것을 볼 수 있습니다.

이제 두개의 페이지를 연결 해야 합니다. 이를 하기 위해서는 HTML의 <a />를 사용해도 되지만 <a />태그는 서버에 페이지를 요청하고 새로 고치기 때문에 클라이언트 사이드 렌더링을 할 수 없습니다. 

우리는 클라이언트 사이드 렌더링도 함께 하고 싶어서 Next.js를 쓰는 것이기 때문에 Next.js의 Link API를 사용합시다.

next/link, <Link />를 사용할 경우 prefetch를 통해 페이지를 새로 고치지 않고 이동 할 수 있습니다.

pages안에 파일들은 react의 컴포넌트 파일들과는 다르게 대문자가 아닌 소문자로 시작이 됩니다.

pages안에 파일 이름이 곧 url이 되어서 next측에서 이렇게 만들어 놓은것 같습니다.

윈도우에서는 대문자로 만들어도 작동이 안되는 것은 아니지만 대소문자를 구별하는 운영체제에서는 오류가 생길 수 있으니 주의합시다.

Setup

이번 장을 진행하기 위해서는 간단한 Next.js app이 필요합니다. 이전 내용에서 부터 시작하거나 아래의 예제를 다운받아 주세요

git clone https://github.com/zeit/next-learn-demo.git

cd next-learn-demo

cd 1-navigate-between-pages

위의 예제를 따라 했다면 npm 모듈을 설치해야 합니다

npm install

npm run dev

 http://localhost:3000/ 로 접속해서 app이 실행되는 것을 확인하세요

Using Link

이제 next/link를 사용하여 두개의 페이지를 연결하겠습니다

pages/index.js에 아래의 코드를 넣어 주세요

// This is the Link API

import Link from 'next/link'

const Index = () => (

  <div>

    <Link href="/about">

      <a>About Page</a>

    </Link>

    <p>Hello Next.js</p>

  </div>

)

export default Index

'next/link'의 Link 컴포넌트는 이와 같이 사용합니다

<Link href="/about">

<a>About Page</a>

</Link>

http://localhost:3000/ 에 접속해서 "About Page"링크를 클릭하면 "About"페이지로 이동되는 걸 확인 할 수 있습니다

이는 클라이언트 사이드 렌더링입니다. 브라우저의 개발자 도구에서 네크워크의 request를 확인하면 서버로 요청이 가지 않는 것을 확인 할 수 있습니다.

이동 후에 브라우저의 뒤로가기를 누르면 어떻게 될까요?

정상적으로 index페이지로 이동되는 것을 확인 할 수 있습니다. "next/link"는 모든 'location.history'를 핸들링 해줍니다.

react-router-dom을 사용할 때에는 클라이언트 사이드 렌더링을 위해 여러가지를 지정해주어야 하지만 Next.js에서는 그럴 필요가 없습니다.

Adding Link Props

여러가지 이유로 링크에 속성이나 props를 넣어야 할 때가 있습니다.

link에 title 속성을 넣고 싶다면 아래와 같이 추가할 수 있습니다

<Link href="/about">

  <a title="About Page">About Page</a>

</Link>

렌더링이 완료 된 후에 a태그를 보면 title 속성과 About Page가 값으로 들어가 있는 것을 확인 할 수 있습니다

그럼 아래와 같이 넣어도 속성이 추가 될까요?

<Link href="/about" title="About Page">

  <a>About Page</a>

</Link>

정답은 추가 되지 않습니다. 또한 서버의 console창에 아래와 같은 에러 메세지가 나타납니다

Warning: Failed prop type: Link: unknown props found: title

실제로 'next/link'컴포넌트의 title은 효과가 없습니다. 그 이유는 link 컴포넌트는 href와 같은 일부 props만 받는 HOC(Higher Order Component)이기 때문 입니다. props를 추가해야하는 경우에는 기본 구성 요소에 추가해야합니다. link컴포넌트에 props가 하위 컴포넌트로 전달 된다고 생각하면 안됩니다.

link컴포넌트는 onClick만을 가질 수 있습니다.

이번 장에서는 link컴포넌트의 기본적인 사용방법을 알아보았습니다. 다른 사용 방법은 다음 장에서 살펴볼 것입니다.

Next.js Routing documentation 을 살펴 보는 것도 좋습니다

---

Next js 튜토리얼 1편: 시작하기 

Next js 튜토리얼 2편 : 페이지 이동 - 현재 글

Next js 튜토리얼 3편 : 공통 컴포넌트 사용 

Next js 튜토리얼 4편 : 동적 페이지  

Next js 튜토리얼 5편 : 동적 라우팅 

Next js 튜토리얼 6편 : 데이터 가져오기  

Next js 튜토리얼 7편 : 컴포넌트 스타일링  

Next js 튜토리얼 8편 : 배포