손에 익는 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
  • Link
  • useRouter
  • 컴포넌트 파일
  1. Next.js 손에 익히기

페이지 간 이동하기

Previous페이지 구성하기Next페이지 스타일 입히기

Last updated 1 year ago

에서 배운 내용을 바탕으로 홈과 상세 페이지를 이동할 수 있도록 만들어봅시다.

Link

홈에서 Link 컴포넌트를 활용해 상세로 이동하는 동작을 구현합니다. href 프로퍼티에 경로를 입력해주면 됩니다.

app/page.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>
  )
}

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를 사용하는 별도의 클라이언트 컴포넌트를 만들어 서버 컴포넌트에서 불러와 사용해야 합니다.

app/[location]/page.tsx
import Button from './Button'

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

export default function Detail({ params }: Props) {
  return (
    <>
      <h1>{params.location}의 3일 예보</h1>
      <Button />
    </>
  )
}
app/[location]/Button.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

컴포넌트 파일

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

컴포넌트와 같은 파일을 어디 정의해야할지 고민이 되실지도 모르겠습니다. 하긴 하지만 정답은 없습니다. 이번 강의에서는 복잡해질 때마다 조금씩 프로젝트 구조를 정돈하면서 몇 가지 방법을 써볼 예정입니다. 우선은 라우팅 되는 페이지와 가까운 위치에 컴포넌트를 두는 방식을 써보겠습니다.

4️
페이지 간 이동
Next.js에서 여러가지 방법을 소개