[Next TIL] 날씨앱 - 프로젝트 세팅 및 라우팅 구성하기

➡️ 프로젝트 환경 설정

npx create-next-app < project-name >

💥 아래 두개만 no로 하고 나머지는 yes로 설정

• Would you like to use Tailwind CSS? NO
• Would you like to customize the default import alias (@/*)? NO

➡️ 페이지 구성하기

라우팅을 기반으로 페이지 경로를 구성한다.

1. 홈-지역목록

• app/page.tsx에 홈을 만듭니다.

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

2. 상세 - 지역 일기 예보

• app/[location]/page.tsx 에 상세 페이지를 만듭니다.

• location으로 전달되는 params 값을 사용해 각 페이지에서 어떤 지역의 날씨를 예보하는지 타이틀을 만들어둡니다.

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

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

👍 세그먼트 값에 따라 달라진다. 신기...😯