Далее Js Commerce — обзор и рекомендации

Как разработчики, у нас есть эта непреклонная потребность следовать новейшим технологиям. Нами движет эта ненасытная жажда узнать все, абсолютно все, о каждой большой и инновационной технологии. Мы жаждем эксклюзивно заглянуть в будущее – и это желание заставляет нас двигаться вперед. Наши поиски новейших технологий электронной коммерции привели нас к Next Commerce.

Next Commerce — это последнее предложение от BigCommerce в сотрудничестве с командами Next.js и Vercel. С помощью Next Commerce разработчики электронной коммерции могут за считанные минуты установить полностью автономное приложение, интегрированное с BigCommerce. Это первая попытка такого рода как от Next, так и от BigCommerce.

Безголовая коммерция — это, вероятно, то, на что, скорее всего, похоже будущее электронной коммерции. Безголовая коммерция позволяет разработчикам легко проектировать и разрабатывать инновационные приложения, выходить на более широкий глобальный рынок и помогает графику продаж магазина электронной коммерции указывать на север.

Согласно отчету о производительности сайта, в опросе 120 руководителей электронной коммерции 62% высказали мнение, что безголовая коммерция может значительно улучшить коэффициент конверсии и вовлеченность клиентов.

Мы рады показать вам, насколько легко установить и невероятно использовать это последнее предложение от BigCommerce и Next. Это пошаговое руководство — все, что вам нужно, чтобы начать работу с Next Commerce.

Мы начнем с обзора.

Обзор Next Commerce

Next.js — это широко используемая веб-инфраструктура с открытым исходным кодом, с помощью которой вы можете создавать свои собственные приложения — как для рендеринга на стороне сервера, так и для статических приложений с использованием React. В настоящее время фреймворк предоставляет нам Next.js Commerce. Это комплект разработчика, с помощью которого мы можем создавать чрезвычайно высокопроизводительные, настраиваемые и привлекательные сайты электронной коммерции. Предлагаясь вместе с надежной открытой платформой SaaS, такой как BigCommerce, возможности и потенциал Next Commerce огромны.

Почему рынок движется к безголовой электронной коммерции?

Next.js — это мощный инструмент для создания вашего сайта электронной коммерции. Это полная и надежная архитектура, которую можно масштабировать, настраивать и настраивать для различных реализаций электронной коммерции.

Хотя Next.js расширяет ряд преимуществ, вот некоторые из них:

• Рендеринг сервера

  Компоненты React могут быть обработаны на стороне сервера до того, как HTML-код будет отправлен клиентам.

• Горячая перезагрузка кода

  Каждый раз, когда Next.js обнаруживает изменения, страница перезагружается. Любой URL автоматически направляется в файловую систему. Это не требует от вас каких-либо навыков настройки. Тем не менее, вы всегда можете настроить его в соответствии с вашими потребностями.

• Совместимость с экосистемой

  Next.js хорошо совместим с React, Node и, конечно же, с JavaScript.

• Автоматическое разделение кода

  Страницы поставляются только с библиотеками и JavaScript — больше ничего. Вместо создания одного JavaScript, содержащего все коды приложения, Next.js фактически разбивает приложение на различные ресурсы, упрощая весь процесс.



• Поддержка машинописного текста

  Поскольку Next.js написан на TypeScript, он предлагает полную поддержку.

• Предварительная загрузка

  Предварительная загрузка поддерживается компонентом Link, который автоматически извлекает ресурсы страницы — даже те, которые автоматически выбрасываются кодом.

• Гибридные приложения

  Используя Next.js, можно использовать как SSR, так и статические веб-приложения в одном проекте.

• Настройка не требуется

  Эта готовая к работе платформа идеально подходит для инженерных групп, которые пытаются обеспечить масштабируемость и простоту использования для магазинов электронной коммерции. Он поставляется с автоматической компиляцией и пакетированием, встроенной поддержкой CSS, маршрутизацией файловой системы, автоматическим разделением кода и созданием API.

Обзор развертывания

Теперь, когда у вас есть общее представление о Next Commerce, давайте быстро перейдем к более интересным деталям — развертыванию. Начнем с предпосылок. Next.js не очень прилипчив, поэтому он поставляется с минимальными требованиями.

Предпосылки

• IDE
• TypeScript вместо JavaScript
• Основные ноу-хау API BigCommerce
• Каталог для /pages и /public. Каталог для /pages будет иметь _app.tsx и index.tsx
• Каталог для /public будет иметь носители, которые могут обслуживаться статически.
• Кроме того, /pages также будут иметь страницы магазина электронной коммерции с их маршрутами.
• Любой поставщик Git — будь то Bitbucket, GitHub или GitLab.
• НПМ

Это основные требования к вашей функциональности Next Commerce. Вы всегда можете реорганизовать остальные каталоги позже.

Пакеты и конфигурация

В дополнение к NPM и Yarn при запуске Next Commerce для начала используются файлы .env и .config.

Чтобы приложение работало должным образом, вам необходимо использовать пакет BigCommerce Storefront Data Hooks. Хуки можно повторно использовать в соответствии с потребностями компонентов. Вы можете найти компоненты в каталоге /components, и они отображаются на страницах. Ссылка от хуков к компонентам и страницам требует больших объемов данных с витрины. Если вы не хотите тратить целое состояние на затраты на разработчиков, вы можете легко использовать пакет BigCommerce Storefront Data Hooks в своих интересах.

Этот пакет поможет вам получить доступ к категориям, важным данным о клиентах, страницам продуктов, деталям и многому другому. После того, как вы успешно установили пакет, вы можете связать свои переменные .env с соответствующей парой ключ-значение на витрине магазина BigCommerce.

