기본적으로 다른 페이지끼리 연결하기 위해서는 anchor tag <a href = "~~~~"></a>를 사용했다. anchor 태그를 이용한다면 브라우저는 해당 페이지로 이동하기 위해서 뷰포트 전체를 리렌더링 하게 되고, 이게 사용자 경험 상으로 깜빡이는 화면으로 나타나게 된다.

하지만 이를 NextJS에서는 Client Side Rendering으로 페이지를 연결해서 네트워크 개입을 없애면서 페이지를 연결할 수 있다. 우리는 서버 사이드 렌더링만 사용하기 위해 Next JS를 사용하는 것이 아니다. 우리는 클라이언트 사이드 렌더링과 서버 사이드 렌더링 모두의 장점을 갖고 있는 좋은 성능의 앱을 만들기 위해 Next JS를 사용하고 있는 것이다.

Link from next/Link와 <Link />

next/Link와 <Link />를 사용하면 pre-fetch를 통해 페이지를 새로 고치지 않고 이동할 수 있다.

index.js

import Link from 'next/link'

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

about.js

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

function About() {
  return (
    <div>
      About
      <Link href="/"><div>return</div></Link>
    </div>
  )
}

export default About

동적 라우팅과 연결하는 방법

동적으로 만들어지는 객체를 순회하면서 이에 맞는 페이지로 동적으로 라우팅해주는 Link를 만들 수 있다!

encodeURIComponent()는 문자열로 url이 들어갈 때 utf-8 형식을 지켜주기 위해서 사용되는 것이다. 만약 그냥 숫자였다면 사용할 필요가 없다.

import Link from 'next/link'

const users = [
  {id:1, name: "James"},
  {id:2, name: "Tim"},
  {id:3, name: "Bred"},
]

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        {users.map((user) => (
        <ul key = {user.id}>
          <Link href={`/user/${encodeURIComponent(user.name)}`}>
            <a>{user.name}</a>
          </Link>
        </ul>
        )
        )}
      </li>
    </ul>
  )
}

안에 두 개 이상의 자식 요소가 들어가면 안 된다. 따라서 하나의 자식 요소를 만들어주고 그 안에다 여러 자식 요소들을 넣어줘야 한다.

속성도 정해져 있는 속성이 아니면 넣을 수 없다. 따라서 className과 같은 속성을 넣어주기 위해선 그 안에 자식 요소로 <a> 등을 넣어 주어서 사용해야 한다.

• Link에 사용될 수 있는 속성들

<Link href = "<https://nextjs.org/docs>">
	<a  className="card"> // 이렇게 사용!
	  <h3>Documentation &rarr;</h3>
	  <p>Find in-depth information about Next.js features and API.</p>
	</a>
</Link>