SaaS Boilerplate
v1.7.3
SaaS Boilerplate é um modelo poderoso e totalmente personalizável para iniciar seus aplicativos SaaS. Construído com Next.js e Tailwind CSS e os componentes modulares de UI do Shadcn UI . Este modelo Next.js SaaS ajuda você a construir e lançar SaaS rapidamente com o mínimo de esforço.
Repleto de recursos essenciais, como autenticação integrada, multilocação com suporte de equipe, função e permissão , banco de dados, I18n (internacionalização), página inicial, painel do usuário, manipulação de formulários, otimização de SEO, registro, relatório de erros com sentinela, teste, implantação , monitoramento e representação de usuário , este modelo SaaS fornece tudo que você precisa para começar.
Projetado pensando nos desenvolvedores, este Next.js Starter Kit usa TypeScript para segurança de tipo e integra ESLint para manter a qualidade do código, junto com Prettier para formatação de código consistente. O conjunto de testes combina Vitest e React Testing Library para testes de unidade robustos, enquanto Playwright lida com integração e testes E2E. A integração e implantação contínuas são gerenciadas por meio do GitHub Actions. Para gerenciamento de usuários, a autenticação é feita pelo Clerk. Para operações de banco de dados, ele usa Drizzle ORM para gerenciamento de banco de dados com segurança de tipo em bancos de dados populares como PostgreSQL, SQLite e MySQL.
Esteja você criando um novo aplicativo SaaS ou procurando um modelo SaaS flexível e pronto para produção , este padrão tem o que você precisa. Este kit inicial gratuito e de código aberto tem tudo que você precisa para acelerar seu desenvolvimento e dimensionar seu produto com facilidade.
Clone este projeto e use-o para criar seu próprio SaaS. Você pode conferir a demonstração ao vivo em SaaS Boilerplate, que é uma demonstração com autenticação funcional e sistema multilocatário.
 |  |   |
 | ||
| Adicione seu logotipo aqui |
Demonstração ao vivo: modelo SaaS
| Página inicial | Painel do usuário |
|---|---|
 |  |
| Gestão de Equipe | Perfil de usuário |
|---|---|
 |  |
| Inscrever-se | Entrar |
|---|---|
 |  |
| Página inicial com modo escuro (versão Pro) | Painel do usuário com modo escuro (versão Pro) |
|---|---|
 |  |
| Painel do usuário com barra lateral (versão Pro) |
|---|
 |
