Next.js 클릭 이벤트 적용이 안될때 해결 방법

아래와 같이 카운터 컴포넌트를 만들어서 사용하려고 하는데

버튼 클릭 이벤트가 작동하지 않아서, 원인을 찾아보았습니다.

import {useState} from "react";

export default function Counter() {
    const [count, setCount] = useState(0)

    return (
        <>
            <h1>Counter</h1>
            <p>count: {count}</p>
            <button onClick={() => setCount(count + 1)}>+</button>
        </>
    )
}

1. use client 추가 하기

next13 이후에는 기본적으로 서버 컴포넌트입니다.

DOM 이벤트 또는 React 훅을 사용하기 위해서는 컴포넌트 상단에

use client를 붙여 줘야 합니다.

use client

 

2. Node 16.14 버전 이상으로 버전 업데이트 

next.js 는 최소 조건이 node 16.14 버전 이상입니다.

node 버전이 16.14 미만일 경우에 이벤트가 동작하지 않습니다.

노드 버전 확인 후 업데이트가 필요합니다.

 

노드 버전 확인하기

node -v