Reactjs – onClick and console.log on Nextjs is not working

I’m learning NEXT and there are functions that don’t work

"use client"

import { useState } from 'react'
export default function idk() {
    const [counter,setCounter]=useState(0)
    const add=()=>{
        setCounter(prev=>prev+1)
    }
    return(
            <div onClick={add}>
               {counter}
            </div>
    )
}

When the code is run, it creates the initial state of the counter but there is no change after that

I thought the problem was in the Hooks, but even the console doesn’t work

"use client"

export default function idk() {
    const ttc=()=>{ 
       console.log("i try to console")
    }
    return(
            <button onClick={ttc}> CLICK me </button >
    )
}

routing The page does not redirect directly, but rather reloads as if I were using several html pages

<Link href="/about"> about </Link>

This problem has been occurring since the first use of next

I do not think that the problem is in the code, but rather in my version, and there are notes that may help you understand my problem :

The same code works in react.js

When I create an application, I choose src in the settings

Sometimes the page becomes white and does not show the problem

Node version: v17.1.0

npm version:8.1.2

next version: @latest

I don’t know, but I tried to create the project again and some problems that I did not mention went away