[Next.js] 배포방법

https://vercel.com/

Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel

 

1. 사전작업: 깃허브에 프로젝트 올리기
2. packga.json script에 build, start 추가 → push

• 코드 보기
• "scripts": { "dev": "next dev", "build": "next build", "start": "next start" },

1. vercel에 새프로젝트 추가 → 내 프로젝트 선택
2. configure project 정의 그리고 deploy
3. 프로젝트 이름 설정, 다른 거는 변경할 거 없음.

 

⚠️비디오가 늦게 로딩되는 이슈!

export default function Movie({title, id, poster_path}: IMovieProps) {
    const router = useRouter();
    const onClick = () => {
      router.push(`/movies/${id}`);
    };
    return (
        
        <div className={styles.movie}>
            <img src={poster_path} alt={title} onClick={onClick}/>
            <Link prefetch href={`/movies/${id}`}>{title}</Link>
        </div>
    )
}

• prefetch 추가하면 됨!