인프런 커뮤니티 질문&답변

// import "../styles/globals.css";

import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
import type { AppProps } from "next/app";

export default function App({ Component }: AppProps): JSX.Element {
  const client = new ApolloClient({
    uri: "http://backend-example.codebootcamp.co.kr/graphql",
    cache: new InMemoryCache(), //컴퓨터의 메모리에다가 백엔드에서 받아온 데이터 임시로 저장해 놓기 => 나중에 더 자세히 알아보기
  });
  //graphql 셋팅

  return (
    <div>
      <div>
        ============여기는 APP.js 컴포넌트 시작부분 입니다==============
      </div>
      <ApolloProvider client={client}>
        <Component />
      </ApolloProvider>
      <div>============여기는 APP.js입니다==============</div>
    </div>
  );
}

코드이고 Component에 빨간줄이 그어져서 마우스를 올려보니

'Component'은(는) JSX 구성 요소로 사용할 수 없습니다.
Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type.
'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'ElementType' 형식에 할당할 수 없습니다.
'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' 형식은 'new (props: any) => Component<any, any, any>' 형식에 할당할 수 없습니다.
구문 시그니처 반환 형식 'Component<{}, any, any>' 및 'Component<any, any, any>'이(가) 호환되지 않습니다.
'render()'에서 반환되는 형식은 해당 형식 간에 호환되지 않습니다.
'React.ReactNode' 형식은 'import("c:/Users/82109/OneDrive/\uBC14\uD0D5 \uD654\uBA74/codecamp-frontend-mentee/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode' 형식에 할당할 수 없습니다.
'{}' 형식은 'ReactNode' 형식에 할당할 수 없습니다.ts(2786)

(parameter) Component: NextComponentType<NextPageContext, any, {}>

라고 나오는데 실행해도 크게 문제는 없는거 같은데 ts로 바꾸면서 타입을 설정해주지 않아서 나오는 warning같은 느낌인건지 궁굼해서 질문 남깁니다.

항상 좋은강의 감사드립니다!