Next.js 공부하기 7일차

게시 2024/11/21 업데이트 2024/12/08

By 개발구리🐸 7 분읽는 시간

안녕하세요 🐸

요즘 다시 바쁜 업무와 헤이해진 정신력으로 인해 게으른 제가 또 공부를 안했습니다.

다시 공부를 하면서 정리합니다.

Dynamic metadata

상황에 따라서는 메타데이터를 상수가 아닌 변수로 사용해야하는 경우가 있습니다.
예를 들어 개시글의 상세보기, 영화 정보 페이지 등과 같이 어떠한 정보의 상세 페이지인 경우 해당 정보를 대표하는 문구가 타이틀 메타데이터가 되는 것이 적절하죠.
이런 경우에 사용할 수 있는 방법이 다이나믹 메타데이터 입니다.

이때 사용하는 코드 예시는 다음과 같습니다.

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

여기서 중요한 것은 다이나믹 메타데이터를 사용하기 위해서 generateMetada 라는 이름을 사용한다는 것 입니다.

앞서 메타데이터를 사용하는 방법으로 다음과 같은 방법을 사용했었습니다.

  
export const metadata = {
	title : 'home'
}

여기서 알 수 있듯 동적으로 메타데이터를 사용할 때에는 generateMetadata 를 사용하고 정적일 때에는 metadata 를 사용한다는 점 입니다.

Vercel 배포하기

우선 Vercel이 뭔지 모르는 분들을 위해 짧게 설명하자면 깃허브 레포지토리를 손쉽게 배포할 수 있는 서비스입니다.
주소 : https://vercel.com/

Vercel에 배포하기 위해서는 package.json 에 다음의 실행 스크립트를 추가해야 합니다.

  
{
//생략
script:{
	//기타 스크립트 생략
	, "build" : "next build"
	, "start" : "next start"
}
//생략
}

Vercel 에는 깃허브 계정으로 손쉽게 가입하고 로그인 할 수 있습니다.

로그인 후 Add New... -> Project 버튼을 누르면 본인 깃허브 계정의 레포지토리를 확인할 수 있습니다.

이후 원하는 레포지토리를 Import 합니다.

배포하고자 하는 레포지토리가 정확하게 선택 되었는지를 확인하고, 프로젝트 이름을 입력합니다.

이때 프로젝트 이름은 원하는 이름으로 설정하면 됩니다. 레포지토리 이름과 같지 않아도 괜찮습니다.

이후 Deploy 를 클릭하면 배포를 시작합니다. Deploy를 누르면 Vercel 에서 프로젝트를 Build하는데 이 때 에러가 발생하는 경우가 잦습니다. 미리 확인해보기 위해서 자체적으로 빌드를 해보고 시도하는게 좋습니다.

+앞서 추가했던 실행 스크립트들은 Vercel 에서 배포 작업 시 실행하기 때문에 추가하는 부분이며 위 화면의 Build and Output Settings 에서 확인할 수 있습니다.

Build 할 때 타입스크립트 export 한 변수에서 타입 에러 발생 시 해결 방법

제가 학습한 강의에서는 root 경로 page 에서 특정 URL을 export 하고 있었습니다.
이 부분이 에러를 발생시키는 원인으로 page 내에서 메타데이터와 export default 외의 다른 것을 export 할 때 발생하는 에러라고 합니다.
때문에 저는 별도의 파일을 생성하여 해당 파일 내에서 export한 변수를 사용하도록 변경 했습니다.

수정 전

page.tsx

  
export const URL:string = "example.com"
export const metadata = {
 // ...
}
export default async function Home(){
 //...
}

변경 후 page.tsx

  
import { URL } from "./constants";
export const metadata = {
 // ...
}
export default async function Home(){
 //...
}

prefetch

특정 데이터의 목록과 상세 정보를 보는 페이지로 구성되어 있는 경우 유용한 기능입니다. Link 컴포넌트에서 사용할 수 있습니다.
prefetch 라는 prop은 사용자가 해당 링크를 클릭하기 전부터 미리 데이터를 fetch 합니다.
이를 통해 사용자는 링크 클릭 시 로딩을 기다리지 않고 미리 fetch 한 데이터를 바로 볼 수 있습니다.

다음은 prefetch를 사용한 Link의 예시 코드입니다.

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

이것으로 노마드코더님의 NextJs14 강의는 끝이났습니다.
Next.js는 새로운 경험을 위해 학습을 해보고 싶었는데 클라이언트-서버 사이트로 각각의 랜더링 방법을 구분하여 사용할 수 있는 점에서 큰 흥미가 느껴졌습니다.
숙련된 리액트 실력과 자바스크립트 실력이 뒷받침 된다면 하나의 프레임워크를 통해 프론트/백 엔드 전부 처리할 수 있다는 점에서도 큰 매력이 있다고 생각합니다.

참조 : https://nextjs.org/docs

공부일기, Next.js

NextJS javascript

Dynamic metadata

Vercel 배포하기

prefetch

인기 태그