next/router - useRouter(2)

제목을 클릭했을 때 뿐만 아니라 영화 포스터를 클릭했을 때도 디테일 페이지로 넘어가게 만들고자 한다. 영화 제목을 클릭하였을 때 페이지를 넘어가는 것은 Link만으로 충분히 가능하지만 포스터와 타이틀 전체를 Link로 구현하는 것보다 useRouter를 사용하는 것이 코드 구성상 더 깔끔한 것 같다.

useRouter(router.push)를 사용하자

import Link from 'next/link';
import { useRouter } from 'next/router';

<div className='container' >
          <Seo title="Home"/> 
          {/* {movies.length === 0 && <h1>Loading...</h1>} */}
          {results?.map((movie: SetData) => (
          <div 
            onClick={() => onClick(movie.id, movie.original_title)} 
            className="movie" 
            key={movie.id}
          >
            <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} />
            <h4>
              <Link href={`https://image/${movie.original_title}/${movie.id}`}
                // href={{
                //   pathname: `/movies/${movie.id}`,
                //   query: {
                //     title: movie.original_title,
                //   },
                // }}
                // as={`/movies/${movie.id}`}
              >
                <a>{movie.original_title}</a>
              </Link>
            </h4>                    
          </div>   
          ))}

공식문서에 useRouter 메서드 router.push에 대한 설명이 나와있다.

설명에 이렇게 나와있다. 이 방법은 'next/link'가 충분하지 않은 경우에 유용합니다. useRouter 메서드 router.push를 사용해서도 페이지 이동이 가능하다.