Next.js를 Vercel에 배포하기

공부 계기 📚

- 지금까지 Netlify를 통해서만 프로젝트를 배포했는데, Vercel을 통해 배포할 수 있다고 하여 공부하게 되었다.

- 니꼬쌤 수업 중 정리.

 

개념 📃

 

 

.module.css

배포전, CSS를 만들어 보자.

여기에서 중요한 건 .module.css를 붙이는 것이다. 

 

그리고 이 파일을 import 해주고, 적용하고자하는 곳에 class이름을 적용한다.

import styles from "../styles/navigation.module.css"

    <nav className={styles.nav}>

 

 

이렇게 하면 class간의 이름 겹침 충돌을 예방할 수 있다. 

css파일 내에서는 클래스나 id명이 반드시 들어가야만 적용이 된다.

다른 configuration은 필요 없다. 단지 파일 명을 명확히 작성하고, 임포트 후 클래스명을 지정해주면 

 

.nav {
  background-color: red;
  padding: 50px 100px;
}

.nav ul {
  display: flex;
}

 

 

generateMetadata

동적으로 title을 정해주기 위해서 Metadata를 활용할 수 있다.

export async function generateMetadata({ params: { id } }: IParams) {
  const movie = await getMovie(id);
  return {
    title: movie.title,
  };
}

 

 

정적으로 정해주고 싶다면?

export const metadata = {
	title: "Home"
};

 

 

 

prefetch

유저가 해당 페이지를 방문하기 전에 미리 데이터를 로드해놓는 것. 페이지 로딩 시간을 줄일 수 있다.

    <div className={styles.movie}>
      <img src={poster_path} alt={title} onClick={onClick} />
      <Link prefetch href={`/movies/${id}`}>
        {title}
      </Link>
    </div>

 

 

 

 

활용 예시 🪄

본격적인 배포에 앞서 package.json에서 scripts를 설정해준다.

 

    "build": "next build",
    "start": "next start",

 

build - 앱을 실제 production용으로 만들어 준다.

start - 앱을 production 모드로 시작해준다.

 

-> vercel이 호출해준다.

 

vercel에 로그인 후, 프로젝트를 추가한다.

* vercel에서 배포하기 전에, 오류를 확인할 수 있게 VS code에서 직접 npm run build로 테스트해볼 수 있다.

 

 

 

배포 링크

 

https://next-movies-three-beryl.vercel.app/