➡️ Link

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

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

💥 주위

useRouter을 import해 올때 next/router이 아닌 next/navigation에서 가져와야 한다.

//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

//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 />
    </>
  )
}

이렇게 클라이언트 컴포넌트를 사용해야 하는 페이지를 따로 빼주어 상세 페이지가 무작정 상세페이지가 되는 것을 막을 수 있다.