GovBR NextJS

Este projeto é uma aplicação Next.js que usa o Design System do Governo Brasileiro.

Também foi incluído o modelo de integração com o serviço de Single Sign-On (SSO) do Governo Brasileiro.

Pré-requisitos

• Node.js (versão 20.x)
• npm (versão 10.x)

Clonar o repositório

Para clonar o repositório, execute o seguinte comando no seu terminal:

git clone https://github.com/edsonmoretti/govbr-nextjs.git

Instalar dependências

Navegue até o diretório do projeto e instale as dependências necessárias:

cd govbr-nextjs
npm install

Configuração

O projeto utiliza variáveis de ambiente para configuração. Você pode encontrar um exemplo de configuração no arquivo .env.example. Copie este arquivo para um novo arquivo chamado .env:

cp .env.example .env

Em seguida, abra o arquivo .env e substitua os espaços reservados pelos seus valores reais:

NODE_ENV=development
NEXT_PUBLIC_API_URL=https://localhost/api

# GOVBR
NEXT_PUBLIC_GOVBR_URL_PROVIDER=https://sso.staging.acesso.gov.br
GOVBR_URL_SERVICE=https://api.staging.acesso.gov.br
GOVBR_REDIRECT_URI=<SUA_URL_DE_REDIRECIONAMENTO>
GOVBR_SCOPES=openid+email+phone+profile
GOVBR_CLIENT_ID=<ID_DA_APLICAÇÃO>
GOVBR_SECRET=<CHAVE_PRIVADA>

Iniciar a aplicação

Você pode iniciar a aplicação no modo de desenvolvimento com:

npm run dev

OBS.: O comando npm run dev inicia a aplicação com https e com o certificado auto-assinado. Caso queira iniciar a aplicação sem https, execute o comando npm run dev-http.

Para produção, primeiro construa a aplicação:

npm run build

Em seguida, inicie a aplicação:

npm start

Uso

Depois que a aplicação estiver em execução, você pode acessar https://localhost (ou seu host e porta configurados) em seu navegador. Você verá a página inicial da aplicação, onde poderá fazer login usando o serviço Gov.br SSO.

Contribuições

Contribuições são bem-vindas. Por favor, abra uma issue ou envie um pull request no GitHub.

Imagens

Tela completa com conteúdo

Menu aberto

Header com usuário logado

Exemplo de página de perfil

Conteúdo em tela pequena

Header Menu aberto em tela pequena

Profile Menu aberto em tela pequena