"use client" // React Hook은 클라이언트에서만 동작하기 때문에

 

 

 

Ecmascript file had an error ./src/app/post/[id]/page.tsx (4:10) Ecmascript file had an error 2 | import { notFound } from "next/navigation"; 3 | import { posts } from "@/data"; > 4 | import { useState } from "react"; | ^^^^^^^^ 5 | import { v4 as uuidv4 } from "uuid"; 6 | 7 | interface PostPageProps { You're importing a component that needs useState. This React hook only works in a client component. To fix, mark the file (or its parent) with the "use client" directive.

 

 

useState 나 useEffect 같은 React Hook은 클라이언트에서만 동작하는데

Next.js 13 app/ 디렉토리에서는 기본적으로 컴포넌트가 서버에서 렌더링 되기 때문에

 

✔ 1번 방법

"use client"를 페이지 상단에 써주면 에러 없어짐

 

 

✔ 2번째 방법

서버 컴포넌트 안에서 Hook이 필요하면 Client 컴포넌트를 만들어서 import 하는 방법

 

 

 

Invalid page configuration ./src/app/post/[id]/page.tsx Invalid page configuration Page "src/app/post/[id]/page.tsx" cannot use both "use client" and export function "generateStaticParams()".

 

🔍 보통 1번 방법으로 쓰면 되는데 1번 방법을 써도 에러나는 경우

=> generateStaticParams나 getStaticProps 같은 서버 전용 함수를 사용할 수 없음

 

내 페이지에선 저걸 쓰고 있어서 2번 방법으로 해결