Experiência do desenvolvedor em primeiro lugar, estrutura de código extremamente flexível e mantém apenas o que você precisa:
@Recurso integrado do Next.js:
Execute o seguinte comando em seu ambiente local:
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm installPara sua informação, todas as dependências são atualizadas todos os meses.
Então, você pode executar o projeto localmente no modo de desenvolvimento com recarregamento ao vivo executando:
npm run devAbra http://localhost:3000 com seu navegador favorito para ver seu projeto.
Crie uma conta de funcionário em Clerk.com e crie um novo aplicativo no Painel de controle do funcionário. Em seguida, copie os valores de NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY e CLERK_SECRET_KEY no arquivo .env.local (que não é rastreado pelo Git):
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key No Painel do funcionário, você também precisa Enable Organization navegando até Organization management > Settings > Enable organization .
Agora, você tem um sistema de autenticação totalmente funcional com Next.js: Inscrever-se, Entrar, Sair, Esqueci a senha, Redefinir senha, Atualizar perfil, Atualizar senha, Atualizar e-mail, Excluir conta e muito mais.
O projeto usa DrizzleORM, um ORM de tipo seguro compatível com bancos de dados PostgreSQL, SQLite e MySQL. Por padrão, o projeto está configurado para funcionar perfeitamente com PostgreSQL e você pode escolher facilmente qualquer provedor de banco de dados PostgreSQL.
Para tradução, o projeto usa next-intl combinado com Crowdin. Como desenvolvedor, você só precisa cuidar da versão em inglês (ou outro idioma padrão). As traduções para outros idiomas são geradas e tratadas automaticamente pelo Crowdin. Você pode usar o Crowdin para colaborar com sua equipe de tradução ou traduzir você mesmo as mensagens com a ajuda da tradução automática.
Para configurar a tradução (i18n), crie uma conta no Crowdin.com e crie um novo projeto. No projeto recém-criado, você poderá encontrar o ID do projeto. Você também precisará criar um novo token de acesso pessoal acessando Configurações da conta > API. Então, em suas ações do GitHub, você precisa definir as seguintes variáveis de ambiente: CROWDIN_PROJECT_ID e CROWDIN_PERSONAL_TOKEN .
Depois de definir as variáveis de ambiente em suas ações do GitHub, seus arquivos de localização serão sincronizados com o Crowdin sempre que você enviar um novo commit para o branch main .
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── scripts # Scripts folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # Reusable components
│ ├── features # Components specific to a feature
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ └── utils # Utilities folder
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration Você pode configurar facilmente o Next.js SaaS Boilerplate pesquisando FIXME: para fazer uma personalização rápida. Aqui estão alguns dos arquivos mais importantes para personalizar:
public/apple-touch-icon.png , public/favicon.ico , public/favicon-16x16.png e public/favicon-32x32.png : o favicon do seu sitesrc/utils/AppConfig.ts : arquivo de configuraçãosrc/templates/BaseTemplate.tsx : tema padrãonext.config.mjs : configuração Next.js.env : variáveis de ambiente padrãoVocê tem acesso total ao código-fonte para maior personalização. O código fornecido é apenas um exemplo para ajudá-lo a iniciar seu projeto. O céu é o limite.
No código fonte você também encontrará comentários PRO que indicam o código que só está disponível na versão PRO. Você pode facilmente remover ou substituir esse código por sua própria implementação.
Para modificar o esquema do banco de dados no projeto, você pode atualizar o arquivo de esquema localizado em ./src/models/Schema.ts . Este arquivo define a estrutura das tabelas do seu banco de dados usando a biblioteca Drizzle ORM.
Depois de fazer alterações no esquema, gere uma migração executando o seguinte comando:
npm run db:generateIsso criará um arquivo de migração que reflete as alterações do esquema. A migração é aplicada automaticamente durante a próxima interação com o banco de dados, portanto não há necessidade de executá-la manualmente ou reiniciar o servidor Next.js.
O projeto segue a especificação Convencional Commits, o que significa que todas as mensagens de commit devem ser formatadas de acordo. Para ajudá-lo a escrever mensagens de commit, o projeto usa o Commitizen, uma CLI interativa que o orienta durante o processo de commit. Para usá-lo, execute o seguinte comando:
npm run commit Um dos benefícios de usar Commits Convencionais é a capacidade de gerar automaticamente um arquivo CHANGELOG . Também nos permite determinar automaticamente o próximo número de versão com base nos tipos de commits incluídos em um lançamento.
O projeto é integrado ao Stripe para pagamento de assinatura. Você precisa criar uma conta Stripe e também instalar o Stripe CLI. Depois de instalar o Stripe CLI, você precisa fazer login usando o CLI:
stripe loginEntão, você pode executar o seguinte comando para criar um novo preço:
npm run stripe:setup-price Depois de executar o comando, você precisa copiar o ID do preço e colá-lo em src/utils/AppConfig.ts atualizando o ID do preço existente pelo novo.
No Stripe Dashboard, você deve definir as configurações do portal do cliente em https://dashboard.stripe.com/test/settings/billing/portal. Mais importante ainda, você precisa salvar as configurações.
Em seu arquivo .env , você precisa atualizar NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY com sua própria chave Stripe Publishable. Você pode encontrar a chave em seu Stripe Dashboard. Em seguida, você também precisa criar um novo arquivo chamado .env.local e adicionar as seguintes variáveis de ambiente no arquivo recém-criado:
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret Você obtém o STRIPE_SECRET_KEY do seu Stripe Dashboard. O STRIPE_WEBHOOK_SECRET é gerado executando o seguinte comando:
npm run dev Você encontrará em seu terminal o segredo de assinatura do webhook. Você pode copiá-lo e colá-lo em seu arquivo .env.local .
Todos os testes unitários estão localizados ao lado do código-fonte no mesmo diretório, facilitando sua localização. O projeto usa Vitest e React Testing Library para testes unitários. Você pode executar os testes com o seguinte comando:
npm run testO projeto usa Playwright para integração e testes ponta a ponta (E2E). Você pode executar os testes com os seguintes comandos:
npx playwright install # Only for the first time in a new environment
npm run test:e2e No ambiente local, o teste visual está desabilitado e o terminal exibirá a mensagem [percy] Percy is not running, disabling snapshots. . Por padrão, o teste visual é executado apenas em GitHub Actions.
A pasta App Router é compatível com o tempo de execução do Edge. Você pode habilitá-lo adicionando as seguintes linhas src/app/layouts.tsx :
export const runtime = 'edge' ; Para sua informação, a migração do banco de dados não é compatível com o Edge Runtime. Então, você precisa desabilitar a migração automática em src/libs/DB.ts :
await migrate ( db , { migrationsFolder : './migrations' } ) ;Depois de desativá-lo, você deverá executar a migração manualmente com:
npm run db:migrateVocê também precisa executar o comando sempre que quiser atualizar o esquema do banco de dados.
Durante o processo de construção, as migrações de banco de dados são executadas automaticamente, portanto não há necessidade de executá-las manualmente. Entretanto, você deve definir DATABASE_URL em suas variáveis de ambiente.
Então, você pode gerar uma construção de produção com:
$ npm run buildEle gera uma construção de produção otimizada do padrão. Para testar a compilação gerada, execute:
$ npm run start Você também precisa definir as variáveis de ambiente CLERK_SECRET_KEY usando sua própria chave.
Este comando inicia um servidor local usando a construção de produção. Agora você pode abrir http://localhost:3000 no seu navegador preferido para ver o resultado.
O projeto usa Sentry para monitorar erros. No ambiente de desenvolvimento, nenhuma configuração adicional é necessária: NextJS SaaS Boilerplate é pré-configurado para usar Sentry e Spotlight (Sentry for Development). Todos os erros serão enviados automaticamente para sua instância local do Spotlight, permitindo que você experimente o Sentry localmente.
Para ambiente de produção, você precisará criar uma conta Sentry e um novo projeto. Então, em next.config.mjs , você precisa atualizar os atributos org e project na função withSentryConfig . Além disso, adicione seu Sentry DSN a sentry.client.config.ts , sentry.edge.config.ts e sentry.server.config.ts .
O modelo Next.js SaaS depende do Codecov para solução de relatórios de cobertura de código. Para habilitar o Codecov, crie uma conta Codecov e conecte-a à sua conta GitHub. Seus repositórios devem aparecer no painel do Codecov. Selecione o repositório desejado e copie o token. Em GitHub Actions, defina a variável de ambiente CODECOV_TOKEN e cole o token.
Certifique-se de criar CODECOV_TOKEN como um segredo do GitHub Actions, não cole-o diretamente em seu código-fonte.
O projeto usa Pino.js para registro. No ambiente de desenvolvimento, os logs são exibidos no console por padrão.
Para produção, o projeto já vem integrado ao Better Stack para gerenciar e consultar seus logs utilizando SQL. Para usar o Better Stack, você precisa criar uma conta Better Stack e criar uma nova fonte: vá para Painel de registros do Better Stack > Fontes > Conectar fonte. Em seguida, você precisa dar um nome à sua fonte e selecionar Node.js como plataforma.
Depois de criar a fonte, você poderá visualizar e copiar seu token de origem. Nas variáveis de ambiente, cole o token na variável LOGTAIL_SOURCE_TOKEN . Agora, todos os logs serão automaticamente enviados e ingeridos pelo Better Stack.
O projeto usa Checkly para garantir que seu ambiente de produção esteja sempre instalado e funcionando. Em intervalos regulares, o Checkly executa os testes que terminam com a extensão *.check.e2e.ts e notifica se algum dos testes falhar. Além disso, você tem a flexibilidade de executar testes em vários locais para garantir que seu aplicativo esteja disponível em todo o mundo.
Para usar o Checkly, você deve primeiro criar uma conta no site deles. Após criar uma conta, gere uma nova chave de API no Checkly Dashboard e defina a variável de ambiente CHECKLY_API_KEY em GitHub Actions. Além disso, você precisará definir CHECKLY_ACCOUNT_ID , que também pode ser encontrado em seu painel Checkly em Configurações do usuário > Geral.
Para concluir a configuração, atualize o arquivo checkly.config.ts com seu próprio endereço de e-mail e URL de produção.
Next.js SaaS Starter Kit inclui um analisador de pacote integrado. Ele pode ser usado para analisar o tamanho de seus pacotes JavaScript. Para começar, execute o seguinte comando:
npm run build-statsAo executar o comando, uma nova janela do navegador será aberta automaticamente com os resultados.
O projeto já vem configurado com Drizzle Studio para exploração do banco de dados. Você pode executar o seguinte comando para abrir o estúdio de banco de dados:
npm run db:studioEntão, você pode abrir https://local.drizzle.studio com seu navegador favorito para explorar seu banco de dados.
Se você é usuário do VSCode, pode ter uma melhor integração com o VSCode instalando a extensão sugerida em .vscode/extension.json . O código inicial vem com configurações para uma integração perfeita com o VSCode. A configuração de depuração também é fornecida para experiência de depuração de front-end e back-end.
Com os plugins instalados em seu VSCode, ESLint e Prettier podem corrigir automaticamente o código e exibir erros. O mesmo se aplica aos testes: você pode instalar a extensão VSCode Vitest para executar automaticamente seus testes e também mostrar a cobertura do código no contexto.
Dicas profissionais: se você precisar de uma verificação de tipo amplo do projeto com TypeScript, poderá executar uma compilação com Cmd + Shift + B no Mac.
Todos são bem-vindos para contribuir com este projeto. Sinta-se à vontade para abrir um problema se tiver alguma dúvida ou encontrar um bug. Totalmente aberto a sugestões e melhorias.
Licenciado sob a licença MIT, Copyright © 2024
Consulte LICENÇA para obter mais informações.
| | |
| ||
| Adicione seu logotipo aqui |
Feito com ♥ por CreativeDesignsGuru
Procurando um padrão personalizado para iniciar seu projeto? Eu ficaria feliz em discutir como posso ajudá-lo a construir um. Sinta-se à vontade para entrar em contato a qualquer momento em [email protected]!
