# 페이지 간 이동하기

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

### 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;

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://book.hajoeun.dev/friendly-next-js/next.js-2/undefined-3.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.