JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 55
  • Score
    100M100P100Q76316F
  • License ISC

CLI para criar aplicações Next.js com configuração completa: Styled Components/Tailwind, projeto limpo/exemplos, testes opcionais, dependências adicionais e backend com Prisma/MySQL - Criado por RNT

Package Exports

  • rnt-next
  • rnt-next/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rnt-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

RNT Next CLI v4.0

CLI interativo para criar aplicações Next.js com configurações personalizadas. Criado por RNT.

🚀 Características

  • ✅ Interface interativa com 5 prompts de configuração
  • ✅ Next.js 15+ com App Router
  • ✅ TypeScript configurado
  • ✅ Escolha entre Styled Components ou Tailwind CSS
  • ✅ Projeto limpo (--empty) ou com exemplos
  • ✅ Dependências de teste opcionais (Jest + Testing Library)
  • ✅ Pacote de dependências adicionais opcional
  • ✅ Backend com Prisma e MySQL opcional
  • ✅ Redux Toolkit para gerenciamento de estado
  • ✅ ESLint + Prettier configurados
  • ✅ Estrutura de componentes organizada
  • ✅ ColorUtils para geração de variantes de cores HSL
  • ✅ Middleware para controle de autenticação
  • ✅ Providers configurados
  • ✅ Arquivo .env com variáveis de ambiente

📦 Instalação

Uso direto com NPX (Recomendado)

npx rnt-next meu-projeto

Instalação global

npm install -g rnt-next
rnt-next meu-projeto

🛠️ Uso

Criação interativa

npx rnt-next meu-projeto

O CLI fará 5 perguntas antes de criar o projeto:

  1. 🎨 CSS: Styled Components ou Tailwind CSS
  2. 📦 Projeto: Limpo (--empty) ou com exemplos
  3. 🧪 Testes: Instalar Jest + Testing Library ou não
  4. 📚 Deps. Adicionais: Instalar pacote extra ou não
  5. 🗄️ Backend: Instalar Prisma + MySQL ou não

Após confirmar as configurações, o projeto será criado automaticamente.

📋 Configurações Disponíveis

1️⃣ Biblioteca de CSS

  • Styled Components: CSS-in-JS com temas personalizáveis e ColorUtils
  • Tailwind CSS: Framework CSS utilitário

2️⃣ Tipo de Projeto

  • Limpo (--empty): Projeto vazio, apenas estrutura básica
  • Com exemplos: Inclui header, footer, páginas de exemplo e estrutura de rotas

3️⃣ Dependências de Teste

  • Sim: Jest, Testing Library, configurações e testes de exemplo + Store com preloaded state
  • Não: Projeto sem dependências de teste + Store simples

4️⃣ Dependências Adicionais

  • Sim: React Hook Form, Zod, iMask, React Hot Toast, Framer Motion, React Icons
  • Não: Apenas dependências essenciais

5️⃣ Backend com Prisma

  • Sim: Prisma, @prisma/client, schema configurado, model User básico
  • Não: Apenas frontend

📁 Estrutura do projeto

Projeto Limpo (--empty)

meu-projeto/
├── src/
│   ├── app/
│   │   ├── layout.tsx (básico)
│   │   ├── page.tsx (página vazia do Next.js)
│   │   └── globals.css (apenas se Tailwind)
│   ├── components/
│   │   ├── ui/
│   │   └── providers.tsx
│   ├── lib/ (se Styled Components)
│   │   └── styled-components-registry.tsx
│   ├── redux/
│   │   ├── store.ts (simples ou com preloaded state)
│   │   └── slices/
│   │       └── authSlice.ts
│   ├── styles/
│   │   ├── globalStyles.tsx (se Styled Components)
│   │   └── theme.ts (com ColorUtils)
│   ├── utils/
│   │   └── colorUtils.ts
│   ├── hooks/
│   ├── types/
│   └── middleware.ts
├── prisma/ (se backend escolhido)
│   └── schema.prisma (com model User e comentários)
├── __tests__/ (se testes habilitados)
├── .env (com variáveis configuradas)
├── next.config.js
├── jest.config.js (se testes habilitados)
├── tailwind.config.js (se Tailwind)
├── tsconfig.json
└── package.json

Projeto com Exemplos

