? 다음으로 Shopify Storefront
TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React ... 및 Shopify Storefront GraphQL API로 제작 된 쇼핑 카트 .
튜토리얼
- Sustainable Next.js 프로젝트를 어떻게 구성합니까?
- ToinesAfe Modular Data Fetching in Next.js를 어떻게 처리합니까?
- Next.js의 GraphQL API와 안전하게 상호 작용하려면 어떻게해야합니까?
- Shopify for Shopify에서 동적 변형 선택기를 구현하려면 어떻게합니까?
경험
이 프로젝트를 수행했을 때의 경험입니다.
- 처음부터 상점을 설계 및 구축합니다.
- 유형-안전 모듈 식 데이터 가져 오기에 대한 다음 유틸리티 생성.
- 변형 선택을 단순화하기위한 Shopify 유틸리티 작성.
- GraphQL Zeus를 사용하여 Storefront API와 상호 작용합니다.
- Shopify Hydrogen을 사용하여 매장 기능을 구현합니다.
- Tailwind CSS 및 Headless UI를 사용하여 Storefront UI를 구축합니다.
- 증분 정적 재생을 위해 다음.js를 사용합니다.
- 다음 SEO를 사용하여 검색 엔진 최적화를 구현합니다.
- TypeScript를 사용하여 반응 후크 및 구성 요소를 안전하게 만듭니다.
- React 사용 후크를 사용하여 구성 요소 개발 속도를 높입니다.
- 스 와이퍼를 사용하여 아름답고 감동성이 뛰어나고 반응이 좋은 슬라이더를 만듭니다.
- Eslint를 사용하여 Pretier를 사용하여 다음 .js 모범 사례를 따릅니다.
이 프로젝트가 마음에 드시면 스타 버튼을 누르면 북마크를 추가하십시오.
데모
여기를 방문하여 데모를 볼 수 있습니다 : https://next-shopify-storefront.vercel.app/
설치
소스 코드를 컴퓨터에 복제하십시오.
git clone https://github.com/maxvien/next-shopify-storefront.git
프로젝트의 종속성을 설치하십시오.
용법
먼저 .env 파일 또는 배포 플랫폼에서 아래 환경 변수를 설정해야합니다.
-
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN -
NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_TOKEN -
NEXT_PUBLIC_SHOPIFY_STOREFRONT_API_VERSION
Shopify Storefront GraphQL API 문서를 따라 Storefront API 정보를 얻을 수 있습니다.
개발하다
개발 모드에서 프로젝트를 개발하십시오.
짓다
생산 모드에서 프로젝트를 구축하십시오.
시작
생산 모드에서 프로젝트를 시작하십시오.
보풀
eslint 및 prettier 와의 문제를 찾기 위해 코드를 분석하십시오.
자동으로 문제를 해결합니다.
비주얼 스튜디오 코드 확장
생산성 속도를 높이려면 다음을 설치할 수 있습니다.
- eslint
- 더 예쁘다
- Visual Studio Intellicode
- Tailwind CSS Intellisense
- Postcss 언어 지원
관련 프로젝트
- Shopify Data Faker • 더미 스토어 데이터를 생성하기위한 Shopify 개발 도구.
- Bootstrap Shopify 테마 • Bootstrap, BEM, Liquid, Sass, Esnext, 테마 도구 및 웹 팩으로 제작 된 무료 Shopify 테마.
- Next Shopify Storefront (v2) • TypeScript, Emotion, Next.js, React.js, React Query, Shopify Storefront GraphQL API ... 및 Material UI로 제작 된 쇼핑 카트.
- Next Shopify Storefront (v1) • TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API 및 Material UI로 제작 된 쇼핑 카트.
스타 역사
