Next Js Commerce - 개요 및 지침

게시 됨: 2021-07-01

개발자로서 우리는 최신 기술을 따라야 하는 불굴의 욕구가 있습니다. 우리는 모든 거대하고 혁신적인 기술에 대한 모든 것, 절대적으로 모든 것을 배우려는 이 끝없는 갈증에 이끌립니다. 우리는 미래를 배타적으로 엿볼 수 있기를 갈망하며 이러한 열망은 우리를 계속 나아가게 합니다. 최신 전자 상거래 기술에 대한 우리의 탐구는 우리를 – Next Commerce로 이끌었습니다.

Next Commerce는 Next.js 및 Vercel 팀과 협력하여 BigCommerce에서 제공하는 최신 제품입니다. Next Commerce를 사용하면 전자 상거래 개발자는 몇 분 만에 BigCommerce와 통합되는 완전히 헤드리스 애플리케이션을 설치할 수 있습니다. Next와 BigCommerce 모두에서 이러한 종류의 첫 번째 시도입니다.

헤드리스 상거래는 아마도 전자 상거래의 미래 모습일 것입니다. 헤드리스 상거래를 통해 개발자는 혁신적인 앱을 쉽게 설계 및 개발하고 더 넓은 글로벌 시장에 접근하고 전자 상거래 상점의 판매 그래프가 북쪽을 향하도록 돕습니다.

사이트 성능에 대한 보고서에 따르면 120명의 전자 상거래 임원을 대상으로 한 설문 조사에서 62%가 헤드리스 상거래가 전환율과 고객 참여를 크게 향상시킬 수 있다는 의견이었습니다.

BigCommerce와 Next가 제공하는 이 최신 제품을 얼마나 쉽게 설치하고 사용하는 것이 얼마나 놀라운지 보여드리게 되어 기쁩니다. 이 단계별 가이드는 Next Commerce를 시작하는 데 필요한 모든 것입니다.

개요부터 시작하겠습니다.

넥스트 커머스 개요

Next.js는 널리 사용되는 오픈 소스 웹 프레임워크로, React를 사용하여 서버 측 렌더링과 정적 애플리케이션을 모두 사용할 수 있는 고유한 애플리케이션을 구축할 수 있습니다. 현재 프레임워크는 Next.js Commerce를 제공합니다. 그것은 우리가 매우 고성능의 사용자 지정 가능하고 매력적인 전자 상거래 사이트를 구축할 수 있는 개발자 키트입니다. BigCommerce와 같은 강력한 개방형 SaaS 플랫폼과 함께 제공되는 Next Commerce의 가능성과 잠재력은 엄청납니다.

시장이 헤드리스 전자 상거래로 향하는 이유는 무엇입니까?

Next.js는 전자 상거래 사이트를 구축하는 강력한 도구입니다. 다양한 전자 상거래 구현을 위해 확장, 사용자 정의 및 구성할 수 있는 완전하고 강력한 아키텍처입니다.

Next.js는 많은 이점을 확장하지만 다음은 몇 가지 중요한 이점 중 일부입니다.

  • 서버 렌더링

    HTML을 클라이언트에 보내기 전에 React 구성 요소를 서버 측에서 렌더링할 수 있습니다.

  • 핫 코드 재로딩

    Next.js가 변경 사항을 감지할 때마다 페이지가 다시 로드됩니다. 모든 URL은 자동으로 파일 시스템으로 라우팅됩니다. 여기에는 구성 기술이 필요하지 않습니다. 그러나 항상 필요에 따라 사용자 정의할 수 있습니다.

  • 생태계 호환성

    Next.js는 React, Node 및 JavaScript와 매우 호환됩니다.

  • 코드 자동 분할

    페이지에는 라이브러리와 JavaScript만 있고 다른 것은 없습니다. 모든 앱 코드가 포함된 단일 JavaScript를 생성하는 대신 Next.js는 실제로 앱을 다양한 리소스로 분해하여 전체 프로세스를 더 쉽게 만듭니다.

    • Next Js Commerce - 개요 및 지침 1

  • 타입스크립트 지원

    Next.js는 TypeScript로 작성되었기 때문에 완벽한 지원을 제공합니다.

  • 프리페칭

    페이지 리소스를 자동으로 가져오는 Link 구성 요소에서 프리페칭 소품을 지원합니다.

  • 하이브리드 애플리케이션

    Next.js를 사용하면 단일 프로젝트에서 SSR과 정적 웹 애플리케이션을 모두 사용할 수 있습니다.

  • 구성 필요 없음

    이 프로덕션 준비 프레임워크는 전자 상거래 상점에 확장성과 사용 편의성을 제공하려는 엔지니어링 팀에 적합합니다. 자동 컴파일 및 번들링, 내장 CSS 지원, 파일 시스템 라우팅, 자동 코드 분할 및 API 생성과 함께 제공됩니다.