meu-projeto/
├── src/
│   ├── app/
│   │   ├── (private)/
│   │   │   └── layout.tsx
│   │   ├── (public)/
│   │   │   ├── layout.tsx
│   │   │   ├── loading.tsx (⚠️ deletável)
│   │   │   └── not-found.tsx (⚠️ deletável)
│   │   ├── layout.tsx (com header/footer)
│   │   ├── page.tsx (página de exemplo)
│   │   └── globals.css (apenas se Tailwind)
│   ├── components/
│   │   ├── layout/
│   │   │   ├── header/
│   │   │   │   └── Header.tsx (⚠️ deletável)
│   │   │   └── footer/
│   │   │       └── Footer.tsx (⚠️ deletável)
│   │   ├── ui/
│   │   └── providers.tsx
│   ├── lib/ (se Styled Components)
│   │   ├── styled-components-registry.tsx
│   │   └── prisma.ts (se backend escolhido)
│   ├── redux/
│   │   ├── store.ts (simples ou com preloaded state)
│   │   └── slices/
│   │       └── authSlice.ts
│   ├── styles/
│   │   ├── globalStyles.tsx (se Styled Components - atualizado)
│   │   └── theme.ts (com ColorUtils)
│   ├── utils/
│   │   └── colorUtils.ts
│   ├── hooks/
│   ├── types/
│   └── middleware.ts
├── prisma/ (se backend escolhido)
│   └── schema.prisma (com model User e comentários)
├── __tests__/ (se testes habilitados)
│   └── page.test.tsx (⚠️ deletável)
├── .env (com variáveis configuradas)
├── next.config.js
├── jest.config.js (se testes habilitados)
├── tailwind.config.js (se Tailwind)
├── tsconfig.json
└── package.json

🎨 Tecnologias incluídas

Core (Sempre incluído)

  • Next.js 15+ - Framework React com App Router
  • TypeScript - Tipagem estática
  • ESLint - Linting configurado
  • Redux Toolkit - Gerenciamento de estado
  • Lucide React - Ícones
  • ColorUtils - Utilitários para geração de variantes de cores HSL

Styling (Escolha durante instalação)

  • Styled Components - CSS-in-JS com temas, SSR e ColorUtils integrado
  • Tailwind CSS - Framework CSS utilitário

Testes (Opcional)

  • Jest - Framework de testes
  • Testing Library - Utilitários para testes React
  • Jest Environment JSDOM - Ambiente de testes DOM

Dependências Adicionais (Opcional)

  • React Hook Form - Formulários performáticos
  • Zod - Validação de esquemas TypeScript
  • iMask - Máscaras de input
  • React Hot Toast - Notificações
  • Framer Motion - Animações
  • React Icons - Biblioteca de ícones

Backend (Opcional)

  • Prisma - ORM para banco de dados
  • @prisma/client - Cliente do Prisma
  • MySQL - Banco de dados configurado

Desenvolvimento

  • Prettier - Formatação de código
  • VS Code Settings - Configurações do editor
  • Middleware - Controle de autenticação e rotas
  • Providers - Contextos globais configurados

⚙️ Configurações incluídas

Next.js

  • App Router habilitado
  • Suporte a Styled Components (se escolhido)
  • Configurações de imagem otimizadas
  • Flag --empty (se projeto limpo escolhido)

ESLint + Prettier

  • Configuração otimizada para Next.js
  • Regras para TypeScript e React
  • Formatação automática no save

VS Code

  • Configurações de workspace
  • Formatação automática
  • Extensões recomendadas

Styled Components (se escolhido)

  • Configuração para SSR
  • Registry para Next.js 15+
  • GlobalStyles.tsx atualizado com ColorUtils
  • Temas claro/escuro
  • Componentes styled pré-configurados

Tailwind CSS (se escolhido)

  • Configuração completa
  • Classes utilitárias personalizadas
  • Suporte a dark mode

Redux

  • Store configurada condicionalmente
  • AuthSlice incluído
  • Middleware padrão
  • Tipagem TypeScript

Jest (se escolhido)

  • Configuração para Next.js
  • Setup para Testing Library
  • Testes de exemplo incluídos

Prisma (se escolhido)

  • Schema configurado com model User
  • Comentários explicativos
  • Configuração do cliente
  • Suporte a MySQL

🚀 Scripts disponíveis

npm run dev      # Servidor de desenvolvimento
npm run build    # Build de produção
npm run start    # Servidor de produção
npm run lint     # Executar ESLint
npm run lint:fix # Corrigir problemas do ESLint
npm test         # Executar testes (se instalados)
npm run test:watch # Executar testes em modo watch (se instalados)

