Полный стек NextJs + Shadcn + Supabase Template


| Особенность | Бесплатная версия | Оплаченная версия |
|---|---|---|
| Next.js v13 | ✅ | ✅ |
| /каталог приложений | ✅ | ✅ |
| Tailwind CSS | ✅ | ✅ |
| Компоненты Shadcn | ✅ | ✅ |
| Vercel ai sdk | ✅ | ✅ |
| Supabase Integration | ✅ | ✅ |
| Мобильный отзывчивый | ✅ | ✅ |
| Отправить продукт RSC | ✅ | ✅ |
| Темный и легкий режим | ✅ | ✅ |
| Аутентификация пользователя | ✅ | ✅ |
| Фильтры продукта | ✅ | ✅ |
| Пользовательские цветные темы | ✅ | ✅ |
| Бесплатные обновления | ✅ | ✅ |
| Административная панель | ✅ | |
| Административная аналитика | ✅ | |
| Обогащение данных об объемном искусственном интеллекте | ✅ | |
| Лицензия | GPL-2.0 | Коммерческий |
| Ценообразование | Бесплатно | $ 119 |
Присоединяйтесь к культу

Когда вы присоединяетесь к культу, вы получаете пожизненный доступ к множеству других премиальных шаблонов.
| Шаблон | Описание | Функции | Связь |
|---|---|---|---|
| Путешествие | Оффлайн-первое приложение Travel с синхронизацией в реальном времени и поддержкой PWA, предназначенное для управления и планирования целей путешествий. | Офлайн-возможности, синхронизация в реальном времени, поддержка PWA, Next.js, Tailwind CSS, Claude AI, RXDB Progressive Web App | Путешествие |
| Культ SEO | Инструмент для ползания веб-сайтов, оценки SEO и обеспечения улучшений, управляемых искусственным интеллектом. | RSC Web Scraping, Web Vitals, структурированный вывод искусственного интеллекта, Next.js, Tailwind CSS, Claude AI | Культ SEO |
| Манифест | Полный шаблон для доставки приложений ИИ с векторными встроениями и извлечения тряпки. | Векторные встраивания, поиск тряпки, Supabase, Next.js, Tailwind CSS, Open AI | Манифест |
| Целевая страница | Целевая страница подписки на проектирование. | Анимация, уникальная навигация, Next.js, Tailwind CSS | Целевая страница |
| Бэкэнд | Различные шаблоны бэкэнд для разных потребностей. | Различные бэкэнд -решения и фрагменты для различных вариантов использования. | Бэкэнд |
Каждый из этих шаблонов полностью спроектирован, а производство готово как культовая ректора. Культовый стек следующего.
Разработанный, чтобы помочь вам быстро создать и запустить хорошо разработанные стартапы.
Посмотрите видео на адаптирование, чтобы быстро вращаться
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>
Создайте проект Supabase на приборной панели Supabase или через CLI:
npx supabase projects create -i " your-saas-app "Ваш идентификатор организации можно найти в URL после выбора орг.
Свяжите свой CLI с проектом:
npx supabase init
npx supabase linkВыберите только что созданный проект.
.env.local для next.js Магазин supabase url и public anon key in .env.local для next.js:
NEXT_PUBLIC_SUPABASE_URL= < api-url >
NEXT_PUBLIC_SUPABASE_ANON_KEY= < anon-key >Вы можете получить URL API Project и анонимный ключ со страницы настроек API.
Настройка Схема БД:
Это запустит все миграции, расположенные в каталоге
supabase/migrations
supabase db push.env настроены правильно 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.. " В отдельном терминале запустите следующие команды:
pnpm ipnpm run devОткройте http: // localhost: 3000 в вашем браузере.
Ограничение скорости SMTP по умолчанию для Supabase сейчас очень низкое.
Поставщики электронной почты - страница настроек API.

Чтобы добавить новые продукты в свой каталог, просто посетите страницу отправки:
Отправить продукты
Теперь у вас есть полностью засеянная база данных со всеми данными, необходимыми для начала создания собственного культового каталога.
Только платная версия
Присоединяйтесь к культу



Ограничение скорости SMTP по умолчанию для Supabase сейчас очень низкое.
Поставщики электронной почты - страница настроек API.

Если вам нужно подтверждение по электронной почте, следуйте этим руководствам
Авторизоваться

