Fala @tiao, tudo certo?

Cara, estou EXATAMENTE no mesmo momento com o meu projeto por aqui hahah

Estudando aqui a fio, vi que tem algumas maneiras de você fazer isso, e depende de qual passo seu projeto está, e a sua facilidade com o NextJs.

A primeira é utilizando o NextAuth, acho que já ouviu falar.

• Com o NextAuth você pode implementar algumas formas de login, tanto social quanto com e-mail e senha, convencional. O ponto é que ele "facilita" a manipulação dos tokens/sessões, então nas suas rotas do Next, basta chamar a função useSession(), que vai te entregar sua sessão, onde deve estar armazenada a Role do usuário, e daí você decide de exibe o componente em tela ou não.

import { useSession } from "next-auth/react"

export default function Component() {
  const { data: session, status } = useSession()

  if (status === "authenticated" && session.user.role === "admin") {
    return <p>Signed in as {session.user.email}</p>
  }

  return <a href="/api/auth/signin">Sign in</a>
}

• A outra só setando o cookie no navegador do usuário e recuperando esse cookie nas páginas da mesma forma.

Segue exemplo que to usando na minha aplicação, em outro momento faço a autenticação do usuário e salvo o cookie no navegador. Depois vou recuperando esse cookie nas páginas que preciso privar para alguma role específica.

//componentex.tsx

export default function Painel() {

    const token = cookies().get('token')?.value ?? ""
    const decodedToken: {
        id: string,
        name: string,
        email: string,
        role: 'USER' | 'ADMIN',
        iat: number,
        exp: number
    } = jwtDecode(token)

    if (decodedToken.role == "USER") {
        redirect('/painel/inicio')
    }

    return //componente

Segue uns vídeos que estudei para deicidir como usar e como fazer:

https://www.youtube.com/watch?v=yCJH72nZ8DI https://www.youtube.com/watch?v=9bI3ihPg5j0