손에 익는 Next.js
Part 1 - 공식 문서 훑어보기
Part 1 - 공식 문서 훑어보기
  • 왜 Next.js를 배우는가?
    • 1️Next.js가 세상에 있기까지
    • 2️Next.js를 배우는 이유
  • Next.js 기본 배우기
    • 1️Next.js는 무엇인가?
    • 2️Next.js 13
    • 3️서버 컴포넌트
    • 4️라우팅
    • 5️페이지 간 이동
    • 6️스타일링
    • 7️데이터 페칭
    • 8️메타데이터
  • Next.js 손에 익히기
    • 1️프로젝트 소개
    • 2️프로젝트 환경 설정
    • 3️페이지 구성하기
    • 4️페이지 간 이동하기
    • 5️페이지 스타일 입히기
    • 6️날씨 API 사용하기
    • 7️날씨 데이터 조회하기
    • 8️메타데이터 다루기
    • 9️서비스 배포하기
  • 마치며
    • *️후속 강의에 대하여
Powered by GitBook
On this page
  • 홈 - 지역 목록
  • 상세 - 지역 일기예보
  1. Next.js 손에 익히기

페이지 구성하기

Previous프로젝트 환경 설정Next페이지 간 이동하기

Last updated 1 year ago

에서 배운 내용을 기반으로 페이지 경로를 구성해봅시다.

홈 - 지역 목록

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

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

상세 - 지역 일기예보

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

app/[location]/page.tsx
type Props = {
  params: { location: string }
}

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