Micro-SaaS na Prática: Setup com Next.js 14, Shadcn UI e Autenticação com Next Auth [+ Bônus]
HTML-код
- Опубликовано: 7 фев 2025
- 🔥 Quer construir um Micro-SaaS em um final de semana? Descubra o atalho que usei pra construir mais de 15 SaaS e faturar +500K em 3 anos!
uselink.co/vib...
------------
Micro-SaaS na Prática: Setup com Next.js 14, Shadcn UI e Autenticação com Next Auth [+ Bônus]
Fala, Devs! Aqui é o Felipe Barcelos e hoje eu trouxe um guia de campo para você que quer meter a mão na massa e construir seu próprio Micro-SaaS. No vídeo de hoje, vamos fazer o setup inicial de um projeto que tem tudo para virar sua nova fonte de renda: um Micro-SaaS feito com Next.js 14, e claro, com aquele toque de mestre usando Next Auth para a autenticação.
Vou te guiar por cada etapa, desde a instalação dos componentes de UI até o ponto onde você terá uma tela de login elegante e um sistema de autenticação que é só sucesso. E não para por aí, não! Vou te apresentar uma ferramenta de UI que usa inteligência artificial para dar aquele grau no visual do seu projeto, sem você precisar suar a camisa no design.
Se você quer aprender como tirar o máximo do Next.js 14 e fazer um Micro-SaaS que realmente se destaque, cola comigo. Vamos falar de código, de estratégia e, claro, de como fazer tudo isso virar dinheiro no bolso. Porque no final do dia, a gente programa por paixão, mas uma renda a mais nunca é demais, né?
Não esquece de se inscrever no canal, dar aquele like maroto e ativar as notificações. Assim, você não perde nenhum passo dessa jornada de transformar código em cash. Bora codar!
💙 Entre para a nossa comunidade gratuita:
Nela, você encontra tudo que você precisa para construir uma renda extra como desenvolvedor criando um Micro-SaaS.
t.me/+Y9DRMWJJ...
✉️ Newsletter gratuita com conteúdos diários sobre Micro-SaaS:
vibedev.com.br/
🎁 Cupom de 60 dias gratuitos na Digital Ocean:
bit.ly/digital...
----
ULTIMOS VÍDEOS:
▶️ Micro-SaaS: O Segredo dos Desenvolvedores para Um Portfólio que Gera Renda:
• Micro-SaaS: Transforme...
▶️ Case #00: Ele Fez Mais de $8K Por Mês Com um Micro-SaaS de Depoimentos:
• $8K por Mês com Micro-...
▶️ Crie a Sua Própria Vercel em Qualquer VPS e Faça Deploy dos Seus Projetos (+ Bônus):
• Crie a Sua Própria Ver...
▶️ Criando uma API de Micro-SaaS com Stripe, do Zero ao Pagamento com Bun JS, Prisma e Stripe:
• Criando uma API de Mic...
----
ARTIGOS:
📖 Como construir um Funil de Vendas para o Seu Micro-SaaS:
vibedev.com.br...
📖 20 Ideias de Micro-SaaS Que Qualquer Desenvolvedor Pode Criar:
vibedev.com.br...
📖 Como construir um Micro-SaaS em 2024:
vibedev.com.br...
----
CONTATO COMERCIAL:
me@felipebarcelos.com
----
INSTAGRAM: / vibedev.oficial
![Seungmin "그렇게, 천천히, 우리(As we are)" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/kAzmhLHePqU/mqdefault.jpg)
Link para o repositório:
uselink.co/share/b66f2842-c799-4f9c-b74f-39ba9d34eb72
Vc explica como se estivesse explicando pra um idiota, que é exatamente oq eu preciso. Conteúdo incrível, só tinha visto na gringa, então é muito bom ter esse conteúdo aqui no BR tbm!
Hahahahahaha! Este é o feedback mais passivo agressivo que já recebi! Sensacional 🚀🚀
Brincadeiras a parte, fico feliz de estar ajudando, fica tranquilo que vem muito mais conteúdo por ai. Aproveita para entrar na comunidade, tem bastante conteúdo por lá!
@@vibedev.official Venho por meio deste avisar que vc não esta sózinho nessa tbm adorei o fato de explicar como se eu fosse um idiota kk
Todo mundo quer que explique como se fosse um idiota, porém ninguém tem coragem de dizer.
Se tu tá na pista pra desenrolar Next.js, MongoDB, Fastify, Redis e Kafka no esquema certo, o CrazyStack Node e React do devdoido é a chave
Isso não é um desenvolvedor não, é um prefeito. Obrigado meu prefeito!
Não vejo a hora de ir para a próxima aula 🤯
Eita! Vote em mim na próxima eleição hahahah!
Cara é isso ai, conteudo atual, com outro nivel em programação que foge do turbilhão básico que há por ai...
Muito obrigado, está sendo incrível compartilhar tudo isso com vocês! Vem muito conteúdo pela frente, pode ter certeza.
Cara, eu quase não comento nos vídeos, mas me sinto obrigado rsrs'. O que você tá fazendo é absurdamente incrível. Você explica muito bem e sabe muito, está abrindo demais a minha mente. Valeu mesmo!
Um dos melhores canais que eu já vi!
Conteúdo maneiro. Caí aqui justamente por estar trabalhando com shadcn UI.
Show! É bom demais trabalhar com esta lib que não é lib hahaha!
Vi os videos no lançamento e estou voltando para agradecer pois continua me ajudando muito!
Saber, ok... Ensinar é um desafio... parabéns.
Cara que perfeito, eu sou dev e estou criando uma empresa junto a um amigo para venda de mSaaS e essa série de videos vai com certeza nos ajudar.
Fico aqui uma promessa, se eu conseguir vender um mSaaS que desenvolvi com a sua série de videos eu prometo contribuir para o seu canal.
obrigado por esse conteúdo
Estão contratando? Rsrs
@@saulotarsobc kkkkkkk no momento ainda não, mas assim que tivermos produto rodando queremos expandir o pessoal sim! Me passa seu contato, ai entro em contato com voce quando estivermos procurando gente!
Opa! Show de bola, conta comigo para o que precisarem e compartilha a jornada de vocês na comunidade, certeza que pode ajudar muita gente.
Você é um prefeito, cara. +1 inscrito
Vem mais pela frente!
muito massa a dica do v0!
Me falaram que programação era difícil, falaram pra começar com next, agora entendi o porquê, é só copiar e colar os códigos, muito legal
Show! Fica bem mais simples, menos complexidade!
Achei bem explicativo e com conteúdo da atualidade, vou apoiar 100%!
Muito obrigado 😁
Não sou de ficar comentando em vídeos, mas parabéns pelo excelente conteúdo de qualidade e um conteúdo atual de alto nível e muito bem explicado além disso é BR que é bem difícil de achar. Tu está contribuindo para perspectivas e para valorização da nossa profissão com teus conhecimentos.
Baita vídeo, ótimo conteúdo! Durante a implementação do projeto encontrei um probleminha que foi a forma de configurar o adapter do prisma, mas consegui resolver seguindo a documentação e atualizando os schemas.
cai aqui de paraquedas, estava procurando aulas sobre Shadcn e na hora que li este título, cliquei imediatamente, e para minha sorte a didática é perfeita, sem enrolação, com a mão na massa e explicando o que é necessário, parabéns e obrigado por disponibilizar de forma gratuita, conteúdo raríssimo!!
Vem mais conteúdos! Tmj!
Que projeto delicinha hein, mais um inscrito
Opa! Muito obrigado 👍
Conteúdo muito bom! Ótima didática.
Era exatamente o que eu estava procurando. Já ganhou mais um inscrito
Aeeee! Muito obrigado 🔥
Cara, obrigado por esse conteúdo, desejo muita força para continuar a produzir conteúdo bom assim, sei como dá trabalho, sua didática é bacana também, parabéns!
Muitooo obrigado, vem muito conteúdo ainda!
vou aproveitar muuuuito esses conteudos, vc ensina e mostra coisas incriveis, tomara, que quando vc crescer bastante (você vai, eu tenho total certeza) você continue mostrando esses tipos de conteúdo gratuitamente, pois é conteúdo que muita gente colocaria em curso pago
Esta é meta! Entregar conteúdo fora da curva sempre para vocês por aqui, não se preocupe 😉
E muito obrigado pelo apoio! Tem muito conteúdo pela frente!
Merece 100 likes, parabéns pelo trabalho incrível 🤩
Opa! Muito obrigado 😁
recem te conheco e ja te amo, a paz dele explicando e perfeito. Explicando coisas simples. Voce e elite
Muito obrigado Maysa 😉
Cai de paraquedas, next não é minha stack, mas com certeza vou acompanhar pela riqueza de conteúdo, e com certeza vou sair com mais algum conhecimento daqui. parabéns!
Opa! Show de bola, espero que ajude. Bora pra cima!
Eu trabalho na área faz um bom tempo mano, e de longe, o jeito que você explica é um dos melhores que eu já vi. Se você lançar um curso (não sei se já tem) é certeza de sucesso! Tmj mano e parabéns pelo trabalho excepcional.
Opa! Muito obrigado. Vem muito conteúdo pela frente ainda.
ultimamente estou usando bastante next js, tailwind, radix ui, me aventurei no next auth, e to querendo fazer um micro saas, entao seus vídeos estao chegando no momento exato que to precisando e passando por isso, obrigado
Pow! Sensacional! Feliz por estar ajudando, compartilha sua jornada na nossa comunidade, certeza que pode ajudar muita gente 🚀😄
Top demais! Como esse canal ainda não tem a opção para virar Membro? Conteúdo valioso demais...
Opaaaa! Esta semana deve entrar, RUclips liberou hoje.
Tava a uma semana quebrando a cabeça com o Next pra entender... não sou dev mas algum um conhecimento com linguagem de porgramação... até agora não tinha achado algo que eu entendesse de forma facil como organizar meu codigo e consegui ter uma boa base
Que canal incrível! Vibe dev, Rocketseat e Erick wendel são os meus favoritos!!
Parabéns! Faz um video mostrando sobre as mudancas do next por favor, igual vc falou no video
Muito boa a maneira de como ele explica como se estivesse explicando pra um jumento... exatamente o que eu precisava. Obrigado pela incrível aula!
É a segunda pessoa que me falou isso! hahahaha
Fico feliz por estar ajudando, vem mais conteúdo por ai! Eu sei o quanto fazia falta este tipo de conteúdo no Brasil, por isso, estou correndo para trazer para vocês.
@v.official Suas aulas são muito incríveis, de verdade mesmo! Assisti aquela do EasyPanel e gostei muito da ideia, já estou pensando em aplicar, inclusive haha
Conteúdo top, curti muito NextAuth, já tinha ouvido falar mas não sabia que era tão util assim. Aguardando ansiosamente os proximos capitulos 🙌🫡🎉
Opa! Eu uso bastante ele, resolve o problema da autenticação, é bem autenticado e não ficamos acoplado em um serviço de auth de terceiros.
Simplesmente incrível, aprendi mais em 46 minutos do que aprendi em cursos completos que existem por aí.
Muito bom! Fico feliz por ter ajudado 🚀
Muito bom mano! Não conhecia o nextauth, ajudou demais!
Uma dica que peguei na hora de implementar aqui que simplificou um pouco, no teu arquivo middleware, no lugar de usar/criar a função getUrl e declarar a env, vc pode pegar o origin do req.nextUrl, ai vc só concatena para formar a url. Vê se funciona aí, valeu!!
Separados na maternidade, Felipe Barcelos e Guilherme Rodz.
2 feras, manjam muito!
Melhor comentário, Huaheuahueahuehaueaheahaeauhaeahue
😂😂 pior
Conheci seu canal hoje e você já explodiu minha mente com esse v0, eu estava querendo começar a criar algum saas, e você está sendo meu melhor mentor pra começar nesse mundo, parabéns pela didática, sucesso sempre irmão!!
Show de bola! Entra na nossa comunidade e compartilha sua jornada, certeza que vai ser util para muita gente e todo mundo se ajuda por lá. Sucesso para o seu Micro-SaaS! Tmj!
Cara muito bom o seu video, conheci o seu canal e estou gostando muito, sou programador front-end e estava querendo fazer renda extras com o desenvolvimento de Micro-saas e a encontrei o seu canal.
Show de bola 🚀! Feliz por estar ajudando na sua jornada, que tal compartilhar com a galera na comunidade? Certeza que você pode ajudar muita gente.
Conteúdo muito bom! Primeiro que eu vejo falando do v0, show de bola! Me ajudou muito
Boaaaa!
Ótima aula! Estou voltando ao next agora. Usei na última vez na versão 12 kkkkkkk. Seria muito bom uma aula sobre next14 no geral. Agradeço pelo conteúdo!
Vou trazer um intensivão nas próximas semanas! Deixa comigo!
Simplesmente sensacional.
Estou montando um SaaS para imobiliarias, de micro não tem nada. Mas esse conteúdo já abriu minha cabeça para tanta coisa, era justamente o que eu estava precisando e eu agradeço do fundo do meu coração por este conteúdo gratuito e de altissíma qualidade.
Opa! Primeiro, muito obrigado pelo feedback e pode ter certeza que vem muito conteúdo por ai.
Além disso, parabéns pelo projeto é um puta desafio legal este mercado que você escolheu, tem muita margem para crescer.
Se quiser compartilhar sua jornada na comunidade, tenho certeza que pode ajudar uma galera.
Vlw 🚀
@@vibedev.official Opa, pode deixar que irei entrar na comunidade sim. Vai ser foda ter gente no mesmo barco para dividir experiências & bugs. kkkkkkkk.
Muito foda, não conhecia esse v0, ótimo vídeo
Ele é bem bom!
Boa, ótimo conteúdo e não para com as próximas aulas! 💯
Muito obrigado, vem muito conteúdo ainda!
Incrível , todas tecnologias que mais gosto hehe ... continua prfv...
Pode deixar!
Cara que conteúdo completo e gratuito, parabéns por essa disposição em ajudar você abriu a minha mente de uma forma diferente sobre React de forma que com cursos pagos não foi fácil assim.
Sensacional! Estou muito feliz por estar ajudando tanta gente, está sendo fantástico. Vem muito conteúdo pela frente ainda!
Cara, como q eu não te conhecia antes, vlw mesmo pelo seu conteúdo, mt top
Opa! Muito obrigado. Eu comecei na semana passada hahaha! Deve ser por isso que você não me conhecia.
Conteúdo incrível irmão!! Obrigado por disponibilizar de graça um conteúdo tão rico, sucesso!!
Eu que agradeço!!! Está sendo foda trazer este conteúdo para vocês. Gostando demais!!!
Aguardando as próximas aulas...!
Opa! 👀
Conteudo muito valioso, vou utilizar pra construir um micro saas, mas com algumas tecnologias diferentes, estou acompanhando a serie
Essa parte de auth utilizando essas ferramentas seguras que já estão na boca do povo é muito melhor do que tentar ficar inventando sua propria autenticação que VAI estar sujeita a muita falta de segurança
Na real é um problema tão antigo que com algum tempo de dedicação vc consegue blindar até que bem. Pra mim esquisito é vc depender de um serviço externo pra autenticação
Cara graças a Deus o youtube indicou teu conteúdo para mim, tu é baum demais
- Gostei da aula ! Focou bem o back-end. Vou acompanhar as demais, já me inscrevi no canal e vou recomendar também. Obrigado !
Pô, cheguei a pouco tempo aqui no canal mas já estou adorando acompanhar os seus vídeos. Os conteúdos são excepcionais, fruto da sua didática sem dúvidas. Meus parabéns! 💙
É uma honra! Muito obrigado pelo feedback! 🚀
Parabéns pelo video, sua didática é muito bacana. Já me inscrevi no canal e quero acompanhar os demais conteúdos.
Explicou de uma maneira simples e foi direto ao ponto.
Muito obrigado! Seja bem-vindo!
muito interessante e vou buscar acompanhar e aprender, mas seria interessante você fazer a apresentação do projeto, qual tecnologia e para que cada uma serve, tenho planos de fazer algo similar utilizando o prisma, que possibilita escalar, migrar e utilizar qualquer banco de dados, supabase, appwrite etc...
Incrível tua iniciativa nesse canal mano!
Muito obrigado 😁
que canal maravilhoso, continue esse otimo trabalho!
Opa! Muito obrigado, pode ter certeza que vem muita coisa nova por ai.
Era o que eu estava precisando. Muito obrigado!
Espero ter ajudado
já tô seguindo, ansioso pra ver essa maratona
Fantástico! Vai valer a pena 🚀
Dica: Para rodar mais rápido localmente modifique o script dev para: next dev --turbo, isso habilitará o turbopack.
Parabéns pelo trabalho, incrivel demais!
Valeuuu!
Canal foda, didática muito boa. Obrigado pelo conteúdo.
Show! Muito obrigado!
Top, direto ao ponto, parabéns pelo conteúdo!
Obrigado 🤙
Mano que conteúdo foda, parabéns pela didática
Opa! Muito obrigado, vem muito conteúdo ainda!
Seus videos são top demais maninho, parabéns, estou acompanhando os videos e estão muito top
Showw! Obrigadooo!
Conteúdo de altíssima qualidade!
Valeu! Vem muito conteúdo por vir!
que video absurdo. Obrigado.
muito bom o conteúdo!!
inclui um multi tenancy que fica filé!
Opa! Quem sabe? 👀
Coloque mais video pelo amor de Deus, teu canal é bom pra krl
Postei hoje! Desculpe a demora, a dengue me derrubou
@@vibedev.official Tá derrubando geral
Caí de paraquedas mano, parabéns, você é monstro irmão, disponibiliza o tema que você usa, e as extensões
Opa! Vou preparar um vídeo sobre isso.
Muito bom o video velho, esse video ai sobre next seria massa também!
Pode deixar! Vou preparar para nós!
Galera para quem teve erro como eu no toast, eu coloquei {children} dentro de uma tag main como esta na documentacao, importei o toast import { useToast } from "@/components/ui/use-toast" na pagina de formulario, dentro da funcao instanciei const { toast } = useToast(). Ai comecou a aparecer
top demais em mano, parabéns.
aliás, disponibiliza esse plano de fundo aí pa noi? kkkkkk tmj
deixando o like e salvando pra assistir mais tarde
Muito bem explicado,muito obrigado . Se puder faz também do NextUi 😁
Opaaa! Vou ver aqui.
que video bom mds, avalanche de conhecimento!
Opa! Espero ter ajudado
Tá aí um conteúdo que vale a pena maratonar! +1 inscrito!
Opa! Muito obrigado 🚀
Conteúdo bom demais, didática também
Opa! Muito obrigado, feliz por ajudar.
parabéns pelo conteúdo, acompanhando o canal agora!
Muito obrigado
muito intessante cara canal muito promissor
Valeuuu!
Parabéns pelo vídeo 👏👏, ótima didática, pode me tirar uma dúvida como é feito a validação se o e-mail que solicitou o magic é um usuário válido?
Ótimo conteúdo. Um micro Saas podemos fazer com um front-end bem modular que vai servir bem. Mas, a minha pergunta é, em termos de escalabilidade para um Saas, não teríamos de criar um back-end dedicado a todo o contexto de camadas das regras de negócio ? Embora podemos encapsular muitas responsabilidades ao front com serviços externos (supabase, firebase, etc ), como fica a questão de escalabilidade do produto com toda as dependências low code ?
Ótima pergunta! Mas, posso te apresentar alguns cases que seguem esta mesma arquitetura:
cal.com: Segue a exata arquitetura que mostrei neste video, recebeu mais de $30M de dolares de investimento e o projeto é codigo-aberto. Vale conferir;
dub.co: Tem clientes como Vercel, Prisma e é gigante na comunidade gringa, é um encurtador de link, recebe muito trafego e segue a mesma arquitetura.
Acontece que, somos muitas vezes levado a acreditar que precisamos deste tipo de otimização pre-matura em prol da escalabilidade.
Esta forma que vou apresentar no video, segue o mesmo conceito que estamos acostumados, temos o server-side e o client-side. A única questão é que o Next 14 permitiu trabalharmos com os dois de forma otimizada e muito performática na mesma base de codigo, mas isso não significa que estão na mesma camada.
Então, principalmente quando falamos de Micro-SaaS, onde precisamos validar rápido e um escopo de funcionalidades menor, não compensa fazer tudo separado, pois tende mais dificultar do ajudar.
A otimização deve sim acontecer, em um bom load-balancer, saber controlar os clientes do banco de dados, ter uma arquitetura desacoplada de serviços externos e coisas do tipo.
@@vibedev.official Poxa, que ótimo! Estou modelando um Saas para desenvolver, e também no softwares dos clientes que eu trabalho sempre me vem essa preocupação pre-matura de escalabilidade, melhores padrões e etc, embora eu seja também um bom fã das coisas funcionando rapidamente sem ter que criar tudo do 0. De qualquer forma me esclareceu bastante, Obrigado! Vou anotar essas suas dicas pra me apoiar nessas preocupações que sempre tenho quando estou criando produtos.
Conteúdo que vale ouro mano 🎉
Valeu amigo! Vem muito conteúdo ainda!
Opa, boa noite. Você tem algum treinamento ou recomenda algum?
Muito Show ! Valeu apena. Parabéns!
Tmj!
ia ser muito bom um vídeo explicando sobre o funcionamento desse next na versão 14
Vou gravar uma masterclass completa com TUDO sobre esta nova versão. Sai neste mês ainda!
Nossa, o Canal que eu precisava encontrar. Sou Dev Back-end e n tenho muita experiência com React. Tenho 2 coisas pra perguntar:
Tem alguma(s) dica(s) para aprender mais sobre react/next?
Tem alguma(s) extenção(ões) que pode(m) ajudar?
Segue esta série, eu pretendo usar várias ferramentas de IA e entregar alguns componentes prontos para ajudar a galera que não é de Front-End.
Ótimo conteúdo 👏👏👏
Show de bola, conteúdo diferenciado! Valeu!
Muito obrigado
Ótimo trabalho, mas todo mundo faz com Stripe, um diferencial seria usando um gateway Brasileiro, temos vários.
conteúdo absurdo!! top dms
Opaaa! Valeu!
Muito top mano, adorei, virei seguidor
Opa! Seja bem-vindo!!!
Conteúdo muito brabo, mais um inscrito fiel!
Muito bom, mais um inscrito! Parabéns
Opa! Vlw!!!!
caraa, muito foda!! poderia fazer um video compartilhando suas configurações do vs code, junto com as extensões.
Claro! Já está no plano fazer um video mostrando como usar esta minha IDE o Cursor e as minhas extensões. Provavelmente, será live, então vale entrar na comunidade para ser avisado.
E valeu pelo feedback, feliz por ter gostado!
@@vibedev.official já estou na comunidade e vou acompanhar as lives, você mudou minha percepção de negócio com o Micro-Saas
Incrível, parabéns
Valeeuuuu!
Pra quem vem do .Net, isso explode a cabeça! Parabéns pelo conteúdo! Uma dúvida: qual IDE é a sua?
Boaaa! Bem diferente né? Comecei com VB e C# lá em 2009, comparar com o nivel que chegamos até assusta hahaha!
Traz um vídeo sobre essa questão de server components do nextjs 14. Valeu!
Estou preparando um MasterClass com todas as funcionalidades do novo Next!
Excelente conteúdo
Opa! Muito obrigado!
Muito conteúdo bom mano 🚀
Opa! Obrigado 🤙
Bravo demais …. Que IA e essa que vc usa para completar os códigos?