짧음) Next.js 에러 "~ 값을 참조하지만, 여기서는 형식으로 사용되고 있습니다."

 회원가입, 로그인을 구현하던 중, 로그인한 유저 정보를 확인해야 하기에 session을 확인해야 했다. 그리고 client component에서는 SessionProvider를 통해 session을 확인할 수 있다. 그래서 다음과 같이 layout.ts를 작성했다. (사실 코딩애플 강의의 코드를 그대로 가져왔다.)

// layout.ts

"use client";

interface IProps {
  children: React.ReactNode;
}

import React from "react";
import { SessionProvider } from "next-auth/react";

export default function Layout({ children }: IProps) {
  return <SessionProvider>{children}</SessionProvider>;
}

그런데 return의 SessionProvider에서 이런 에러가 발생했다.

 

코딩애플에서 강의를 수강하면서 숙제를 할 때는 발견하지 못한 에러였다. 그래서 몇 분동안 헤매다가 일단 해결법을 알아냈다.

 

 현재 파일 이름이 layout.ts인데 layout.tsx로 바꾸었더니 에러가 해결되었다. 이 이유에 대해 구글링을 했지만 찾을 수가 없어서 혼자 생각을 해 보았다. 확장자가 .ts일 경우(자바스크립트는 .js), JSX를 사용하지 않는 코드가 담긴 파일이다. 그리고 확장자가 .tsx(자바스크립트는 .jsx)인 경우는 JSX를 사용하는 코드가 담긴 파일이다. 그리고 현재 layout은 JSX를 사용한다. 그래서 확장자를 .tsx로 바꿔줘야 했던 것 같다.