next shopify storefront

? Следующая магазина Shopify

Корзина для покупок, построенная с TypeScript, Taillid CSS, безголовым пользовательским интерфейсом, Next.js, React.js, Shopify Hydrogen React, ... и Shopify Storefront GraphQL API.

Учебные пособия

• Как организовать устойчивый проект Next.js?
• Как обрабатывать типовые модульные данные, выбирающие в next.js?
• Как мне безопасно взаимодействовать с API GraphQL в next.js?
• Как внедрить динамический селектор вариантов для Shopify в next.js?

Опыт

Это мой опыт, когда я работал над этим проектом:

• Проектирование и строительство магазина с нуля.
• Создание следующих утилит для извлечения модульных данных, безопасных для типа.
• Создание коммунальных услуг Shopify для упрощения выбора варианта.
• Использование graphql Zeus для взаимодействия с API Storefront.
• Использование Shopify Wydrogen для реализации функций магазина.
• Используя пользовательский интерфейс CSS и без головы для построения пользовательского интерфейса магазина.
• Использование Next.js для постепенной статической регенерации.
• Использование следующего SEO для реализации поисковой оптимизации.
• Использование TypeScript для безопасного создания крючков React и компонентов.
• Использование React Используйте крючки для ускорения развития компонентов.
• Использование SWIPER для создания красивых, осязаемых, отзывчивых ползунков.
• Используя Eslint, красивее, чтобы следовать за лучшими практиками.

Если вам нравится этот проект, нажмите кнопку звезды , чтобы добавить его в закладки ️

Демонстрация

Вы можете посетить здесь, чтобы увидеть демонстрацию: https://next-shopify-storefront.vercel.app/

Установка

Клонировать исходный код в свой компьютер.

git clone https://github.com/maxvien/next-shopify-storefront.git

Установите зависимости проекта.

npm install

Использование

Во -первых, вам необходимо установить приведенные ниже переменные среды в файле .env или ваших платформах развертывания.

• NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN
• NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION

Вы можете следовать документации по API Shopify GraphQL, чтобы получить информацию API StoreFront.

Развивать

Разработать проект в режиме разработки.

npm run dev

Строить

Создайте проект в производственном режиме.

npm run build

Начинать

Начните проект в производственном режиме.

npm run start

Пронзительный

Проанализируйте код, чтобы найти проблемы с eslint и prettier .

npm run lint

Автоматически исправляет проблемы.

npm run fix

Расширения кода Visual Studio

Чтобы ускорить производительность, вы можете установить эти расширения:

• Эслинт
• Красивее
• Visual Studio Intellicode
• Tailwind CSS Intellisense
• Postcss Language Support

Связанные проекты

• Shopify Data Faker • Инструмент разработки Shopify для создания фиктивных данных о магазине.
• Bootstrap Shopify Theme • Бесплатная тема Shopify, построенная с начальной загрузкой, BEM, жидкостью, Sass, Esnext, Theme Tools, ... и WebPack.
• Next Shopify Storefront (V2) • Корзина для покупок, построенная с TypeScript, Emotion, Next.js, React.js, React Query, Shopify StoreFront GraphQL API, ... и материальный пользовательский интерфейс.
• Next Shopify Storefront (v1) • Корзина для покупок, построенная с TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... и материальный пользовательский интерфейс.

Звездная история