nextjs: Warning: Prop `className` did not match. Server: “x” Client: “y”

This is my code:

export default function Nav() {
    const { userLogin } = useUser()
    console.log(userLogin)
    
    return (
        <nav className={styles.nav}>
            {!userLogin ? (
                <Link href={"/login"}><a className={`${styles.top}`}></a></Link>
            ) : (
                <Link href={"/profile"}><a className={`${styles.userLogged}`}></a></Link>
            )}
        </nav>
    )
}

And this is useUser:

export default function useUser(){
    var userLogin = false

    const cookies = parseCookies()
    if (cookies.token) {
        userLogin = true
    }

    return { userLogin }
}

So, if userLogin is false, everything is OK.

But if userLogin is true I get this error:

Warning: Prop `className` did not match. Server: "x" Client: "y"

This error show when I use cookies.

I don’t want to use next/dynamic. because dynamic reload component again on click.