Получить со страницы настроек API таблицы пользователей Auth Auth.
В .env.local копировать переменную SUPABASE_ADMIN_ID и вставьте ее в редактор SQL.
Перейдите в редактор SQL на странице настроек Supabase API.
UPDATE auth . users
SET raw_app_meta_data = jsonb_set(
coalesce(raw_app_meta_data, ' {} ' ),
' {claims_admin} ' ,
' true ' ::jsonb
)
WHERE id = ' USER_UUID ' ; Чтобы назначить права администратора пользователю, запустите следующий скрипт SQL. Замените 'USER_UUID' на тот же идентификатор пользователя, который вы скопировали из таблицы пользователей Auth.
Сценарий семян довольно сложный. Существуют обзор Docs 0.
supabase/seed/src/README.mdи документы для каждого этапа:
supabase/seed/src/stage-1-crawl/readme.mdsupabase/seed/src/stage-2-enrich/readme.mdsupabase/seed/src/stage-3-seed/readme.mdЯ пытался сделать это как можно дешевле. В зависимости от уровня поддержки API вы можете повысить производительность сценариев, играя с параллелизмом и временными значениями.
Вам нужен либо ANTHROPIC_API_KEY , либо ANTHROPIC_API_KEY в вашем .env.local для запуска supabase/seed/src/stage-2-enrich .
Если у вас есть ключ API, скопируйте его в свой файл .env.local .
При желании отредактируйте переменную SEED_URLS в supabase/seed/src/main.ts чтобы включить URL -адреса, которые вы хотите очистить и обогатить.
Запустите сценарий:
pnpm run enrich-seed Если у вас нет ключа API, я включил предварительно обогащенный набор данных предыдущего прогона. Вы можете увидеть это в supabase/seed/src/stage-2-enrich/__data__/enriched-20240611T210738.json .
Чтобы использовать этот набор данных вместо обогащения, используя ваши ключи:
Откройте файл в supabase/seed/src/main.ts .
Комментируйте строки 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")Запустите сценарий:
pnpm run enrich-seedУправляйте контентом и пользователями вашего каталога через административную панель. Получить доступ к нему здесь:
Административная панель
Чтобы придать вашему каталогу уникальный вид, создайте пользовательскую цветовую тему:
Создайте вашу тему
Посетите страницу темы Custom Shadcn, чтобы разработать вашу тему.
Примените свою тему
После того, как у вас есть тема, скопируйте соответствующий CSS и вставьте ее в свой файл app/globals.css , заменив строки 5-67.
Создайте новый репозиторий и подтолкните проект на GitHub.
Перейдите в Vercel и импортируйте репозиторий GitHub: развернуть.
Настройка переменных среды в Vercel
Перейдите в настройки своего проекта на Vercel и настройте переменные среды, копируя контент из вашего файла .env.local . Убедитесь, что следующие переменные включены:
NEXT_PUBLIC_SUPABASE_URL - ваш URL API SupabaseNEXT_PUBLIC_SUPABASE_ANON_KEY - ваш анонимный ключ SupabaseSUPABASE_PROJECT_ID - ваш идентификатор проекта SupabaseSUPABASE_ADMIN_ID - идентификатор пользователя администратора для вашего приложенияВот пример того, как могут выглядеть переменные вашей среды:
NEXT_PUBLIC_SUPABASE_URL="https://abcd1234.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
SUPABASE_PROJECT_ID="abcd1234"
SUPABASE_ADMIN_ID="efgh5678"
Развернуть проект
После того, как ваши переменные среды установлены, вы можете развернуть свой проект. Vercel будет обрабатывать процесс сборки и развертывания для вас.
Доступ к своему живому приложению
После развертывания вы можете получить доступ к своему живому приложению через URL -адрес, предоставленный Vercel. Ваше приложение теперь должно быть живым и готовым к использованию.
Добро пожаловать в культ! :)
Следуйте шагам, описанным в этом Readme, чтобы развернуть и настроить приложение Directory. Если у вас есть какие -либо вопросы или столкнуться с проблемами, не стесняйтесь обратиться за поддержкой в Twitter: https://x.com/nolansym
Ваше здоровье! Разоблался, увидев, что вы строите!
Другие бесплатные товары

Cult UI - это коллекция красиво разработанных компонентов React, построенных с Radix UI и Tailwind CSS. Эти компоненты оптимизированы для простоты использования и интеграции, что делает его простым для создания визуально привлекательных и функциональных веб -приложений.
Шаблон AI-это шаблон полного стека, предназначенный для создания приложений с AI. Он использует Next.js, Tailwind CSS, Supabase и OpenAI, чтобы обеспечить надежную основу для разработки сложных решений для ИИ.
Прокрутите вверх