# 페이지 구성하기

[라우팅](/friendly-next-js/next.js-1/undefined-1.md#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 %}


---

# 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-2.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.