npx advanzzze

npx advanzzze é um comando simples e útil para iniciar projetos utilizando a versão mais recente do Next.js, com alguns pacotes de utilidades pré-instalados e configurados.

Funcionalidades

Projetos

• [x] Criar projetos Next.js mais recente
  • [x] Suporte Javascript
  • [x] Suporte Typescript
• [x] Suporte para criação de aplicativos desktop com Tauri e Next.js
• [ ] Suporte para criação de aplicativos mobile

Utilidades

• [x] Plugin do Prettier de ordenação de classes para o Tailwind CSS
• [x] Adicionar a função cn para melhor aplicação de classes condicionais
  • Guia para utilização do comando.

Instalação

1. Crie a pasta do seu projeto.

2. Entre na pasta do projeto e use npx advanzzze.

3. Escolha seu tipo de projeto e preferências.

4. Siga qualquer instrução adicional.

5. Comece a programar.

Referências úteis

• Gerais

  • React
  • Next.js
  • Tailwind CSS

• Desktop

  • Tauri

Uso/Exemplos

cn

cn é uma função personalizada que utiliza clsx e tailwind-merge para, respectivamente, criar classes condicionalmente e juntá-las sem conflitos com o Tailwind CSS.

Utilização

cn('classes padrão', {
	'classes Condicinais': CondicaoUm,
	'classes Condicinais': CondicaoDois,
});

Exemplo de código

import cn from '@/utils/cn';

export default function Card({ bgColor, children }) {
	const isBlue = bgColor === 'blue';
	const isRed = bgColor === 'red';
	const isGreen = bgColor === 'green';

	return (
		<div
			className={cn('p-2 w-52 h-24 border border-black', {
				'bg-blue-500': isBlue,
				'bg-red-500': isRed,
				'bg-green-500': isGreen,
			})}>
			{children}
		</div>
	);
}

Roadmap

• Adicionar mais funções utilitárias.

• Adicionar menu para escolha dos utilitários.

• Adicionar suporte para criação de aplicativos mobile.

Autores

• @imLymei
• @kevynlopes

Licença

MIT