Uma pilha completa NextJs + Shadcn + Supabase


| Recurso | Versão gratuita | Versão paga |
|---|---|---|
| Next.js v13 | ✅ | ✅ |
| /diretório de aplicativos | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| Componentes do shadcn | ✅ | ✅ |
| VERCEL AI SDK | ✅ | ✅ |
| Integração Supabase | ✅ | ✅ |
| Mobile Responsive | ✅ | ✅ |
| Envie o produto RSC | ✅ | ✅ |
| Modo escuro e claro | ✅ | ✅ |
| Autenticação do usuário | ✅ | ✅ |
| Filtros de produtos | ✅ | ✅ |
| Temas de cores personalizadas | ✅ | ✅ |
| Atualizações grátis | ✅ | ✅ |
| Painel de administrador | ✅ | |
| Analytics Admin | ✅ | |
| Enriquecimento de dados de IA em massa | ✅ | |
| Licença | GPL-2.0 | Comercial |
| Preço | Livre | $ 119 |
Junte -se ao culto

Quando você ingressa no culto, você obtém acesso ao longo da vida a uma variedade de outros modelos premium.
| Modelo | Descrição | Características | Link |
|---|---|---|---|
| Esconderijo de viagem | O primeiro aplicativo de viagem offline com o suporte em tempo real e o suporte da PWA, projetado para gerenciar e planejar as metas de viagem. | Recursos offline, sincronização em tempo real, suporte PWA, Next.js, Tailwind CSS, Claude AI, RXDB Progressive Web App | Esconderijo de viagem |
| SEO cult | Ferramenta para rastrear sites, classificar SEO e fornecer melhorias orientadas pela IA. | RSC Web Rasping, Web Vitoss, saída de IA estruturada, Next.js, CSS do Tailwind CSS, Claude AI | SEO cult |
| Manifesto | Modelo de pilha completa para enviar aplicativos de IA com incorporações de vetor e recuperação de pano. | INCLUMAS VECTORES, REGRIEVEL, SUPABASE, NEXT.JS, TAILWIND CSS, ABRA AI | Manifesto |
| Página de destino | Design Página de desembarque de assinatura. | Animação, navegação única, next.js, cauda de vento CSS | Página de destino |
| Back -end | Vários modelos de back -end para diferentes necessidades. | Várias soluções de back -end e trechos para diferentes casos de uso. | Back -end |
Cada um desses modelos está bem projetado e a produção pronta como diretor de culto. A pilha de culto é a próxima.js, shadcn, cauda de vento, supabase e o vercel ai sdk.
Projetado para ajudá -lo a criar e lançar startups bem projetadas rapidamente.
Assista ao vídeo de integração para girar rapidamente
Mac: brew install supabase/tap/supabase
Windows:
scoop bucket add supabase https: // github.com / supabase / scoop - bucket.git
scoop install supabase Linux: brew install supabase/tap/supabase
NPM/BUN: npx supabase <command>
Crie um projeto Supabase no painel Supabase, ou através da CLI:
npx supabase projects create -i " your-saas-app "Seu ID da organização pode ser encontrado no URL após selecionar uma organização.
Ligue sua CLI ao projeto:
npx supabase init
npx supabase linkSelecione o projeto que você acabou de criar.
.env.local para o próximo.js Armazene URL Supabase e Chave Public Anon em .env.local para o próximo.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >Você pode obter o URL da API do projeto e a chave anônima na página Configurações da API.
Configuração do esquema DB:
Isso será executado todas as migrações localizadas no diretório
supabase/migrations
supabase db push.env estão configuradas corretamente cp .env.local.example .env.local # Example Supabase Config
NEXT_PUBLIC_SUPABASE_URL= " https://examplesqnwerasdfaser.supabase.co "
SUPABASE_PROJECT_ID= " examplesqnwerasdfaser "
NEXT_PUBLIC_SUPABASE_ANON_KEY= " xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.. " Em um terminal separado, execute os seguintes comandos:
pnpm ipnpm run devAbra http: // localhost: 3000 no seu navegador.
A taxa de SMTP padrão limitadora para supabase está muito baixa agora.
Provedores Email - página Configurações da API.

Para adicionar novos produtos ao seu diretório, basta visitar a página de envio:
Enviar produtos
Agora você tem um banco de dados totalmente semeado com todos os dados necessários para começar a criar seu próprio diretório de culto.
Apenas versão paga
Junte -se ao culto



A taxa de SMTP padrão limitadora para supabase está muito baixa agora.
Provedores Email - página Configurações da API.

Se você precisar de confirmação por e -mail, siga estes guias
Conecte-se

