YourNextStore – Shopify open source que usa Stripe como backend

 (github.com/yournextstore)
1 pontos por GN⁺ 2024-09-12 | 1 comentários | Compartilhar no WhatsApp
  • Your Next Store é um template de e-commerce Next.js open source e AI-native baseado em Stripe, com suporte a hospedagem própria e deploy com um clique na Vercel
  • Para facilitar o uso por ferramentas de codificação com IA, oferece AGENTS.md, padrões idiomáticos do Next.js App Router e métodos do Commerce Kit SDK com tipos definidos
  • As principais funções são checkout, billing e subscriptions por meio de integração direta com a API da Stripe, com modelos de domínio tipados para produtos, opções, carrinho e pagamento
  • A stack técnica é composta por Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript e Biome
  • Oferece 149 branches de temas, de theme-001 a theme-149; os temas alteram apenas componentes visuais e assets estáticos, mantendo produtos, carrinho e checkout

Visão geral do projeto

  • Your Next Store é um template de e-commerce Next.js open source e AI-native
  • É movido por Stripe e foi criado pensando em ferramentas de codificação com IA
  • Oferece uma demo ao vivo
  • Os destaques enfatizados pelo repositório são:
    • AI-Friendly Codebase: inclui AGENTS.md, padrões idiomáticos e o Commerce Kit SDK com métodos tipados
    • Stripe-Native: integra diretamente a API da Stripe para lidar com checkout, billing e subscriptions
    • Next.js 16: usa App Router, React Server Components e React Compiler
    • Open Source: pode ser auto-hospedado em qualquer lugar e implantado na Vercel com um clique

Design amigável a ferramentas de codificação com IA

  • Usa padrões familiares do Next.js para que ferramentas de IA funcionem melhor
    • Usa estruturas idiomáticas como App Router, Server Components, Server Actions e "use cache"
  • O Commerce Kit SDK tem formas de entrada e saída definidas para métodos como productBrowse() e cartUpsert()
    • O README explica que LLMs escrevem o código correto quando conhecem os contratos
  • Modelos de domínio como produtos, variants, carrinho e checkout já existem e têm tipos claros
    • A LLM não precisa criar esses modelos do zero
  • AGENTS.md contém contexto do projeto, exemplos do SDK, regras do Biome e uma checklist de validação
    • Serve para ajudar agentes de IA a entenderem a codebase antes de escrever código

Stack técnica

  • Next.js 16

    • Usa App Router, React Server Components e React Compiler

  • Bun

    • Usado como runtime JavaScript rápido e gerenciador de pacotes

  • Commerce Kit SDK

    • Responsável pela integração com APIs de headless commerce

  • Tailwind CSS v4

    • Usado para estilização utility-first

  • Shadcn UI

    • Oferece mais de 50 componentes acessíveis baseados em Radix UI

  • TypeScript

    • Usado para desenvolvimento com segurança rigorosa de tipos

  • Biome

    • Usado como linter e formatter rápidos

Início rápido e requisitos de execução

  • O comando de início rápido segue o fluxo de clonar o repositório, instalar as dependências com Bun e criar o arquivo de variáveis de ambiente
git clone https://github.com/yournextstore/yournextstore.git
cd yournextstore && bun install
cp .env.example .env.local   # Add your YNS_API_KEY from https://yns.store/manage/settings/api
bun dev
  • Após a execução, a loja funciona em localhost:3000
  • Os requisitos são:
  • É preciso copiar .env.example para .env.local e configurar YNS_API_KEY
    • YNS_API_KEY é um token de API emitido pelo painel de administração

Temas e extensão

  • Your Next Store oferece 149 temas prontos para diferentes categorias de lojas
  • Cada tema é uma reformulação completa da homepage, hero, paleta de cores e layout das seções
  • Todos os temas são criados sobre a mesma core codebase
  • Os temas ficam nos branches de theme-001 a theme-149
  • É possível trocar de tema com um único comando
git checkout theme-016
  • Cada branch de tema é um único commit sobre main, e a mensagem do commit descreve a atmosfera do tema
  • A lista completa de temas pode ser verificada com o seguinte comando
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Todos os branches de tema usam um ID de três dígitos preenchido com zeros, como theme-001 … theme-149
  • Os temas modificam apenas componentes visuais e assets estáticos
    • Produtos, carrinho e checkout não são alterados

Documentação e contribuição

  • Para convenções de codificação e checklist de PR, consulte CONTRIBUTING.md
  • Importação de produtos, gerenciamento de carrinho e formas de construir sobre o YNS podem ser consultados na documentação da API

Leituras relacionadas

