# 페이지 구성하기

[라우팅](https://book.hajoeun.dev/friendly-next-js/next.js-1/undefined-1#url-path)에서 배운 내용을 기반으로 페이지 경로를 구성해봅시다.

### 홈 - 지역 목록

`app/page.tsx`에 홈을 만듭니다. 홈에서는 서울, 런던, 파리의 현재 날씨를 목록 형태로 보여줍니다. 우선은 간단하게 목록을 만듭니다.

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

```tsx
export default function Home() {
  return (
    <ul>
      <li>서울</li>
      <li>런던</li>
      <li>파리</li>
    </ul>
  )
}
```

{% endcode %}

### 상세 - 지역 일기예보

`app/[location]/page.tsx` 에 상세 페이지를 만듭니다. 홈에서 선택한 지역의 3일 예보를 제공합니다. `location`으로 전달되는 `params` 값을 사용해 각 페이지에서 어떤 지역의 날씨를 예보하는지 타이틀을 만들어둡니다.&#x20;

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

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

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

{% endcode %}