Lesson Next.js

📖 Descrição

Este é um projeto de aprendizado Next.js que demonstra conceitos fundamentais do framework, incluindo roteamento, componentes, middleware, Server Actions e muito mais.

🧭 Guia de Navegação (Índice)

• 🎯 Sobre o Projeto
• 📸 Ilustração
• 🚀 Tecnologias Utilizadas
• 📁 Estrutura do Projeto
• 💻 Instalação e Execução
• ✨ Funcionalidades
• 🛣️ Rotas Disponíveis
• 🧩 Componentes
• 🛡️ Middleware
• 🔄 Estratégias de Cache
• 📄 Licença

🎯 Sobre o Projeto

Este projeto foi desenvolvido para ensinar e demonstrar os principais conceitos do Next.js 15, incluindo:

• App Router
• Server Components e Client Components
• Server Actions
• Middleware para autenticação
• Static Site Generation (SSG)
• Incremental Static Regeneration (ISR)
• API Routes
• Tratamento de erros e páginas 404

📸 Ilustração

• HOME:

• POSTS:

• POST:

🚀 Tecnologias Utilizadas

• Next.js 15.4.1 - Framework React para produção
• React 19.1.0 - Biblioteca para interfaces de usuário
• TypeScript - Superset tipado do JavaScript
• Tailwind CSS 4 - Framework CSS utilitário
• PostCSS - Ferramenta para transformação CSS

📁 Estrutura do Projeto

lesson/
├── src/
│   ├── app/
│   │   ├── api/info/           # API Route para informações de perfil
│   │   ├── posts/              # Páginas de posts
│   │   │   └── [id]/           # Página dinâmica de post individual
│   │   ├── dashboard/          # Página protegida do dashboard
│   │   ├── contatos/           # Página de contatos
│   │   ├── layout.tsx          # Layout raiz da aplicação
│   │   ├── page.tsx            # Página inicial
│   │   ├── not-found.tsx       # Página 404 customizada
│   │   └── globals.css         # Estilos globais
│   ├── components/
│   │   ├── header/             # Componente de cabeçalho
│   │   └── button/             # Componente de botão interativo
│   └── middleware.ts           # Middleware de autenticação
├── public/                     # Arquivos estáticos
├── package.json               # Dependências e scripts
├── tsconfig.json              # Configuração TypeScript
├── next.config.ts             # Configuração Next.js
└── postcss.config.mjs         # Configuração PostCSS

💻 Instalação e Execução

Pré-requisitos

• Node.js (versão 18 ou superior)
• npm, yarn, pnpm ou bun

Instalação

1. Clone o repositório:

   git clone https://github.com/0nF1REy/lesson-next-js.git
   cd lesson-next-js

2. Navegue até a pasta do projeto:

   cd lesson

3. Instale as dependências:

   npm install
   
   # ou
   yarn install
   
   # ou
   pnpm install

Execução

Para executar o projeto em modo de desenvolvimento:

npm run dev

# ou
yarn dev

# ou
pnpm dev

Abra http://localhost:3000 no seu navegador para ver o resultado.

✨ Funcionalidades

🏠 Página Inicial

• Geração de números aleatórios
• Revalidação automática a cada 60 segundos
• Meta tags otimizadas para SEO

📝 Sistema de Posts

• Lista de posts fetchados da API DummyJSON
• Página individual para cada post
• Sistema de loading com Suspense
• Cache e revalidação configurados
• Busca de posts por usuário

🔐 Dashboard Protegido

• Middleware de autenticação
• Redirecionamento automático para não autenticados

🎨 Componentes Interativos

• Botão com estado local (useState)

🛣️ Rotas Disponíveis

Rota	Descrição	Tipo
/	Página inicial	Static
/posts	Lista de posts	ISR (60s)
/posts/[id]	Post individual	Dynamic
/dashboard	Dashboard protegido	Protected
/contatos	Página de contatos	Static
/api/info	API com dados de perfil	API Route

🧩 Componentes

HeaderComponent

Localizado em src/components/header/header.tsx

• Navegação responsiva
• Links para todas as páginas
• Design com Tailwind CSS

ButtonComponent

Localizado em src/components/button/button.tsx

• Componente client-side
• Gerenciamento de estado com useState
• Funcionalidade de alteração de nome

🛡️ Middleware

O middleware em src/middleware.ts implementa:

• Proteção de rotas do dashboard
• Redirecionamento para usuários não autenticados
• Verificação de autenticação (atualmente configurado como false para demonstração)

🔄 Estratégias de Cache

• ISR: Posts revalidados a cada 60 segundos
• Force Cache: Cache forçado para dados de posts
• Revalidate: Configuração de revalidação personalizada

👤 Sobre o Desenvolvedor

Alan Ryan ☕ Peopleware | Tech Enthusiast | Code Slinger ☕ Apaixonado por código limpo, arquitetura escalável e experiências digitais envolventes Conecte-se comigo:

---

📫 Contribuir

Contribuições são muito bem-vindas! Se você deseja contribuir com o projeto, por favor, siga estes passos:

1. Faça um Fork do repositório.

2. Crie uma nova Branch para sua feature ou correção:

   git checkout -b feature/nome-da-feature

3. Faça suas alterações e realize o commit:

   git commit -m "feat: Adiciona nova feature"

4. Envie suas alterações para o seu fork:

   git push origin feature/nome-da-feature

5. Abra um pull request para a branch main do repositório original.

📚 Recursos Adicionais

• 📝 Como criar um Pull Request

• 💾 Padrão de Commits Convencionais

📜 Licença

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

ℹ️ Aviso de Licença: © 2025 Alan Ryan da Silva Domingues. Este projeto está licenciado sob os termos da licença MIT. Isso significa que você pode usá-lo, copiá-lo, modificá-lo e distribuí-lo com liberdade, desde que mantenha os avisos de copyright.

⭐ Se este repositório foi útil para você, considere dar uma estrela!