Olá, gostaria de um auxilio para a criação de rotas privadas usando NextJs. Todos os arquivos depositados dentro do diretório pages se tornam rotas acessiveis, em minha aplicação algumas destas devem ser acessiveissomente quando o usuário estiver logado. Atualmente estou usando useEffect para verificar se existe um objeto chamado username no sessionStorage, o código abaixo está na página de login e redireciona o usuário caso ele já esteja conectado:
useEffect(() => {
const session = sessionStorage.getItem('username');
if (session) {
router.push(router.query.followPage || '/');
}
}, [router]);
Esse método está longe de ser eficiente, e redireciona o usuário após o load inicial da página mostrando ao usuário componentes da tela, alem de ser mais lento no redirecionamento. Validações semelhantes há em outras páginas, nestas se username não existe o usuário é direcionado a página de login.
Encontrei algumas instruções para criar um HOC (Higher-Order Component) e envolver minhas páginas privadas com ele, isso parece promissor mas não consegui compreender como o autor propõe que os dados do usuário sejam validados, isso é, como a sessão do usuário é verificada pela função criada por ele checkUserAuthentication nesta fonte: https://medium.com/@eslamifard.ali/how-to-simply-create-a-private-route-in-next-js-38cab204a99c
Usar a função getInitialProps do next para verificar a autenticação do usuário no lado do servidor e redireciona-lo a partir dai parece eficiente, encontrei algumas fontes sugerindo passar um token no header da requisição mas de novo, não compreendi como isso funciona caso o usuário acesse a página diretamente pela url sem usar algum link interno da página.
Então qual é a melhor forma de criar rotas privadas com o NextJs?