Async Server Component TypeScript 에러

nav바에서 로그인을 했을때 유저 정보를 출력하기 위해서

getSeverSession을 사용해서 불러왔다.

import React from "react";
import { SlNotebook } from "react-icons/sl";
import Link from "next/link";
import { IoIosCreate } from "react-icons/io";

import { getServerSession } from "next-auth";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import LoginBtn from "../LoginBtn";
const Navbar = async () => {
  let session = await getServerSession(authOptions);
  console.log(session);
  return (
    <nav className="shadow-md bg-blue-500 shadow-neutral-300 text-neutral-50 flex flex-row p-3 items-center gap-1">
      <SlNotebook className="text-2xl font-extrabold " />
      <Link href={"/"}>
        <h1 className="text-3xl font-semibold ">Posting</h1>
      </Link>
      <div className="ml-auto flex gap-5 mr-8 items-center justify-center">
        <Link href={"/write"} className="ml-auto text-3xl">
          <IoIosCreate />
        </Link>
        <LoginBtn />
      </div>
    </nav>
  );
};

export default Navbar;

async-await로 사용했는데 이때 부모 컴퍼넌트인 layout.tsx에서

Navbar'은(는) JSX 구성 요소로 사용할 수 없습니다.
해당 반환 형식 'Promise'은(는) 유효한 JSX 요소가 아닙니다.
'Promise' 형식에 'Element' 형식의 type, props, key 속성이 없습니다

이러한 에러가 나왔다.

에러에 대한 내용을 찾아본 결과

이 부분은 업스트림에서 작업중이라고 한다.

임시해결 방법으로

{/* @ts-expect-error Async Server Component */}

위 내용을 에러가 난 컴퍼넌트 태그에 입력하면 에러가 해결된다.

참고 내용은 아래 링크로 들어가면 나옵니다.

https://beta.nextjs.org/docs/configuring/typescript#async-server-component-typescript-error