우리는 PayPal, MeiliSearch, Stripe 등에 대한 통합이 준비된 새로운 Next.js 전자 상거래 상점을 출시했습니다!

지난 달 Medusa의 우리 팀은 Medusa 서버와 함께 사용할 수 있는 새로운 고급 Next.js 스토어프론트를 구축했습니다. 다른 Medusa 스타터에 관심이 있으시면 언제든지 Medusa.Express 또는 당사 Gatsby starter를 확인하십시오.

이 새로운 Next.js 상점은 세련된 디자인, 필요한 전자 상거래 기능, 타사 서비스 및 도구와의 강력한 통합을 제공하여 즉시 상점에서 결제 공급자 및 검색 엔진을 사용할 수 있습니다.

아래에서 이 새로운 매장이 제공하는 기능에 대해 자세히 알아보세요. 스토어프론트를 시작하려면 the GitHub repository을 확인하십시오!

MeiliSearch 또는 Algolia와 검색 엔진 통합

이 스토어프론트는 MeiliSearch 및 Algolia과의 통합이 준비된 상태로 제공됩니다. 이를 통해 고객은 필요한 제품을 쉽게 찾을 수 있습니다.



Medusa 서버에 MeiliSearch 또는 Algolia 플러그인을 설치하기만 하면 됩니다. 그런 다음 search 기능을 store.config.json에서 켤 수 있습니다.

{
  "features": {
    "search": true
  }
}

이것이 MeiliSearch를 지원하는 데 필요한 전부입니다. Algolia의 경우 the documentation에서 찾을 수 있는 코드를 추가로 변경해야 합니다.

PayPal 및 Stripe과 결제 제공업체 통합

Medusa 서버에 Stripe 및 PayPal 플러그인이 설치되어 있는 경우 Next.js 스토어프론트는 자동으로 체크아웃하는 동안 필요한 UI를 표시합니다! 결제 제공업체를 모두 사용하거나 둘 중 하나만 사용할 수 있습니다.

상점의 환경 변수에 Stripe 및 PayPal에 필요한 API 키를 추가하기만 하면 됩니다.

NEXT_PUBLIC_STRIPE_KEY=<YOUR_PUBLISHABLE_KEY>
NEXT_PUBLIC_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>

그런 다음 Medusa 서버에서 Stripe을 활성화한 경우 결제 중에 카드 양식을 볼 수 있습니다.



Medusa 서버에서 PayPal을 활성화한 경우 결제 시 PayPal로 쉽게 결제할 수 있는 PayPal 버튼이 표시됩니다.

전자상거래 기능

이 상점은 고객에게 훌륭한 사용자 경험을 제공하기 위해 필수적인 전자 상거래 기능으로 가득 차 있습니다.

제품 및 컬렉션

스토어프론트에는 제품과 컬렉션을 모두 볼 수 있는 원활한 탐색 기능이 포함되어 있습니다. 컬렉션별로 제품을 필터링할 수도 있습니다.



상품의 상세 페이지는 세련된 스크롤 디자인으로 상품의 모든 중요 정보를 보여줍니다. 고객은 제품 변형을 쉽게 선택하고 카트에 추가할 수 있습니다.

장바구니 및 전체 결제 기능

고객은 언제든지 장바구니를 보고 수정할 수 있습니다. 그런 다음 고객은 한 페이지 결제 흐름을 통해 주문할 수 있습니다.

고객 계정

고객은 등록하거나 로그인하여 저장된 주소, 주문 내역 등과 같은 프로필 기능의 혜택을 받을 수 있습니다.

완전히 사용자 정의 가능

전체 점포는 완전히 사용자 정의할 수 있습니다! src 디렉토리에서 사용 가능한 페이지, 구성 요소 및 스타일을 모두 변경할 수 있습니다.

이를 통해 개발자는 필요에 따라 스토어프론트를 재설계하고, 더 많은 기능을 추가하고, 더 많은 타사 서비스를 통합할 수 있습니다.

Next.js 스토어프론트 시작하기

Next.js Storefront를 실행하려면 Medusa 서버가 설치되어 실행 중이어야 합니다. following the quickstart guide 까지 몇 분 안에 Medusa를 시작할 수 있습니다.

그런 다음 Next.js Storefront 설치는 3단계로 수행할 수 있습니다.

storefront’s starter template을 사용하여 Next.js 프로젝트를 만듭니다.

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront

새로 생성된 디렉토리my-medusa-storefront로 변경하고 개발 시 환경 변수를 사용하도록 템플릿 환경 변수 파일의 이름을 바꿉니다.

mv .env.template .env.local

Medusa 서버가 실행 중인지 확인한 다음 로컬 Next.js 서버를 실행합니다.

npm run dev

위에서 언급한 통합을 활성화/비활성화해야 하는 경우 the documentation to learn how to do it을 확인하십시오.

어떻게 생각해?

이 새로운 Next.js 상점이 마음에 드십니까? 개선할 수 있는 방법에 대한 피드백이 있습니까? 댓글로 여러분의 생각을 알려주세요!

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.