Файлы .env автоматически сохраняются в Vercel. Вы можете легко получить файл .env с помощью команды «vercel env pull». Теперь вы можете настроить API-ключи магазина BigCommerce и токен GraphQL с помощью файла .env.local.

Следующим шагом является настройка файлов .config. tsconfig.json позволяет вам скомпилировать JavaScript для вашего проекта, а next.config.js — это модуль node. Многие разработчики упускают это из виду, но настоятельно рекомендуется, если вы хотите реализовать какую-либо конкретную функциональность.

Запуск проекта

Запустить проект на сервере среды разработки довольно просто. Все, что вам нужно сделать, это использовать следующую команду:

разработчик пряжи или npm run dev

Развертывание

Создание Next.js Commerce также довольно просто — посетите nextjs.org/commerce и нажмите кнопку «Клонировать и развернуть». К концу вы сможете запустить и запустить собственное приложение на Vercel — с логотипом вашего магазина. После развертывания вы можете настроить свой магазин в соответствии со своими потребностями.

Мы будем выполнять процесс интеграции шаг за шагом.

Шаг 1:

Как только вы нажмете кнопку «Клонировать и развернуть», вы можете начать развертывание с помощью Vercel с поставщиком Git.

Если у вас есть учетная запись Vercel, вы можете войти, используя свои учетные данные.

Если у вас нет учетной записи Vercel, вам будет предложено создать учетную запись, используя любого из поставщиков Git по вашему выбору.

Шаг 2:

После входа в учетную запись Vercel вы увидите диалоговое окно Clone Git Repository с раскрывающимся списком. Выберите свою учетную запись Vercel, введите название своего проекта в соответствующем поле и нажмите «Продолжить».

Шаг 3:

Следующим шагом будет установка интеграций. Чтобы подключить магазин BigCommerce к проекту Vercel, нажмите кнопку «Установить». После того, как вы нажмете кнопку «Установить», вы должны увидеть экран «Добавить BigCommerce на экран проекта Vercel».

Шаг 4:

Если у вас уже есть магазин BigCommerce, вы можете просто войти в систему, используя существующие учетные данные, чтобы интегрировать Vercel и BigCommerce. Однако, если вы новичок в BigCommerce, вы нажимаете «Зарегистрироваться».

Страница регистрации поможет вам создать песочницу разработчика с помощью простой формы. Введите свои данные и примите все условия для регистрации. Нажмите «Продолжить», когда увидите синюю галочку рядом с вкладкой интеграции с BigCommerce.

Шаг 5:

Теперь вы можете создать репозиторий Git, введя имя вашего репозитория. Нажмите «Продолжить».

Шаг 6:

Как только вы попадете на экран «Импорт проекта», вы сможете подтвердить настройки своего проекта и нажать «Развернуть». Все развертывание не должно занимать более нескольких минут.

После завершения развертывания в Vercel вы сможете увидеть эскиз развернутого сайта.

Поздравляем, ваш проект успешно запущен!

Реагировать + Next.js

Вы можете настроить свой магазин электронной коммерции с помощью генератора Next — SSR для React, а затем развернуть его в Vercel. Используя шаблоны Crystallize и Next.js, вы можете легко создать витрину электронной коммерции для веб-разработки Jamstack. Теперь мы будем использовать CLI Crystallize для разработки нового проекта.

Введите следующую команду в терминале.

npx @crystallize/кли

С помощью этой команды вы сможете добавить предпочитаемый шаблон, выбрать собственный клиент или выбрать демонстрационный клиент и добавить API службы.

Для развертывания в Vercel вам потребуются следующие основные требования, установленные на вашем компьютере.

• Интерфейс командной строки Vercel
• Поставщик Git
• По крайней мере, версия 10 Node.js
• Арендатор, подписавшись на Crystallize

Запустите проект на сервере разработки, используя:

разработчик пряжи или npm run dev

Благодаря этому вы можете получить доступ к сайту разработки, понять структуру приложения и редактировать страницы в соответствии с вашими требованиями.

Когда вы закончите создавать страницы для различных форм элементов, вы можете начать развертывание в Vercel.

Опять же, чтобы развернуть свой проект в Vercel, вам необходимо пройти интеграцию Vercel Github. Однако вы также можете легко выполнить развертывание вручную. Используйте командную строку для ввода — vercel login — установите две переменные среды с помощью панели управления Vercel.

Для развертывания вашего проекта с помощью Vercel требуется поставщик Git. Отправьте свой проект поставщику Git, и вы почти закончили — развертывание будет инициировано.

Подведение итогов

Наступила эра безголовой электронной коммерции. Традиционная разработка сайта электронной коммерции была сосредоточена на предложении полного стека с хорошо связанным интерфейсом и серверной частью. Это помогло магазинам быстро запустить свои приложения. Однако вскоре вы столкнетесь со сбоями в производительности — что наиболее важно, вы не сможете масштабироваться так, как вам хотелось бы. Но с безголовой электронной коммерцией вам не нужно так много бороться.

Безголовый дизайн дает вам большую свободу в разработке собственного внешнего интерфейса с нуля или использования предварительно созданного. У вас будет возможность быстро реагировать на изменения на рынке и соответствующим образом настраивать взаимодействие с клиентами. Самое главное — вы можете вносить изменения в свой интерфейс, не вмешиваясь в ваш сервер. Теперь вы знаете, почему, как разработчики, мы уверены, что будущее электронной коммерции, безусловно, безголовое.