일단 내 환경은 다음과 같다
1. Next.js : 14.1.0
2. React : 18

1. 문제 확인

• 아무 생각 없이 개인 프로젝트를 하던 도중 아래와 같은 에러가 발생하였다
• 최초 확인은 일단 빌드 한번 해봐야지 하고 하다가 확인하였다

  Type error: '컴포넌트 명' cannot be used as a JSX component.
  Its type '() => void | Element' is not a valid JSX element type.
  Type '() => void | Element' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
  Type 'void | Element' is not assignable to type 'ReactNode'.

2. 문제가 발생한 부분

import Link from 'next/link'
import type { Metadata } from 'next'
import MyPage from '@/components/Auth/MyPage'

export const metadata: Metadata = {
  title: 'My Page',
  description: '사용자 마이 페이지 입니다.',
}

export default function Page() {
  return (
    <>
      <h1 className='text-2xl text-red-600 text-center font-bold py-4'>
        사용자 마이 페이지 입니다
      </h1>
      <MyPage />

      <div className='flex flex-row justify-center'>
        <>
          <Link
            href='/'
            className='text-center text-blue-500 font-bold bg-black h-10 py-2 rounded-xl w-1/4 my-2'
          >
            Go To Main
          </Link>
        </>
      </div>
    </>
  )
}

중 MyPage 컴포넌트 부분에서 발생하였다.
MyPage 의 경우 서버에서 데이터를 가져와서 보여주는 목적의 컴포넌트이다 (일반적인 서비스의 마이페이지)

2. 해결

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

이걸 문제가 발생한 컴포넌트 바로 윗 줄에 작성하여 일단 문제를 해결했다.