npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

next-template-ecotech-amazonia

v1.0.6

Published

Um CLI para criar projetos Next.js com configuração padrão

Readme

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! 🚀🔥


---