[Error] Uncaught Error: ReactServerComponentsError:

프로젝트를 하다가 오류가 떠서 또 공유를 하려고 한다 ~!

오늘의 오류

Uncaught Error: ReactServerComponentsError:

이렇게 떠서 검색해봤더니

Stack overflow에 바로 나와있었다

해결

next.js는 SSR즉 서버사이드 렌더링인데 react에서 사용하는 useState는
클라이언트 측에서 렌더링 된다.

import { useState } from "react";

export default function Card() {
  const [state, setState] = useState("");

  return <></>;
}

요런식으로 useState를 쓸때는

"use client"; // This is a client component 👈🏽

import { useState } from "react";

export default function Card() {
  const [state, setState] = useState(""); // I can use client hooks 👈🏽

  return <></>;
}

이런식으로

"use client"; 

꼭 붙여주기 ~! 🤎