Nesse módulo seremos introduzidos ao framework Chakra UI - um framework de interface declarativa. Também veremos como criar uma camada de cache para armazenar dados e melhorar a experiência no aplicativo.
Nesse módulo criaremos a interface de um painel administrativo contendo fluxo de autenticação, dashboard, listagem e cadastro usando Chakra UI no Next.js.
Interface declarativa é um método de escrever interface das aplicações. Na web temos isso presente com as classes (Tailwind) e com atributos em caso de frameworks (Theme UI, Chakra UI).
Existem alguns jeitos de criar um formulário em React. Um deles é utilizando o método "reativo", onde se utiliza estados para gerenciar um formulário. O outro, é utilizando via Ref - com os hooks useRef ou com uma biblioteca que terceiriza esse trabalho para gente (React Hook Form, Formik etc).
Nesse módulo vamos utilizar o React Query para melhorar a experiência de uso da nossa aplicação criando uma camada de cache de dados entre o front-end e back-end.
Dentro do React, existem diversas bibliotecas que auxiliam na hora de fazer requisições Client-side. As libs SWR e React Query fazem isso muito bem. Além de gerenciar resultados e erros, eles criam um cache para melhorar a performance e a usabilidade da aplicação.
Nesse módulo vamos entender como criar um processo completo de autenticação, autorização e refresh token dentro do React com Next.js permitindo controlar o acesso à rotas e componentes tanto no client-side quando server-side.
O NextJS oferece o Next Auth como um método de autenticação e facilita a comunicação entre o servidor e o cliente. Porém, o Next Auth não é tão amigável quando se trata de backend próprio, por isso nesse módulo vamos criar um aplicativo que suporte uma API que sirva um JWT e um Refresh Token.
Precisamos guardar os tokens fornecidos pela aplicação para prevenir que o usuário tenha que se autenticar diversas vezes na aplicação. Para isso, temos alguns lugares para guardar esses dados: