nextjs v14 data fetch

nextjs가 14버전이 되면서 서버컴포넌트는 서버에서 데이터를 fetch해서 fetch해온 결과물을 client로 보내줄 수 있게 되었다.

 

import Image from 'next/image';
import { get_loa_info } from 'src/api/game';

export const GameChar = async () => {
  const loa_character = await get_loa_info.get_character();

  return (
    <div>
      <div>{loa_character.ArmoryProfile.CharacterName}</div>
      <Image
        alt='로아 캐릭터'
        src={loa_character.ArmoryProfile.CharacterImage}
        width={102}
        height={108}
      />
    </div>
  );
};

 

이렇게 컴포넌트안에서 http request를 바로 때리고 await을 사용하여 동기적인 코딩이 가능해 졌는데..

 

문제는 해당 컴포넌트는 Promise<JSX.Element> 타입이다. 때문에 typescript의 버전이 낮다면, 해당 컴포넌트의 타입이 이상하다는 에러를 볼 수 있다.

 

Type 'Promise<Element>' is missing the following properties from type 'Element': type, props, key

 

본인의 경우 허스키가 커밋시에 타입체크를 쫙 하는데, 거기서 걸렸다.

 

해당 에러는 타입스크립트의 버전을 올리면서 해결 할 수 있었다.

 

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-5-1.html#decoupled-type-checking-between-jsx-elements-and-jsx-tag-types

Documentation - TypeScript 5.1

 

해당 이슈를 해결하기 위한 공식문서의 내용으로는 Typescript의 버전을 5.1.3 이상으로 올리고, @type/react의 버전을 18.2.8 이상으로 올리면 된단다.

 

이제 커밋할 수 있게 되었다.