Aplicativo de Autenticação Next.js

Este é um aplicativo Next.js que implementa autenticação usando NextAuth.js. O aplicativo possui rotas protegidas que exigem que os usuários estejam autenticados para acessar determinadas páginas.

Estrutura do Projeto

nextjs-auth-app
├── components
│   ├── Layout.js          # Layout component for consistent structure
│   ├── Navbar.js          # Navigation bar component
│   └── ProtectedRoute.js   # Component to protect routes
├── pages
│   ├── _app.js            # Custom App component
│   ├── _document.js       # Custom Document structure
│   ├── api
│   │   └── auth
│   │       └── [...nextauth].js # NextAuth.js configuration
│   ├── dashboard.js       # Protected Dashboard page
│   ├── index.js           # Landing page
│   ├── login.js           # Login page
│   └── profile.js         # User Profile page
├── public                 # Static assets
├── styles
│   ├── Home.module.css    # CSS module for Home component
│   └── globals.css        # Global CSS styles
├── utils
│   └── auth.js            # Utility functions for authentication
├── .env.local             # Environment variables
├── next.config.js         # Next.js configuration
├── package.json           # npm configuration
└── README.md              # Project documentation

Começando

Para começar com este projeto, siga estes passos:

1. Clone o repositório:

   root@kitploit:~

   git clone <repository-url>
   cd nextjs-auth-app
   

2. Instale as dependências:

   root@kitploit:~

   npm install
   

3. Configure as variáveis de ambiente: Crie um arquivo .env.local no diretório raiz e adicione suas variáveis de ambiente, como chaves de API e segredos.

4. Execute o servidor de desenvolvimento:

   root@kitploit:~

   npm run dev
   

5. Abra seu navegador: Navegue até http://localhost:3000 para visualizar o aplicativo.

Funcionalidades

• Autenticação: Os usuários podem fazer login e acessar rotas protegidas.
• Rotas Protegidas: O componente ProtectedRoute garante que apenas usuários autenticados possam acessar determinadas páginas, como o Dashboard e o Perfil.
• Design Responsivo: O aplicativo é projetado para ser responsivo e fácil de usar.

Contribuição

Se você gostaria de contribuir com este projeto, faça um fork do repositório e envie um pull request com suas alterações.

Licença

Este projeto está licenciado sob a Licença MIT. Consulte o arquivo LICENSE para obter mais detalhes.