🗄️ Comandos do Prisma (se backend escolhido)

# Configurar DATABASE_URL no .env primeiro
npx prisma db push      # Criar banco e tabelas
npx prisma generate     # Gerar Prisma Client
npx prisma studio       # Visualizar banco no navegador
npx prisma db pull      # Importar estrutura de banco existente
npx prisma migrate dev  # Criar e aplicar migrations

📝 Personalização

Arquivos Deletáveis (apenas em projetos com exemplos)

Os arquivos marcados com ⚠️ ARQUIVO DELETÁVEL podem ser removidos:

  • src/app/page.tsx - Página inicial de exemplo
  • src/components/layout/header/Header.tsx - Header de exemplo
  • src/components/layout/footer/Footer.tsx - Footer de exemplo
  • src/app/(public)/loading.tsx - Loading de exemplo
  • src/app/(public)/not-found.tsx - 404 de exemplo
  • __tests__/page.test.tsx - Testes de exemplo

ColorUtils

Use o arquivo src/utils/colorUtils.ts para gerar variantes de cores:

import { colorHSLVariants } from "@/utils/colorUtils";

const myColor = colorHSLVariants(220, 80, 50);
// Retorna: base, light, light02, light04, light08, light20, light30, light40, light50
//          dark, dark02, dark04, dark08, dark20, dark30, dark40, dark50

Temas

Edite src/styles/theme.ts para personalizar cores e breakpoints. O arquivo já inclui ColorUtils integrado.

Middleware

Configure rotas públicas e privadas em src/middleware.ts.

Styled Components

Se você escolheu Styled Components:

  • Edite src/styles/globalStyles.tsx para estilos globais (atualizado)
  • Use os temas em src/styles/theme.ts (com ColorUtils)
  • O arquivo styled-components-registry.tsx é obrigatório para SSR

Tailwind CSS

Se você escolheu Tailwind CSS:

  • Edite src/app/globals.css para estilos globais
  • Use tailwind.config.js para personalizar o tema

Redux

  • Store configurado condicionalmente baseado na escolha de testes
  • AuthSlice incluído por padrão
  • Adicione seus slices em src/redux/slices/

Prisma (se escolhido)

  • Configure DATABASE_URL no arquivo .env
  • Edite prisma/schema.prisma para adicionar models
  • Use src/lib/prisma.ts para conexões

🆕 Novidades da versão 4.0

  • ✅ Remoção da pergunta sobre Turbopack (comando Next.js já pergunta)
  • ✅ Remoção do experimental turbo (não mais suportado)
  • ✅ ColorUtils integrado para geração de variantes de cores HSL
  • ✅ GlobalStyles.tsx atualizado com novos componentes styled
  • ✅ Theme.ts atualizado com ColorUtils integrado
  • ✅ Store condicional baseado na escolha de ambiente de teste
  • ✅ Estrutura de rotas com (private) e (public)
  • ✅ Middleware para controle de autenticação
  • ✅ Providers configurados
  • ✅ Arquivo .env com variáveis de ambiente
  • ✅ Backend opcional com Prisma e MySQL
  • ✅ Arquivos .styles condicionais apenas se Styled Components

🎯 Casos de Uso

Projeto Full-Stack com Backend

CSS: Styled Components
Projeto: Com exemplos
Testes: Sim
Deps. Adicionais: Sim
Backend: Sim (Prisma + MySQL)

Projeto Frontend Limpo

CSS: Tailwind CSS
Projeto: Limpo (--empty)
Testes: Não
Deps. Adicionais: Sim
Backend: Não

Projeto de Aprendizado

CSS: Styled Components
Projeto: Com exemplos
Testes: Sim
Deps. Adicionais: Não
Backend: Não

🤝 Contribuição

  1. Fork o projeto
  2. Crie uma branch para sua feature
  3. Commit suas mudanças
  4. Push para a branch
  5. Abra um Pull Request

📄 Licença

ISC License

🆘 Suporte

Para problemas ou dúvidas:

  1. Verifique se todas as dependências estão instaladas
  2. Certifique-se de estar usando Node.js 18+
  3. Execute npm run lint para verificar problemas de código
  4. Se testes estão habilitados, execute npm test para verificar funcionamento
  5. Se backend está habilitado, configure DATABASE_URL no .env

👤 Autor

Criado com 💙 por RNT

RNT Next CLI v4.0 - Configure seu projeto Next.js do seu jeito, agora com backend!