# 페이지 간 이동하기

[페이지 간 이동](https://book.hajoeun.dev/friendly-next-js/next.js-1/undefined-2)에서 배운 내용을 바탕으로 홈과 상세 페이지를 이동할 수 있도록 만들어봅시다.

### Link

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

{% code title="app/page.tsx" %}

```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>
  )
}
```

{% endcode %}

### 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`를 사용하는 별도의 클라이언트 컴포넌트를 만들어 서버 컴포넌트에서 불러와 사용해야 합니다.

{% code title="app/\[location]/page.tsx" %}

```tsx
import Button from './Button'

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

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

{% endcode %}

{% code title="app/\[location]/Button.tsx" fullWidth="false" %}

```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
```

{% endcode %}

### 컴포넌트 파일

컴포넌트와 같은 파일을 어디 정의해야할지 고민이 되실지도 모르겠습니다. [Next.js에서 여러가지 방법을 소개](https://nextjs.org/docs/app/building-your-application/routing/colocation)하긴 하지만 정답은 없습니다. 이번 강의에서는 복잡해질 때마다 조금씩 프로젝트 구조를 정돈하면서 몇 가지 방법을 써볼 예정입니다. 우선은 라우팅 되는 페이지와 가까운 위치에 컴포넌트를 두는 방식을 써보겠습니다.&#x20;

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