Nextjs async 서버컴포넌트 질문있습니다.

Question

// page.tsx import WeatherList from @/components/containers/main/WeatherList; export default function Home({ searchParams, }: { searchParams: { country: string }; }) { const country = searchParams.country ? searchParams.country : kr; return ( <> ); } // server component export default async function WeatherList({ country }: { country: string }) { const res = await fetch( `http://localhost:3000/api/cityList?country=${country}` ); const cityList = await res.json(); return ( ... ); } WeatherList cannot be used as a JSX component. page.tsx 에서 WeatherList 컴포넌트부분에 위와같은 에러가 뜹니다.. @types/react 를 18.2.8 버전으로 바꿔줘도 해결이안되는데 저와 같은분 계실까요?

권혁진 · Answer

return 구문 안에 컴포넌트를 포함시키게 되면 포함된 컴포넌트 에서 리턴해주는 jsx 를 출력하게 됩니다

작성하신 코드는 api 호출을 하는 코드이므로 return 구문안에 컴포넌트 형태로 import 하는게 아닌 return 구문 위에서 함수 호출 방식으로 호출을 하셔야 할듯 합니다

김병훈 · Answer

비슷한 케이스가 있을까싶어 검색을 해봤는데요.
타입스크립트가 Promise<JSX.Element>를 이해하지 못해서, 발생하는 문제라는 얘기가 있더라고요.
에러가 발생은 하지만, 실행에 문제가 없다면 타입스크립트 버전을 한번 확인해보시면 좋을 것 같습니다.
https://github.com/vercel/next.js/issues/42292

공식문서도 살펴보니, typescript 5.1.3 / @types/react 18.2.8 이상으로 권장하고 있네요.
https://nextjs.org/docs/app/building-your-application/configuring/typescript#async-server-component-typescript-error