next auth roles template

Próximo modelo de funções de autenticação

Comece a toda velocidade com este modelo Next.js!

Instalação · Tech Stack + Recursos · Autor

Instalação

Clone e crie este repositório localmente com o seguinte comando:

npx create-next-app my-saas-project --example " https://github.com/mickasmt/next-auth-roles-template "

Ou implante com Vercel:

Passos

1. Instale dependências usando pnpm:

pnpm install

2. Copie .env.example para .env.local e atualize as variáveis.

cp .env.example .env.local

3. Inicie o servidor de desenvolvimento:

pnpm run dev

4. Remova as peças que você não deseja

Você pode usar o comando pnpm run remove-content em seu terminal para remover partes específicas do seu projeto. Este comando oferece suporte aos seguintes parâmetros:

• --blog : Remove a seção do blog do seu projeto.
• --docs : Remove a seção de documentação do seu projeto.

Recomendações

• Remover ambas as seções : é recomendado usar pnpm run remove-content sem especificar parâmetros ( --blog ou --docs ). Isso garante que todos os documentos associados sejam removidos corretamente, pois alguns documentos podem não ser excluídos/atualizados se você remover “blog” depois de “docs” ou vice-versa.

Exemplos

1. Para remover as seções do blog e da documentação:

pnpm run remove-content

2. Para remover apenas a seção do blog:

pnpm run remove-content --blog

3. Para remover apenas a seção de documentação:

pnpm run remove-content --docs

Observação

Eu uso o pacote npm-check-updates para atualizar este projeto.

Use este comando para atualizar seu projeto: ncu -i --format group

Pilha de tecnologia + recursos

Estruturas

• Next.js – Estrutura React para criar aplicativos de alto desempenho com a melhor experiência de desenvolvedor
• Auth.js – Lide com a autenticação do usuário com facilidade com provedores como Google, Twitter, GitHub, etc.
• Prisma – primeiro ORM Typescript para Node.js
• React Email – Estrutura de email versátil para desenvolvimento de email eficiente e flexível

Plataformas

• Vercel – Visualize e implante facilmente alterações com git
• Reenviar – Uma estrutura de e-mail poderosa para desenvolvimento simplificado de e-mail
• Neon – Postgres sem servidor com escalonamento automático, ramificação, armazenamento sem fundo e nível gratuito generoso.

IU

• Tailwind CSS – estrutura CSS utilitária para desenvolvimento rápido de UI
• Shadcn/ui – Componentes reutilizáveis ​​criados usando Radix UI e Tailwind CSS
• Lucide – Ícones lindamente simples e com pixels perfeitos
• next/font – Otimize fontes personalizadas e remova solicitações de rede externa para melhorar o desempenho
• ImageResponse – Gere imagens Open Graph dinâmicas na borda

Ganchos e utilitários

• useIntersectionObserver – Gancho React para observar quando um elemento entra ou sai da janela de visualização
• useLocalStorage – Persiste dados no armazenamento local do navegador
• useScroll – Gancho React para observar a posição de rolagem (exemplo)
• nFormatter – Formate números com sufixos como 1.2k ou 1.2M
• capitalize – Coloca a primeira letra de uma string em maiúscula
• truncate – Trunca uma string para um comprimento especificado
• use-debounce – Debounce uma chamada de função/atualização de estado

Qualidade do código

• TypeScript – verificador de tipo estático para segurança de tipo ponta a ponta
• Mais bonito – formatador de código opinativo para um estilo de código consistente
• ESLint – linter conectável para Next.js e TypeScript

Variado

• Vercel Analytics – Rastreie visitantes únicos, visualizações de página e muito mais de maneira amigável à privacidade

Autor

Este projeto é baseado no Next SaaS Stripe Starter.

Criado por @miickasmt em 2023, lançado sob licença MIT.

Créditos

Agradecimentos a Hosna Qasmei por parte do código da barra lateral do painel.