2024-12-26T01:53:28.133Z

1

공식문서를 참조해서 바꿨는데, 제 local에선 에러가 안뜨는데, 바꿀때마다 배포에 실패했습니다. 그러다가 params와 searchParams를 전부 Promise 타입으로 감싸고 await로 안전하게 접근하도록 수정했습니다.

import HomeButton from "../components/HomeButton";
import { getForecast } from "../utils/getForecast";

// 수정된 Props 타입
type Props = {
  params: Promise<{ location: string }>; // params를 Promise로 정의
  searchParams: Promise<{ name?: string }>; // searchParams도 Promise로 정의
};

export async function generateMetadata({ searchParams }: Props) {
  const resolvedSearchParams = await searchParams; // 비동기로 처리
  const name = resolvedSearchParams?.name || "Unknown";

  return {
    title: `날씨 앱 - ${name}`,
    description: `${name} 날씨를 알려드립니다`,
  };
}

export default async function Detail({ params, searchParams }: Props) {
  // params와 searchParams를 비동기로 처리
  const resolvedParams = await params;
  const resolvedSearchParams = await searchParams;

  const name = resolvedSearchParams?.name || "Unknown";
  const location = resolvedParams?.location;

  // location이 없는 경우 에러 처리
  if (!location) {
    throw new Error("Location is required!");
  }

  // API 호출
  const res = await getForecast(location);
  return (
    <>
      <h1>{name}의 3일 예보</h1>
      <ul>
        {res.forecast.forecastday.map((day) => (
          <li key={day.date}>
            {day.date} / {day.day.avgtemp_c}
          </li>
        ))}
      </ul>
      <HomeButton />
    </>
  );
}

바뀐 코드는 위와 같습니다! 한 2~3시간 꼼짝없이 매달렸네요.. 제 실력이 너무 부족했던 것 같습니다..! 다른 분들은, 저처럼 실수없이 잘 해결하시길!
일단 배포는 완료했습니다!

0

감사합니다! 다른 분들에게도 도움이 될 것 같아요. 고생 많으셨어요!