Next.js에서 페이지간 이동하는 방법

페이지간 이동

우리는 레이아웃과 페이지를 만드는 방법을 배웠다. 이제 라우트, 즉 "페이지"의 이동을 알아보도록 하자. 되게 쉬우니 금방 따라 할 수 있다!

Link

a태그는 우리가 만들어낸 페이지가 아니라 아예 다른 사이트의 페이지로 "넘어가는" 태그라면, Link 태그는 우리가 만들어낸 "페이지간의 이동"임을 기억해야 한다.

사용방법은 간단하다.

import Link from 'next/link';

export default function Home() {
  let name = 'Vercel';
  let link = 'https://nextjs.org/';

  return (
    <>
      <h1 className="hello">{name}</h1>
      <p className="title">by dev Next js</p>
      <a href={link} target="_blank" className="link">
        Next.js 바로가기
      </a>
      <div className="background">
        <h3 className="sub">hello world</h3>
      </div>
      <Link className="Link" href="/list">
        상품 목록 이동하기
      </Link>
    </>
  );
}

---

(또는)

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="내가 지정한 클래스"
          >
            <LinkIcon className="내가 지정한 클래스" />
            <p className="내가 지정한 클래스">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

일단...

import Link from 'next/link';

이 import문을 가져오자. 안 가져오면 에러가 뜨니 꼭 가져오자.

이후 <Link href=""> ~~~ <Link>을 작성하자. href 뒤에는 내가 이동하고 싶은 라우팅 주소를 작성하자. 혹은 따로 변수나 객체를 만들어 지정해 줄 수 있다. (바로 위 코드처럼!)

Link 태그 안에 들어가는 것들이 "이동되는 액션 컴포넌트"가 되어준다. map 문법도 가능하다! (map 문법은 반복되는 부분을 map으로 묶어주는 역할을 해준다. 이 부분은 추후에 글을 쓰겠다.)

---

Automatic code-splitting and prefetching

페이지 이동 경험을 좋게 만들기 위해 Next.js에서는 자동적으로 라우트 경로에 따라 코드를 분산시켜둔다.

이것은 초기에 불러올 때 모든 코드를 불러오는 React의 SPA와는 다른 부분이다.

https://developer.mozilla.org/en-US/docs/Glossary/SPA

SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

이는 곧 경로에 따라 페이지가 별도 구성되어 있다는 것이고, 특정 페이지가 에러가 나도, 어플의 다른 나머지 부분은 여전히 동작된다.

또한, 프로덕션 환경에서 유저가 클릭하는 그 시간에 목적지 페이지 코드는 백그라운드에서 이미 불러와져 있다. (그러기에 페이지간 전환이 거의 즉시 이루어진다.)

---

usePathname

활성화된 링크를 보여주고 싶으면, 

usePathname를 사용하면 된다.

usePathname은 Hook이다. 고로 클라이언트 컴포넌트에서 작동한다.

---

(예시 코드)

'use client'
 
import { usePathname } from 'next/navigation'
 
export default function ExampleClientComponent() {
  const pathname = usePathname()
  return <p>Current pathname: {pathname}</p>
}

최상단에 'use client'를 작성하면 이 컴포넌트는 "클라이언트 컴포넌트"가 된다. 자바스크립트 기능이 들어가는 컴포넌트에서 기입해 주면 된다. 그게 아니라 그냥 기능 없는 레이아웃을 담당하는 page라면 서버 컴포넌트로 그대로 진행하면 된다.

usePathname 공식 문서

https://nextjs-ko.org/docs/app/api-reference/functions/use-pathname

usePathname – Nextjs 한글 문서

이 훅이 더 궁금하다면 위 공식 문서를 읽어보자.

(관련 코드를 구현하고 관련 라우트의 로컬호스트를 확인해 보자. 활성화된 링크를 볼 수 있다!)

---

Next.js 공식문서

페이지간의 이동에 대한 공식 문서 >

https://nextjs.org/learn/dashboard-app/navigating-between-pages

App Router: Navigating Between Pages | Next.js

---