Магазин на Next.js можно поднять из шаблона: Vercel Shop работает поверх Shopify

Shopify и Vercel перестраивают Hydrogen: новая версия открытая и работает везде, где есть JavaScript. Поддерживаются Next.js, Nuxt и Svelte. В блоге Vercel от 30.07 пример ретейлера Paige: разработка фич сократилась с месяцев до недели.

Не хотите разбираться сами? Внедряем ИИ в ваш бизнес: задачи без лимита, одна цена в месяц, отмена в любой момент.

Как запустить витрину?

Старт. Команда `pnpm create next-app@latest my-store --example https://github.com/vercel/shop`, потом `pnpm dev`, и витрина открывается на localhost:3000.

В Shopify создаётся storefront: раздел Sales channels, пункт Headless. Из него берётся public access token.

В .env заполняются три переменные: NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN, NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN и NEXT_PUBLIC_SHOPIFY_SHOP_ID. Домен берётся в Settings, пункт Domains. Shop ID это число из URL customer accounts.

Если магазин уже есть в Shopify, интеграция Shopify в Vercel сама настраивает эти креды в проекте.

Для деплоя репозиторий отправляют в Git и импортируют на сайте Vercel, либо ставят CLI командой pnpm add -g vercel и запускают vercel. Переменные нужно добавить до первого продакшн-деплоя.

В шаблоне есть контекст для агентов, петли обратной связи и плагины, привязанные к проекту. Для агентов открыты /llms.txt со всей документацией в Markdown и /sitemap.md.

Бета или GA?

Свой магазин мерча Vercel, vercel.store, работает на Vercel Shop.

Статус. Твит говорит «GA», а доки Vercel Shop пишут «бета» до выхода Shopify Hydrogen SDK в полную версию.