1 comentários

 
GN⁺ 2024-09-12
Comentários no Hacker News

  • Acho que eu jamais construiria algo que dependesse do Stripe
    Concordo que pagamentos são difíceis por causa de fraude e chargeback, mas o histórico do Stripe de congelar contas legítimas e basicamente ignorar contato é ruim demais. Eles também forçam arbitragem, e o árbitro depende da receita do Stripe, além de os termos permitirem que invistam os fundos congelados. Também proíbem ação coletiva, embora eu não saiba se essa cláusula se sustentaria na prática

    • Fico curioso sobre o que você recomendaria como alternativa

  • Não posso mais editar o post agora, mas a demo funcional do YNS está aqui: https://demo.yournextstore.com
    Para ver o Stripe Link, use o e-mail test@test.com e, quando for ativado, digite 000000

  • Há tempos eu queria construir exatamente isso várias vezes, ficou muito bem feito
    Ainda não olhei a fundo, mas fico curioso se há suporte a downloads digitais. Downloads de produtos digitais e de “lead magnets” parecem algo que ajudaria bastante muitas lojas

    • No começo, o foco foi em produtos físicos, mas adicionar funcionalidade para produtos digitais parece ser até mais fácil
      Seria ótimo saber se existe uma solução ideal ou como isso deveria funcionar num cenário perfeito. Preciso de um modelo de referência tanto para downloads digitais quanto para downloads de lead magnet

  • O recurso de que mais gostei na demo foi o checkout em uma página
    Está muito próximo do excelente fluxo de checkout da Shopify. O WooCommerce deveria ser a alternativa self-hosted de fato à Shopify, mas ainda deixa a desejar, e mesmo com o ecossistema de plugins é bem mais difícil operar um bom carrinho e checkout. Parabéns pelo lançamento

    • O checkout em uma página sempre foi uma das prioridades máximas e vai continuar sendo
      Ainda há pequenos pontos a melhorar, mas estou satisfeito porque a experiência de checkout já está bem fluida. Fico curioso se você também testou com o Stripe Link. Se as informações de uma compra anterior estiverem salvas em algum lugar da internet, o checkout inteiro cai para quatro cliques, sem preencher formulário
    • O próprio WooCommerce é em geral ok como backend, mas os temas são ruins na maior parte
      Mesmo os temas padrão e gratuitos têm layouts feios, são desnecessariamente pesados, e a tela de checkout parece amadora demais, a ponto de muita gente poder achar que é um site de golpe. Existem bons temas, mas é preciso pagar um bom valor
    • Aquele link pequeno que mostra o carrinho inteiro quando você adiciona um produto também é um bom detalhe

  • Fico curioso sobre como vocês lidam com o cálculo de frete
    Isso também faz parte da funcionalidade de catálogo de produtos do Stripe?

    • Esse recurso ainda não está pronto, mas estamos trabalhando nele ativamente
      Se você precisa de frete agora, pode terceirizar para um serviço externo, e alguns parceiros estão desenvolvendo a funcionalidade desse jeito. No longo prazo, queremos uma integração mais profunda com o Stripe e fazer dele a infraestrutura central do e-commerce
    • Esses dados podem vir de vários terceiros
      Pessoalmente prefiro o Shippo, conheço os fundadores, e eles já foram integrados ao Weebly, hoje dentro do Square

  • Se não precisa de banco de dados, fico curioso sobre como funciona o controle de estoque
    Por exemplo, se várias pessoas tentarem comprar o mesmo produto ao mesmo tempo e o estoque for insuficiente, o que acontece?

    • No começo, isso foi feito armazenando dados como estoque diretamente nos metadados de produto do Stripe
      Também estamos desenvolvendo uma camada fina para gerenciar a sincronização entre cada loja e o Stripe, por exemplo coisas como atomicidade. Ainda não é a solução ideal, mas funciona bem para a maioria das lojas pequenas, e temos ideias para melhorar. Nesse tipo de situação, uma configuração composable/headless pode acabar sendo um peso a mais

  • Testei a demo e, como outras pessoas disseram, está realmente muito bem feita e rápida
    Mas encontrei um bug ao tentar remover um produto do carrinho colocando a quantidade em 0: começa um recarregamento e a interface trava. Não sei se é por esse comportamento ou pelo tráfego atual, mas achei bom avisar

    • Confirmamos esse bug e obrigado por avisar
      Fizemos várias melhorias iterativas nessa parte recentemente, mas parece que algo escapou

  • Bem fluido, e gostei do suporte ao Umami
    Seria bom encapsular isso de uma vez num Dockerfile, mas para uso pessoal não parece difícil fazer manualmente. Faz um tempo que não uso Stripe fora de assinaturas, então fico curioso sobre quão difícil seria suportar cupons de desconto ou promoções. Há planos para isso?

    • Estamos experimentando várias coisas agora, começando pelo Umami, mas também estamos considerando criar nós mesmos sub-recursos de analytics voltados para e-commerce
      Cupons estão no roadmap e parecem relativamente simples de adicionar. Também fico curioso se você toparia participar de um beta test conosco. O Dockerfile foi sugerido pela comunidade e devo revisar isso hoje: https://github.com/yournextstore/yournextstore/pull/22/files

  • A demo é rápida porque ela prefetch da listagem quando você passa o cursor do mouse ou toca nela
    Isso também é possível em e-commerce tradicional, e não gosto desse tipo de experiência que desperdiça dados do usuário. Existe opção para desativar o prefetch?

    • Claro. Como é open source, você pode fazer um fork e desativar o prefetch
      Mas, pensando na experiência do usuário, não acho que isso seja o ideal
    • Parece que o que dá para configurar no next.js também se aplica aqui
      Mas descobri que não existe uma forma de desativar o prefetch globalmente[0]. É preciso desativar em cada link individualmente ou criar e usar um componente de link customizado
      [0] https://github.com/vercel/next.js/discussions/24437

  • Muito bom. Eu estava justamente procurando algo assim
    Só que durante a instalação tive um erro de hash incompatível do pnpm@9.9.0 em corepack install. O hash esperado e o recebido eram diferentes, causando Internal Error: Mismatch hashes

    • Atualizei o pnpm para 9.10.0 e agora está tudo certo
    • Acho que primeiro vou precisar investigar mais a configuração
      Você pode tentar remover completamente o packageManager do package.json e tentar de novo? Se for possível, eu gostaria de fazer uma rápida chamada de vídeo para ver diretamente o ambiente onde isso está sendo reproduzido. No momento, não consigo reproduzir isso por aqui