코딩/Next.js

[Next.JS] Metadata와 환경 변수 사용하기

김기지 2024. 2. 1. 21:21

 

🖥️ Metadata

SEO와 웹 공유성을 향상시킬 수 있는 API

 

메타데이터를 추가하는 방법

  • 구성 기반 메타데이터 : 정적 메타데이터 객체 또는 동적 generateMetadata 함수를 layout 또는 page로 내보냄
  • 파일 기반 메타데이터 : 라우팅 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가

이 두가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성한다.

ImageResponse 생성자를 이용해 동적 OG 이미지를 생성할 수도 있다.

 

 

 

정적 Metadata

layout.js나 정적 page 파일에서 메타데이터 객체를 내보낸다.

※ 메타데이터는 서버 컴포넌트 요소이므로 클라이언트 컴포넌트에서는 사용할 수 없다.

 

metadata의 title에 문자열 또는 객체를 입력한다.

타입스크립트 파일의 경우 metadata의 타입은 Metadata이다.

export const metadata: Metadata = {
  title: "Home",
  description: "Generated by kiji",
};

 

 

metadata도 중첩해 사용이 가능하다. 하지만 렌더링시에는 중첩되지 않고 병합되기 때문에 공통된 부분은 최상단 layout의 메타데이터에서 관리한다.

title에 template 객체를 추가해 공통적으로 표시될 부분을 설정하고 default로 title을 설정하지 않은 페이지에서 표시될 기본값을 넣어준다.

export const metadata: Metadata = {
  title: {
    template: "%s | Next Movies", // %s 에 다른 페이지에서 설정된 title이 들어감
    default: "Loading...",
  },
  description: "This is HomePage",
};

 

 

 

 

 

 

동적 Metadata

현재 경로 매개변수, 외부 데이터 또는 상위 세그먼트와 같은 동적 정보에 따라 title이 변화한다.

generateMetadata 함수를 사용해 동적 값이 필요한 메타데이터를 요청할 수 있다.

 

[id] 폴더 아래 작성된 page에서 작성한다.

[id]는 동적 경로를 생성하기 때문에 params와 searchParams를 props로 받아올 수 있다.

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

fetch요청을 하는 getMovie 함수에 id를 넘겨 영화 데이터를 받아와 title을 설정한다.

 

 

 

 

🖥️ 환경 변수

시스템에 설정한 전역 변수

공개할 수 없는 정보(API Key, Password 등)가 코드에 노출되지 않도록 한다.

 

환경 변수 저장하기

가장 바깥쪽에 .env.local 파일을 만든다. (.env 파일 중 우선순위가 가장 높다.)

여기에 전역적으로 사용할 환경 변수를 넣는다.

변수 이름에는 웹 브라우저를 위한 환경 변수 설정법을 따라 접두사에 NEXT_PUBLIC_을 붙인다.

서버 컴포넌트는 서버에서 렌더링이 이루어져 노출이 되지 않지만 클라이언트 컴포넌트의 경우 정보가 노출되기 때문에 이를 지켜야한다.

 

NEXT_PUBLIC_API_URL=http://localhost:9999/topics

 

 

 

환경 변수 사용하기

const res = await fetch(process.env.API_URL, {
  cache: "no-store",
});
728x90