Next.js 13 - 동적으로 title 변경하기

페이지 이동 시 해당 페이지마다 헤더의 타이틀 부분을 동적으로 변경해주는 방법에 대한 설명입니다.

Next.js 공식문서에서는 generateMetadata 기능을 활용하여 메타 데이터를 동적으로 반환하고 설정해 줄 수 있다고 안내되어 있습니다.

공식문서에서 해당 기능 예제로 제시해준 코드는 .tsx 파일의 형태에 설정 할 수 있는 방법으로 안내되어 있습니다. 기본 .js 파일에서 적용할 수 있는 방법을 찾아보다가 결국 해당 기능은 적용해보지 못했지만 다른 방법으로 설정할 수 있었습니다.

1. metadata 설정

우선 최상위 layout.js 파일에 존재하는 metadata안의 title 내용을 지워줍니다.

2. Home(/) 경로 title 설정

제일 먼저 랜더링되는 home이 되는 page.js 파일에서 메인 title을 설정해 줍니다.

export default function Home() {
  return (
    <div>
   🔥 <title>Home | Next Movies</title> 🔥
      <h1>Home</h1>
    </div>
  );
}

3. 하위 페이지 title 설정

title을 따로 지정해 주고 싶은 페이지의 파일에서 아래와 같이 작성해 줄 수 있습니다.

"use client";
import { useState } from "react";

🔥async function getData() {
  return { title: "About | Next Movies" }; // Your blog content
}

export default async function Counter() {
  const [counter, setCounter] = useState(0);
🔥 const { title } = await getData();

  return (
    <div>
   🔥 <title>{title}</title>
      <h1 className={counter % 2 === 0 ? "active" : ""}>counter {counter}</h1>
      <button onClick={() => setCounter((pre) => pre + 1)}>+</button>
      <style jsx>{`
        .active {
          color: yellow;
        }
      `}</style>
    </div>
  );
}

위와 같이 작성해 주면 about 페이지로 이동시 헤더의 타이틀 부분이 잘 바뀐것을 확인할 수 있습니다.

하지만 이렇게 설정하면 매번 해당 페이지에서 비동기 처리를 해주는 함수를 만들어야 하고, title을 url정보에서 가져오지 못하고 직접 작성해주어야 하기 때문에 추후에는 공식문서에서 제시하는 기능을 최대한 적용해봐야 할 것 같습니다.