[Next.js] Deployment

CSS Modules

Next.js에서는 어떤 설정을 따로 하지 않아도 바로 CSS 모듈을 사용할 수 있다

styled components, tailwind, chakra 등

.module.css 확장자를 사용해 CSS 모듈을 기본적으로 지원한다

CSS 모듈은 고유한 클래스 이름을 자동 생성해 CSS범위를 로컬로 지정하기 때문에 다른 파일에서 동일한 클래스 이름 사용 가능

 

global CSS 파일 → 애플리케이션 전체에 적용

 

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

export default function Navigation() {
  const path = usePathname();
  console.log(path);
  return (
    <nav className={styles.nav}>

 

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

.nav ul {
  display: flex;
}

 

 

useRouter

useRouter 훅을 사용하면 클라이언트 컴포넌트 내부의 라우트를 프로그래밍 방식으로 변경 가능

특정 요구 사항이 없는 한 네비게이션을 위해 useRouter 대신 Link 컴포넌트 사용 추천

☆ App router 사용 시 useRouter 훅은 next/router가 아닌 next/navigation에서 import !!

import { useRouter } from "next/navigation";

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 href={`/movies/${id}`}>{title}</Link>
    </div>
  );
}

 

 

Dynamic Metadata

generateMetadata 함수는 동적인 제목을 갖고 있는 페이지를 위해 존재한다

예를 들어 id 값에 따라 주소가 달라지는 페이지에서 웹사이트의 head 변경 가능

동일한 경로에서 메타데이터 객체와 generateMetadata 함수를 모두 export 할 수 없다

 

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

 

 

Deployment

https://vercel.com/dashboard

Dashboard

 

prefetch

prefetch는 Link 컴포넌트가 사용자의 뷰포트에 들어갈 때(초기 또는 스크롤을 통해) 발생한다

Next.js는 링크드된 라우트(href에 지정된 라우트)와 해당 데이터를 백그라운드에서 prefetch 하고 load해 클라이언트 측 네비게이션 성능을 향상시킨다

prefetch는 프로덕션에서만 활성화된다

<Link prefetch href={`/movies/${id}`}>{title}</Link>