배포 방법에 대한 개요

이제 Next Commerce에 대한 기본적인 이해를 갖추었으므로 더 흥미로운 세부 사항인 배포에 대해 빠르게 살펴보겠습니다. 전제 조건부터 시작하겠습니다. Next.js는 그다지 달라붙지 않으므로 최소한의 요구 사항이 있습니다.

전제 조건
  • IDE
  • JavaScript 대신 TypeScript
  • BigCommerce API의 기본 노하우
  • /pages 및 /public용 디렉토리. /pages의 디렉토리에는 _app.tsx 및 index.tsx가 있습니다.
  • /public의 디렉토리에는 정적으로 제공될 수 있는 미디어가 있습니다.
  • 또한 /pages에는 경로가 포함된 전자 상거래 상점 페이지도 있습니다.
  • Bitbucket, GitHub 또는 GitLab 등 모든 Git 공급자.
  • NPM

다음은 다음 상거래 기능에 대한 기본 요구 사항입니다. 나중에 언제든지 나머지 디렉토리를 재구성할 수 있습니다.

패키지 및 구성

NPM 및 Yarn 외에도 Next Commerce 실행은 .env 및 .config 파일을 사용하여 시작합니다.

애플리케이션이 제대로 작동하려면 BigCommerce Storefront Data Hooks 패키지를 사용해야 합니다. 후크는 구성 요소 요구 사항에 따라 재사용할 수 있습니다. /components 디렉토리에서 구성 요소를 찾을 수 있으며 이러한 구성 요소는 페이지로 렌더링됩니다. 후크에서 구성요소 및 페이지로의 링크에는 상점 첫화면에서 많은 양의 데이터가 필요합니다. 개발자 비용으로 많은 돈을 지출하고 싶지 않다면 BigCommerce Storefront Data Hooks 패키지를 쉽게 활용할 수 있습니다.

이 패키지를 사용하면 카테고리, 중요한 고객 데이터, 제품 페이지, 세부 정보 등에 액세스할 수 있습니다. 패키지를 성공적으로 설치했으면 .env 변수를 BigCommerce 상점 첫화면의 적절한 키-값 쌍에 연결할 수 있습니다.

.env 파일은 Vercel에 자동으로 저장됩니다. "vercel env pull" 명령을 사용하여 .env 파일을 쉽게 가져올 수 있습니다. 이제 .env.local 파일을 사용하여 BigCommerce 상점 API 키와 GraphQL 토큰을 설정할 수 있습니다.

다음 단계는 .config 파일 구성입니다. tsconfig.json을 사용하면 프로젝트에 대한 JavaScript를 컴파일할 수 있으며 next.config.js는 노드 모듈입니다. 많은 개발자가 이를 놓치지만 특정 기능을 달성하려는 경우 적극 권장합니다.

프로젝트 실행

개발 환경 서버에서 프로젝트를 실행하는 것은 매우 간단합니다. 다음 명령을 사용하기만 하면 됩니다.

yarn dev 또는 npm run dev

전개

Next.js Commerce를 구축하는 것도 매우 쉽습니다. nextjs.org/commerce를 방문하여 Clone and Deploy 버튼을 클릭하십시오. 결국에는 스토어 로고와 함께 Vercel에서 자체 애플리케이션을 실행하고 실행할 수 있어야 합니다. 배포한 후에는 필요에 따라 상점을 사용자 정의할 수 있습니다.

통합 프로세스를 한 번에 한 단계씩 진행할 것입니다.

1 단계:

복제 및 배포 버튼을 누르면 Git 공급자와 함께 Vercel을 사용하여 배포를 시작할 수 있습니다.

Vercel 계정이 있는 경우 자격 증명을 사용하여 로그인할 수 있습니다.

Vercel 계정이 없는 경우 선택한 Git 공급자를 사용하여 계정을 생성하라는 메시지가 표시됩니다.

2 단계:

Vercel 계정에 로그인하면 드롭다운 목록이 있는 Clone Git Repository 대화 상자를 볼 수 있습니다. Vercel 계정을 선택하고 제공된 필드에 프로젝트 이름을 입력하고 계속을 누르십시오.

