1.0.6 • Published 6 months ago

next-template-ecotech-amazonia v1.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
6 months ago

Aqui está um README.md bem estruturado para documentar o seu template Next.js. Ele inclui informações sobre as funcionalidades, dependências, estrutura do projeto e como usá-lo. 🚀


📜 README.md

# 🚀 Next.js Template com Configuração Automática

Este é um **template automatizado para Next.js**, configurado com **React Query, Axios, JWT, Zod, Zustand, React Hook Form, Orval e ShadCN**.  
Ele inclui uma estrutura de pastas organizada e arquivos pré-configurados para acelerar o desenvolvimento de aplicações Next.js.

---

## 📌 **Recursos Principais**
✅ **Criação Automática do Projeto**: Usa `create-next-app` com TypeScript e ESLint.  
✅ **Dependências Instaladas**: Configura automaticamente bibliotecas essenciais.  
✅ **Middleware Padrão**: Implementa autenticação com JWT e redirecionamento.  
✅ **Gerenciamento de Cookies**: Funções utilitárias para armazenar e recuperar tokens.  
✅ **Configuração de API**: Axios pré-configurado com interceptores de autenticação.  
✅ **Geração de API com Orval**: Suporte para Swagger/OpenAPI.  
✅ **ShadCN UI**: Estilização moderna com componentes pré-prontos.  

---

## 📦 **Dependências Instaladas**
O script automaticamente instala as seguintes dependências:

### 🔹 **Dependências Principais**
- `@tanstack/react-query`
- `@tanstack/react-query-devtools`
- `axios`
- `jsonwebtoken`
- `zod`
- `zustand`
- `react-hook-form`
- `@types/jsonwebtoken`

### 🔹 **Dependências de Desenvolvimento**
- `@tanstack/eslint-plugin-query`
- `orval`

### 🔹 **Configuração Adicional**
- **ShadCN** para UI moderna (`npx shadcn@latest init`).

---

## 📂 **Estrutura do Projeto**
O script cria a seguinte estrutura dentro de `src/app/`:

src/app/ ├── favicon.ico ├── globals.css ├── layout.tsx ├── (private) │ ├── home │ │ └── page.tsx │ └── layout.tsx └── (public) ├── layout.tsx ├── login │ └── page.tsx ├── page.tsx └── register └── page.tsx

Além disso, o arquivo **`src/app/page.tsx`** é **removido automaticamente** para evitar conflitos.

---

## ⚡ **Como Usar**
### **1️⃣ Criar um Novo Projeto**
Você pode usar o template via **NPX** (sem precisar instalar globalmente):

```bash
npx next-template-cli meu-projeto

Ou instalar globalmente para uso recorrente:

npm install -g next-template-cli
create-next-template meu-projeto

2️⃣ Acesse o Projeto

cd meu-projeto
yarn dev

🔧 Configurações Incluídas

1️⃣ Middleware de Autenticação (src/middleware.ts)

O middleware protege rotas privadas e redireciona usuários sem autenticação.

  • Rotas públicas: "/", "/register", "/login"
  • Se autenticado, redireciona para "/home"
  • Se não autenticado, redireciona para "/"

2️⃣ Gerenciamento de Cookies (src/utils/setCookie.ts)

Funções para armazenar e recuperar o token de autenticação via cookies:

const setCookie = async (access_token: string) => { /* Armazena o token */ };
const getCookie = async () => { /* Recupera o token */ };
const clearAuthCookies = async () => { /* Remove o token */ };

3️⃣ Configuração de API (src/api/api.ts)

Axios configurado para interceptar requisições e adicionar o token JWT automaticamente.

import Axios from "axios";

const api = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

api.interceptors.request.use(async (config) => {
  const token = await getCookie();
  if (token) config.headers.Authorization = `Bearer ${token.value}`;
  return config;
});

4️⃣ Geração de API com Orval (orval.config.ts)

Orval gera automaticamente clientes de API a partir de um arquivo Swagger/OpenAPI.

export default defineConfig({
    api: {
        input: './swagger.json',
        output: {
            target: './src/api/generate',
            mode: 'tags-split',
            httpClient: 'axios',
            client: 'react-query',
            clean: true,
            baseUrl: process.env.NEXT_PUBLIC_API_URL,
            override: {
                mutator: { path: './src/api/api.ts', name: 'customInstance' },
            },
        }
    },
});

📌 Personalização

Caso queira modificar o template, edite o código no repositório e publique uma nova versão no NPM:

npm version patch  # Para pequenas atualizações
npm version minor  # Para novas funcionalidades
npm version major  # Para mudanças que quebram compatibilidade
git add .
git commit -m "Nova versão do template"
git push origin main
npm publish --access public

Agora, as pessoas poderão instalar a nova versão do seu template com:

npm update -g next-template-cli

📣 Contribuições

Se tiver sugestões de melhorias ou encontrar bugs, fique à vontade para abrir uma issue ou enviar um pull request no GitHub.


🎯 Resumo

✔ Template automatizado para projetos Next.js
✔ Instalação rápida via NPX
Middleware, API, cookies e estrutura organizada
Orval para geração de clientes de API
ShadCN para UI moderna

Agora você pode criar projetos Next.js completos em segundos! 🚀🔥

---
1.0.6

6 months ago

1.0.5

6 months ago

1.0.4

7 months ago

1.0.3

7 months ago

1.0.2

7 months ago

1.0.0

7 months ago