Recupere a página Configurações da API da tabela de usuários de autenticação.
In .env.local copie a variável SUPABASE_ADMIN_ID e coloque -a no editor SQL.
Vá para o editor SQL na página Configurações da API Supabase.
UPDATE auth . users
SET raw_app_meta_data = jsonb_set(
coalesce(raw_app_meta_data, ' {} ' ),
' {claims_admin} ' ,
' true ' ::jsonb
)
WHERE id = ' USER_UUID ' ; Para atribuir direitos de administrador a um usuário, execute o seguinte script SQL. Substitua 'USER_UUID' pelo mesmo ID de usuário que você copiou da tabela de usuários de autenticação.
O script de sementes é bastante complexo. Existem Visão geral docs 0.
supabase/seed/src/README.mde Docs para cada estágio:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdEu tentei torná -lo o mais barato possível. Dependendo do seu nível de suporte da API, você pode aumentar o desempenho dos scripts jogando com os valores de simultaneidade e tempo limite.
Você precisa do ANTHROPIC_API_KEY ou um ANTHROPIC_API_KEY no seu arquivo .env.local para executar supabase/seed/src/stage-2-enrich .
Se você tiver uma chave de API, copie -a para o seu arquivo .env.local .
Opcionalmente edite a variável SEED_URLS em supabase/seed/src/main.ts para incluir os URLs que você deseja raspar e enriquecer.
Execute o script:
pnpm run enrich-seed Se você não possui uma chave de API, incluí um conjunto de dados pré-enriquecido de uma execução anterior. Você pode ver isso em supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json .
Para usar esse conjunto de dados em vez de enriquecer usando suas chaves:
Abra o arquivo em supabase/seed/src/main.ts .
Comente as linhas 104 - 110 :
// console.log("Step 1: Crawl and save raw data")
// await crawlAndSave(SEED_URLS)
// console.log("Step 1 completed successfully")
// console.log("Step 2: Enrich the latest raw data")
// await enrichLatestData()
// console.log("Step 2 completed successfully")Execute o script:
pnpm run enrich-seedGerencie o conteúdo e os usuários do seu diretório através do painel de administração. Acesse aqui:
Painel de administrador
Para dar ao seu diretório uma aparência única, crie um tema de cores personalizado:
Projete seu tema
Visite a página de tema Shadcn personalizada para projetar seu tema.
Aplique seu tema
Depois de ter seu tema, copie o CSS relevante e cole-o no seu arquivo app/globals.css , substituindo as linhas 5-67.
Crie um novo repositório e empurre o projeto para o GitHub.
Vá para Vercel e importe o repositório do GitHub: implante.
Configurar variáveis de ambiente em vercel
Vá para as configurações do seu projeto no vercel e configure as variáveis de ambiente copiando o conteúdo do seu arquivo .env.local . Verifique se as seguintes variáveis estão incluídas:
NEXT_PUBLIC_SUPABASE_URL - Seu URL da API SupabaseNEXT_PUBLIC_SUPABASE_ANON_KEY - sua chave anônima supabaseSUPABASE_PROJECT_ID - seu ID do projeto supabaseSUPABASE_ADMIN_ID - ID do usuário do administrador para o seu aplicativoAqui está um exemplo de como suas variáveis de ambiente podem ser:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
Implantar o projeto
Depois que suas variáveis de ambiente estiverem definidas, você poderá implantar seu projeto. A Vercel lidará com o processo de compilação e implantação para você.
Acesse seu aplicativo ao vivo
Após a implantação, você pode acessar seu aplicativo ao vivo através do URL fornecido pela Vercel. Seu aplicativo agora deve estar ao vivo e pronto para uso.
Bem -vindo ao culto! :)
Siga as etapas descritas neste Readme para implantar e personalizar seu aplicativo de diretório. Se você tiver alguma dúvida ou ter problemas, sinta -se à vontade para obter suporte no Twitter: https://x.com/nolansym
Saúde! Feliz para ver o que você constrói!
Outros bens gratuitos

A interface do usuário cult é uma coleção de componentes de reação lindamente projetados, construídos com a interface do usuário da Radix e o Tailwind CSS. Esses componentes são otimizados para facilitar o uso e a integração, simplificando a criação de aplicativos da Web visualmente atraentes e funcionais.
O modelo de IA é um modelo de pilha completa projetada para a criação de aplicativos movidos a IA. Ele aproveita o Next.js, o Tailwind CSS, o Supabase e o Openai para fornecer uma base robusta para o desenvolvimento de soluções sofisticadas de IA.
Role até o topo