4️페이지 간 이동하기

페이지 간 이동에서 배운 내용을 바탕으로 홈과 상세 페이지를 이동할 수 있도록 만들어봅시다.

Link

홈에서 Link 컴포넌트를 활용해 상세로 이동하는 동작을 구현합니다. href 프로퍼티에 경로를 입력해주면 됩니다.

app/page.tsx

import Link from 'next/link'

export default function Home() {
  return (
    <ul>
      <li>
        <Link href="/Seoul">서울</Link>
      </li>
      <li>
        <Link href="/London">런던</Link>
      </li>
      <li>
        <Link href="/Paris">파리</Link>
      </li>
    </ul>
  )
}

useRouter

상세에서 useRouter를 이용해 홈으로 이동하는 동작을 구현합니다. useRouter를 서버 컴포넌트에서 사용하려고 하면 다음과 같은 에러가 발생합니다.

Error: useRouter only works in Client Components. Add the "use client" directive at the top of the file to use it.

때문에 useRouter를 사용하는 별도의 클라이언트 컴포넌트를 만들어 서버 컴포넌트에서 불러와 사용해야 합니다.

app/[location]/page.tsx

import Button from './Button'

type Props = {
  params: { location: string }
}

export default function Detail({ params }: Props) {
  return (
    <>
      <h1>{params.location}의 3일 예보</h1>
      <Button />
    </>
  )
}

app/[location]/Button.tsx

'use client'

import { useRouter } from 'next/navigation'

const Button = () => {
  const router = useRouter()
  const handleClick = () => {
    router.push('/')
  }

  return <button onClick={handleClick}>홈으로</button>
}

export default Button

컴포넌트 파일

컴포넌트와 같은 파일을 어디 정의해야할지 고민이 되실지도 모르겠습니다. Next.js에서 여러가지 방법을 소개하긴 하지만 정답은 없습니다. 이번 강의에서는 복잡해질 때마다 조금씩 프로젝트 구조를 정돈하면서 몇 가지 방법을 써볼 예정입니다. 우선은 라우팅 되는 페이지와 가까운 위치에 컴포넌트를 두는 방식을 써보겠습니다.

이제 만들어진 페이지에 약간의 스타일을 입혀보러 갑시다.