nextjs woocommerce restapi

? 다음 .js WooCommerce REST API

• Next.js에서 분리 된 아키텍처를 사용하여 WooCommerce 테마를 반응하십시오
• WordPress의 백엔드
• 반응의 프론트 엔드.
• 데이터는 REST API를 통해 가져옵니다.

특징

• 홈페이지
• 갤러리 회전 목마가있는 단일 제품 페이지.
• 카트 페이지
• 스트라이프 결제 게이트웨이 통합이있는 체크 아웃 페이지.
• API 엔드 포인트를 놓으십시오.
• WordPress 메뉴 항목에서 가져 오기 JS의 헤더 및 바닥 글.
• WordPress 위젯은 Next.js Frontend에 표시됩니다.
• 사이트 제목, 태그 라인, 저작권 텍스트, WordPress에서 소셜 링크.
• Yoast SEO 지원
• 다음 .js 이미지 구성 요소, 요청 시간에 이미지 최적화가있는 이미지 구성 요소
• 다음에 다시 건설 할 필요없이 새로운 정적 (RE) 생성 및 자동 생성 및 자동 생성 애플리케이션을 다시 작성하지 않고도 자동 생성.
• Gutenberg 스타일 지원
• Pagination이있는 블로그 페이지
• 단일 게시물
• 페이지
• 404 페이지
• 주석을 표시합니다
• 댓글 게시 (주석 양식 사용)
• 게시 미리보기 (곧 출시)
• 제품 페이지 매김 (곧 출시)
• 더 많은 제품로드 (곧 출시)
• JWT 및 HTTP 전용 쿠키 구현 인 인증. (곧)
• Next.js에서 WP 게시물 미리보기에 로그인 기능 (곧 출시)

튜토리얼 코스

라이브 데모 링크

설정

첫 번째 복제/포크 리베르와 CD를 넣습니다.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

WordPress에 헤드리스 기능을 추가하십시오

• 다음 WordPress 플러그인을 설치하고 활성화하십시오.

• 헤드리스 CM
• Woocommerce

구성 ?

1. (필수) .env-example 에서 참조를 취하는 .env 파일을 작성하고 WordPressSite URL 및 Frontend Next.js URL을 업데이트하십시오.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (이것은 당신의 프론트 엔드가 될 것입니다. js url)

2. WC_CONSUMER_KEY 및 WC_CONSUMER_SECRET WOOCOMMERCE> 설정> 고급> REST API에 따라 .env 에 추가하십시오.

3. WordPress 대시 보드에서 설정> 일반> 사이트 주소 (URL)로 이동 (개발 중 http : // localhost : 3000)로 설정하십시오.

4. WordPress 대시 보드에서 헤더 및 바닥 글을 각각 HCMS 헤더 메뉴와 HCMS 바닥 글 메뉴로 설정하십시오.

유용한 링크

• 줄무늬
• 스트라이프 API 키를 얻습니다

버전 작성?

버전 관리에 git을 사용합니다.

작가 ?

• Imran은 말했다

라이센스?

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 License.md 파일을 참조하십시오.