[Next.js] Next15 서버 컴포넌트에서 동적 세그먼트 파라미터 가져오기 | 동적 메타데이터 설정하기 | Next15 파라미터 관련 배포 오류

예시 코드

import QuestionItem from "@/components/question/QuestionItem";
import { getQuestionById } from "@/service/table/questions";
import { Metadata } from "next";

// ✨
// 1. Next15에서는 파라미터를 비동기적으로 처리해야하며 이로 인해 타입을 프로미스 객체로 정의해야한다.
// 2. 동적 라우팅에서 params의 타입은 string으로 설정해야한다.
type PropsType = Promise<{ id: string; }>

// ✨ 동적 메타데이터 생성
export async function generateMetadata({ params }:  { params: PropsType }): Promise<Metadata> {
  const { id } = await params; // ✨ 1. Next15에서는 파라미터를 비동기적으로 처리해야하며 이로 인해 타입을 프로미스 객체로 정의해야한다.
  const { data } = await getQuestionById(Number(id));

  return {
    title: data?.question ? `면접 질문: ${data.question} | 올인` : "ALLIN | 대학교 학과별 면접 질문 플랫폼",
    description: data?.gpt_answer || "수시 & 편입 & 전과 학과별 면접을 위한 맞춤형 질문 카드 제공! AI 기반 모범 답변과 카카오톡 알림으로 효과적인 면접 준비를 시작하세요.",
    openGraph: {
      title: data?.question || "ALLIN | 대학교 학과별 면접 질문 플랫폼",
      description: data?.gpt_answer || "수시 & 편입 & 전과 학과별 면접을 위한 맞춤형 질문 카드 제공! AI 기반 모범 답변과 카카오톡 알림으로 효과적인 면접 준비를 시작하세요.",
      url: `/question/${id}`,
      images: data?.reference_links?.[0] ? [{ url: data.reference_links[0], width: 1200, height: 630 }] : [],
    },
  };
}

// ✨ 프롭스로 파라미터 객체 전달 받기
export default async function QuestionPage({ params }:  { params: PropsType }) {
  // ✨ 1. Next15에서는 파라미터를 비동기적으로 처리해야하며 이로 인해 타입을 프로미스 객체로 정의해야한다.
  const { id } = await params;

  const { data } = await getQuestionById(Number(id));

  return (
    <>
      <QuestionItem itemData={data} />
    </>
  );
}

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#async-request-apis-breaking-change

Upgrading: Version 15 | Next.js

https://github.com/orgs/community/discussions/142577

PageProps Type Errors in Next.js · community · Discussion #142577

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-layout

Upgrading: Version 15 | Next.js

 

배경

필자는 아래와 같은 오류 메시지와 함께 배포를 실패하였다.

필자는 위에서 설명한 내용을 통해 문제를 해결했으며 배포 실패의 원인은 아래와 같다.

원인 :

  1. Next15부터 파라미터 객체의 타입을 프로미스 객체로 정의해야한다.고 비동기적으로 

  2. Next15부터 파라미터 값은 비동기적으로 처리하여 추출해야한다.  

아래는 오류 메시지와 배포 오류 해결 이전의 코드이다.

[00:50:24.725] Running build in Washington, D.C., USA (East) – iad1
[00:50:24.851] Cloning github.com/LDK1009/ALLIN (Branch: main, Commit: f2d5d4c)
[00:50:25.082] Previous build caches not available
[00:50:25.257] Cloning completed: 405.000ms
[00:50:25.552] Running "vercel build"
[00:50:25.920] Vercel CLI 41.2.2
[00:50:26.208] Installing dependencies...
[00:50:41.183] 
[00:50:41.184] added 398 packages in 15s
[00:50:41.184] 
[00:50:41.184] 140 packages are looking for funding
[00:50:41.184]   run npm fund for details
[00:50:41.233] Detected Next.js version: 15.1.7
[00:50:41.237] Running "npm run build"
[00:50:41.530] 
[00:50:41.530] > project@0.1.0 build
[00:50:41.530] > next build
[00:50:41.530] 
[00:50:42.098] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[00:50:42.098] This information is used to shape Next.js' roadmap and prioritize features.
[00:50:42.098] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[00:50:42.098] https://nextjs.org/telemetry
[00:50:42.098] 
[00:50:42.169]    ▲ Next.js 15.1.7
[00:50:42.170] 
[00:50:42.246]    Creating an optimized production build ...
[00:50:59.321]  ✓ Compiled successfully
[00:50:59.326]    Linting and checking validity of types ...
[00:51:06.135] Failed to compile.
[00:51:06.136] 
[00:51:06.136] src/app/question/id/[id]/page.tsx
[00:51:06.136] Type error: Type 'QuestionPageProps' does not satisfy the constraint 'PageProps'.
[00:51:06.136]   Types of property 'params' are incompatible.
[00:51:06.136]     Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
[00:51:06.136] 
[00:51:06.163] Next.js build worker exited with code: 1 and signal: null
[00:51:06.185] Error: Command "npm run build" exited with 1
[00:51:06.504]

import QuestionItem from "@/components/question/QuestionItem";
import { getQuestionById } from "@/service/table/questions";
import { Metadata } from "next";

interface QuestionPageProps {
  params: {
    id: number;
  };
}

// 동적 메타데이터 설정
export async function generateMetadata({ params }: QuestionPageProps): Promise<Metadata> {
  const { id } = await params;
  const { data } = await getQuestionById(Number(id));

  return {
    title: data?.question ? `면접 질문: ${data.question} | 올인` : "ALLIN | 대학교 학과별 면접 질문 플랫폼",
    description: data?.gpt_answer || "수시 & 편입 & 전과 학과별 면접을 위한 맞춤형 질문 카드 제공! AI 기반 모범 답변과 카카오톡 알림으로 효과적인 면접 준비를 시작하세요.",
    openGraph: {
      title: data?.question || "ALLIN | 대학교 학과별 면접 질문 플랫폼",
      description: data?.gpt_answer || "수시 & 편입 & 전과 학과별 면접을 위한 맞춤형 질문 카드 제공! AI 기반 모범 답변과 카카오톡 알림으로 효과적인 면접 준비를 시작하세요.",
      url: `/question/${id}`,
      images: data?.reference_links?.[0] ? [{ url: data.reference_links[0], width: 1200, height: 630 }] : [],
    },
  };
}

export default async function QuestionPage({ params }: QuestionPageProps) {
  const { id } = await params;

  const { data } = await getQuestionById(Number(id));

  return (
    <>
      <QuestionItem itemData={data} />
    </>
  );
}

https://nextjs.org/docs/app/building-your-application/upgrading/version-15#asynchronous-layout

Upgrading: Version 15 | Next.js