3단계:

다음 단계는 통합을 설치하는 것입니다. BigCommerce 상점을 Vercel 프로젝트에 연결하려면 설치 버튼을 누르십시오. 설치 버튼을 누르면 Vercel 프로젝트에 BigCommerce 추가 화면이 표시됩니다.

4단계:

이미 BigCommerce 상점이 있는 경우 기존 자격 증명을 사용하여 간단히 로그인하여 Vercel과 BigCommerce를 통합할 수 있습니다. 그러나 BigCommerce를 처음 사용하는 경우 가입을 클릭합니다.

가입 페이지는 간단한 양식을 사용하여 개발자 샌드박스를 만드는 과정을 안내합니다. 귀하의 세부 정보를 입력하고 모든 이용 약관에 동의하여 가입하십시오. BigCommerce 통합 탭 옆에 파란색 체크 표시가 보이면 계속을 클릭하십시오.

5단계:

이제 저장소 이름을 입력하여 Git 저장소를 만들 수 있습니다. 계속을 클릭합니다.

6단계:

프로젝트 가져오기 화면으로 이동하면 프로젝트 설정을 확인하고 배포를 클릭할 수 있습니다. 전체 배포는 몇 분 이상 걸리지 않습니다.

Vercel에 배포가 완료되면 배포된 사이트의 썸네일 이미지를 볼 수 있습니다.

축하합니다. 프로젝트가 성공적으로 배포되었습니다!

반응 + Next.js

Next - React용 SSR 생성기로 전자 상거래 상점을 설정한 다음 Vercel에 배포할 수 있습니다. Crystallize 및 Next.js 상용구를 사용하여 Jamstack 웹 개발 전자 상거래 상점을 쉽게 구축할 수 있습니다. 이제 Crystallize CLI를 사용하여 새 프로젝트를 개발할 것입니다.

터미널에 다음 명령을 입력합니다.

npx @crystallize/cli

이 명령을 사용하면 원하는 상용구를 추가하거나, 자체 테넌트를 선택하거나, 데모 테넌트를 선택하고 서비스 API를 추가할 수 있습니다.

Vercel에 배포하려면 컴퓨터에 이러한 기본 요구 사항이 설치되어 있어야 합니다.

  • 버셀 CLI
  • Git 제공자
  • 적어도 버전 10 Node.js
  • Crystallize에 등록하여 세입자

다음을 사용하여 개발 서버에서 프로젝트를 실행합니다.

yarn dev 또는 npm run dev

이를 통해 개발 사이트에 액세스하고 앱 구조를 이해하고 요구 사항에 따라 페이지를 편집할 수 있습니다.

다양한 항목 형태에 대한 페이지 생성이 완료되면 Vercel에 배포를 시작할 수 있습니다.

다시 말하지만, Vercel에 프로젝트를 배포하려면 Vercel Github 통합을 거쳐야 합니다. 그러나 쉽게 수동으로 배포할 수도 있습니다. 명령줄을 사용하여 입력 - vercel 로그인 - Vercel 대시보드를 사용하여 두 가지 환경 변수를 설정합니다.

Vercel로 프로젝트를 배포하려면 Git 공급자가 필요합니다. 프로젝트를 Git 공급자에게 푸시하면 거의 완료됩니다. 배포가 시작됩니다.

마무리

헤드리스 전자상거래 시대가 도래했습니다. 전통적인 전자 상거래 사이트 개발은 잘 짜여진 프론트엔드와 백엔드로 전체 스택 경험을 제공하는 데 중점을 둡니다. 이는 상점이 애플리케이션을 빠르게 실행하는 데 도움이 되었습니다. 그러나 곧 성능 문제가 발생합니다. 가장 중요한 것은 원하는 만큼 확장할 수 없다는 것입니다. 그러나 헤드리스 전자 상거래를 사용하면 그렇게 많이 고심할 필요가 없습니다.

헤드리스 디자인은 처음부터 자신만의 프론트 엔드를 디자인하거나 사전 제작된 것을 사용할 수 있는 많은 자유를 제공합니다. 시장의 변화에 ​​신속하게 대응하고 그에 따라 고객 경험을 맞춤화할 수 있는 능력을 갖게 됩니다. 무엇보다도 가장 중요한 것은 백엔드를 변경하지 않고 프론트엔드를 변경할 수 있다는 것입니다. 이제 개발자로서 전자 상거래의 미래가 확실히 머리가 없을 것이라고 확신하는 이유를 알게 되었습니다.