Este é um modelo inicial para construir um aplicativo SaaS usando Next.js com suporte para autenticação, integração Stripe para pagamentos e um painel para usuários logados.
Demonstração: https://next-saas-start.vercel.app/
Em 2020, fiz um curso chamado “React 2025” que mostrou como construir uma aplicação SaaS com Next.js, Stripe e outras ferramentas.
Bem, é quase 2025 e o React 19 trouxe tantos novos recursos incríveis que eu não previ! Este repositório é uma demonstração dos padrões React e Next.js mais recentes. Esses padrões podem simplificar drasticamente algumas tarefas comuns na construção de seu SaaS, como construir formulários, comunicar-se com seu banco de dados e muito mais.
Por exemplo, o React agora possui ganchos integrados como useActionState para lidar com erros de formulário embutidos e estados pendentes. As ações do React Server podem substituir muitos códigos clichê necessários para chamar uma rota de API do lado do cliente. E, finalmente, o gancho use React combinado com Next.js torna incrivelmente fácil construir um gancho useUser() poderoso.
Conseguimos buscar o usuário em nosso banco de dados Postgres no layout raiz, mas não aguardamos o Promise . Em vez disso, encaminhamos a Promise para um provedor de contexto React, onde podemos "desembrulhá-la" e aguardar a transmissão dos dados. Isso significa que podemos ter o melhor dos dois mundos: código fácil para buscar dados de nosso banco de dados (por exemplo, getUser() ) e um gancho React que podemos usar em componentes do cliente (por exemplo, useUser() ).
Curiosidade: a maior parte da UI deste aplicativo foi construída com v0 ? Mais detalhes aqui se você quiser saber mais sobre este repositório.
/ ) com elemento Terminal animado/pricing ) que se conecta ao Stripe Checkoutgit clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install Use o script de configuração incluído para criar seu arquivo .env :
pnpm db:setupEm seguida, execute as migrações de banco de dados e propague o banco de dados com um usuário e uma equipe padrão:
pnpm db:migrate
pnpm db:seedIsso criará o seguinte usuário e equipe:
[email protected]admin123 Você também pode, é claro, criar novos usuários por meio de /sign-up .
Por fim, execute o servidor de desenvolvimento Next.js:
pnpm devAbra http://localhost:3000 no seu navegador para ver o aplicativo em ação.
Opcionalmente, você pode ouvir webhooks do Stripe localmente por meio de sua CLI para lidar com eventos de alteração de assinatura:
stripe listen --forward-to localhost:3000/api/stripe/webhookPara testar pagamentos Stripe, use os seguintes detalhes do cartão de teste:
4242 4242 4242 4242Quando estiver pronto para implantar seu aplicativo SaaS em produção, siga estas etapas:
https://yourdomain.com/api/stripe/webhook ).checkout.session.completed , customer.subscription.updated ).Nas configurações do seu projeto Vercel (ou durante a implantação), adicione todas as variáveis de ambiente necessárias. Certifique-se de atualizar os valores do ambiente de produção, incluindo:
BASE_URL : defina como seu domínio de produção.STRIPE_SECRET_KEY : Use sua chave secreta Stripe para o ambiente de produção.STRIPE_WEBHOOK_SECRET : use o segredo do webhook do webhook de produção que você criou na etapa 1.POSTGRES_URL : Defina como URL do seu banco de dados de produção.AUTH_SECRET : Defina como uma string aleatória. openssl rand -base64 32 irá gerar um. Embora este modelo seja intencionalmente mínimo e deva ser usado como recurso de aprendizagem, existem outras versões pagas na comunidade que são mais completas:
