Next.js 에서 Invalid hook call. Hooks can only be called inside of the body of a function component. 에러

React Hook의 규칙

1. 컴포넌트 함수 또는 커스텀 훅 내부에서만 호출 가능: ⇒ React Hook은 반드시 React 함수 컴포넌트 또는 커스텀 훅 내부에서 호출해야 함

2. 조건문, 반복문, 또는 비동기 함수 내부에서 호출 불가 ⇒ React Hook은 항상 컴포넌트의 최상위 레벨에서 호출되어야 함

원인

해결방법

const ProductsPage = async () => {
	const initialProducts = await getProducts(0)
  const [products, setProducts] = useState(initialProducts); // ❌ 에러 발생

const ProductsClient = ({ initialProducts }) => {
  const [products, setProducts] = useState(initialProducts);
 }

    useEffect(()=>{
        const getInitialProducts = async () => {
            const initialProducts = await getProducts(0)
            setTotalProducts(initialProducts)
        }
        getInitialProducts()
    },[])