I need to check for cookies on reload in Nextjs – Blancer.com Tutorials and projects

I need to do the following:
After reload check if the browser contain cookies
I am doing this in Next.js so there is a way to make this by applying “use client” in the root layout and use useEffect(), but that give me errors.

After that solution didn’t work I did a hook function to execute when the layout mount. But I dont know if that is the right approach.

first approach:
This return an error where the className does not match with the one in the server side. But does not break the app.

"use client"

import {Montserrat} from "next/font/google"
import "../sass/index.scss"
import ProviderWrap from "@/redux/provider"
import { useEffect } from "react"



export const metadata = {
  title: 'Listil',
  description: 'Generated by Next.js',
}

const montserrat = Montserrat({
  weight:["300", "500", "600", "700" ],
  style: ["italic", "normal"],
  subsets: ["latin"]
})

export default function RootLayout({ children }) {


  useEffect(()=> {
    console.log("mounted, ready to check for cookies")
  })

  return (
      <html lang="en">
        <head>
          <link rel="favicon" href="../favicon/favicon.ico" />
          <link rel="apple-touch-icon" sizes="152x152" href="../favicon/apple-touch-icon.png"/>
          <link rel="icon" type="image/png" sizes="32x32" href="../favicon/favicon-32x32.png"/>
          <link rel="icon" type="image/png" sizes="16x16" href="../favicon/favicon-16x16.png"/>
          <link rel="manifest" href="../favicon/site.webmanifest"/>
          <link rel="mask-icon" href="../favicon/safari-pinned-tab.svg" color="#5bbad5"/>
          <meta name="msapplication-TileColor" content="#00aba9"/>
          <meta name="theme-color" content="#ffffff"/>
        </head>
          <ProviderWrap>
            <body className={montserrat.className}>
              {children}
            </body>
          </ProviderWrap>
      </html>
    )
}

second approach:
This works fine, but I don’t think this is the right way to do it.

import {Montserrat} from "next/font/google"
import "../sass/index.scss"
import ProviderWrap from "@/redux/provider"
import rememberUserCheck from "./utils/rememberCheck"


export const metadata = {
  title: 'Listil',
  description: 'Generated by Next.js',
}

const montserrat = Montserrat({
  weight:["300", "500", "600", "700" ],
  style: ["italic", "normal"],
  subsets: ["latin"]
})

export default function RootLayout({ children }) {

  rememberUserCheck()

  return (
      <html lang="en">
        <head>
          <link rel="favicon" href="../favicon/favicon.ico" />
          <link rel="apple-touch-icon" sizes="152x152" href="../favicon/apple-touch-icon.png"/>
          <link rel="icon" type="image/png" sizes="32x32" href="../favicon/favicon-32x32.png"/>
          <link rel="icon" type="image/png" sizes="16x16" href="../favicon/favicon-16x16.png"/>
          <link rel="manifest" href="../favicon/site.webmanifest"/>
          <link rel="mask-icon" href="../favicon/safari-pinned-tab.svg" color="#5bbad5"/>
          <meta name="msapplication-TileColor" content="#00aba9"/>
          <meta name="theme-color" content="#ffffff"/>
        </head>
          <ProviderWrap>
            <body className={montserrat.className}>
              {children}
            </body>
          </ProviderWrap>
      </html>
    )
}

This is the function used in the 2nd

export default function rememberUserCheck(cookie) {
    console.log("mounted, ready to check for cookies")
}

Is there any other way to check the cookies on reload?.