yournextstore
1.0.0
demo.yournextstore.com?
우리는 공식적으로 글을 쓰는 시점에 현재 LTS 버전 - 20을 지원합니다. YN은 버전 18, 20 및 22에서 작동해야합니다. 해당 버전 중 하나를 사용하고 문제가 발생하면보고하십시오!
운영 체제에 대한 지침을 따르십시오 : nodejs.org/en/download
우리는 공식적으로 PNPM 버전 9를 지원하지만 NPM 및 원사와 호환되도록 최선을 다할 것입니다.
PNPM을 설치하는 가장 쉬운 방법은 Node.js Corepack을 통해입니다. YNS가있는 폴더 내부에서는 다음과 같은 명령을 실행합니다.
corepack enable
corepack install또는 여기에서 찾을 수있는 운영 체제에 대한 지침을 따르십시오 : pnpm.io/installation
YNS는 스트라이프와 밀접하게 통합되어 있으므로 다음 상점을 사용하려면 스트라이프 계정이 필요합니다. Stripe의 지침에 따라 계정을 작성하십시오.
스트라이프는 테스트 모드 와 생산 모드의 두 가지 모드에서 작동한다는 것을 기억하는 것이 중요합니다. 지역 개발 및 테스트 목적으로 테스트 모드를 사용해야합니다. 이런 식으로 Stripe는 실제 돈을 청구하지 않으며 신용 카드 번호 및 Blik 번호와 같은 특별 테스트 자격 증명을 사용하여 지불을 완료 할 수 있습니다. 자세한 내용은 Docs.stripe.com/testing의 Stripe Documentation을 참조하십시오.
제품을 실제 고객에게 판매 할 준비가되면 Stripe에서 테스트 모드를 생산 모드 로 전환하고 새로운 자격 증명을 생성해야합니다.
팁
이 단계에서는 Stripe에서 추가 검증이 필요하므로 즉시 프로세스를 시작하는 것이 좋습니다.
YNS가 작동하려면 몇 가지 환경 변수를 정의해야합니다. 로컬 개발 및 테스트의 경우 빈 .env 파일을 생성하고 .env.example 의 내용을 복사 할 수 있습니다.
생산에서 ENV 변수를 설정하려면 선택한 호스팅 제공 업체의 문서를 참조해야합니다.
ENABLE_EXPERIMENTAL_COREPACK - vercel 만 : 1 으로 설정하여 Corepack을 활성화하십시오.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Stripe의 게시 가능한 키.STRIPE_SECRET_KEY - Stripe의 비밀 키.STRIPE_CURRENCY - 이것은 상점의 통화를 결정하는 데 사용됩니다. 현재 단일 통화 만 허용되며 3 글자 ISO 코드 (예 : usd ) 여야합니다.NEXT_PUBLIC_URL - 옵션 vercel의 선택 사항 후로 슬래시가없는 매장 주소, 즉 https://demo.yournextstore.com . 처음으로 빌드 할 때 유효한 URL (예 http://localhost:3000 으로 설정해야합니다.NEXT_PUBLIC_UMAMI_WEBSITE_ID - 분석용 Umami 웹 사이트 IDNEXT_PUBLIC_NEWSLETTER_ENDPOINT - 미리보기 : 향후 뉴스 레터 양식의 엔드 포인트. JSON { email: string } 으로 게시물 요청을 수락하고 json { status: number } 반환합니다.STRIPE_WEBHOOK_SECRET - 미리보기 : Stripe Webhook Stripe에서 이벤트를 처리하기위한 비밀. 아래에서 자세히 알아보십시오.ENABLE_STRIPE_TAX - 미리보기 : YNS의 스트라이프 세금을 활성화하려면 모든 값 (예 : 1 )으로 설정하십시오. 아래에서 자세히 알아보십시오.NEXT_PUBLIC_LANGUAGE 매장의 로케일 (즉, en-US ) 위의 단계를 수행 한 후 pnpm install 실행하여 필요한 종속성을 설치 한 다음 pnpm dev 실행하여 시스템에서 개발 서버를 시작하십시오. 다음 상점은 LocalHost : 3000에서 구입할 수 있습니다
다음 상점에는 스트라이프에서 모든 제품, 가격, 설명 및 카테고리가 제공됩니다. 그래서, 당신이 이미 스트라이프를 알고 있다면, 당신은 집에서 바로 느낄 것입니다!
YNS로 표시하려면 Stripe 대시 보드에 제품을 추가해야합니다. 로그인 한 후 왼쪽 사이드 바에서 더 많은 것을 클릭하고 제품 카탈로그를 선택하십시오. 직접 링크를 사용할 수도 있습니다.
그런 다음 제품 추가를 클릭하고 필요한 모든 정보를 작성하십시오.
또한 다음 상점은 제품 메타 데이터를 사용하여 제품에 대한 더 많은 컨텍스트 정보를 제공합니다. 다음 메타 데이터 필드를 지정할 수 있습니다.
| 필드 | 필수의 | 설명 |
|---|---|---|
slug | 예 | 제품 슬러그는 URL에 사용됩니다. 변형을 제외하고 독특해야합니다. |
category | 아니요 | 제품 그룹화에 사용되는 제품 카테고리. |
order | 아니요 | 제품 분류에 사용되는 제품 주문. 더 낮은 숫자가 먼저 표시됩니다. |
variant | 아니요 | 제품 변형 슬러그. 자세한 내용은 아래를 읽으십시오. |
이제 다음 상점에 추가 된 모든 제품이 표시됩니다.
다음 상점은 간단한 제품 변형을 지원합니다. 변형이있는 제품을 만들려면 동일한 slug 메타 데이터 필드로 스트라이프에 여러 제품을 추가해야합니다. YNS는 variant 메타 데이터 필드를 사용하여 동일한 제품의 다른 변형을 구별합니다. 예를 들어, 여러 크기의 티셔츠가있는 경우 t-shirt slug 와 small , medium 및 large variant 값으로 세 가지 제품을 만들 수 있습니다.
제품 페이지에 변형이 표시됩니다. 변형은 가격, 설명 및 이미지가 다를 수 있습니다. 최고의 브라우징 경험을 위해 category 동일한 제품의 모든 변형에 대해 동일해야한다는 점에 유의해야합니다.
메모
앞으로 내장 관리자 대시 보드 내부에서 제품 및 변형을 편집 할 가능성을 추가 할 계획입니다. 아이디어 나 제안이 있으면 알려주십시오!
다음 상점은 Stripe Webhooks를 사용하여 Stripe의 이벤트를 처리합니다. 현재 엔드 포인트는 카트 페이지를 자동으로 재평가하고 세금 거래 (활성화 된 경우)를 생성하는 데 사용됩니다. WebHooks를 설정하려면 Stripe Docs를 팔로우하십시오. 정확한 단계는 Stripe 계정에서 Stripe Workbench를 활성화했는지 여부에 따라 다릅니다 : docs.stripe.com/webhooks#add-a-webhook-endpoint.
Webhook의 끝점은 https://{YOUR_DOMAIN}/api/stripe-webhook 입니다. 유일하게 필요한 이벤트는 payment_intent.succeeded 입니다. WebHook이 Stripe에서 구성되면 STRIPE_WEBHOOK_SECRET 환경 변수를 Stripe에서 만든 비밀 키로 설정하십시오.
메모
앞으로 우리는 사용자 경험을 향상시키기 위해 Webhook에 더 많은 이벤트를 추가 할 계획입니다.
다음 상점에는 Stripe Tax Support의 미리보기가 제공됩니다. 이를 가능하게하려면 ENABLE_STRIPE_TAX 환경 변수를 모든 값으로 설정하십시오 (즉, 1 ).
이 기능이 작동하려면 세금 설정을 Stripe Dashboard : Dashboard.stripe.com/register/tax에서 설정해야합니다. 활성화 및 구성되면 세금은 자동으로 계산되고 다음을 기반으로 제품의 총 가격에 추가됩니다.
경고
이 기능은 여전히 초기 단계에 있으며 지원되지 않는 에지 케이스가있을 수 있습니다. 우리는 적극적으로 작업하고 있으므로 문제가 발생하거나 제안이 있으면 알려주십시오!
Vercel에 배포하려면 다음 버튼을 클릭하고 Github 저장소 및 환경 변수를 설정하고 배포를 클릭하십시오. ENABLE_EXPERIMENTAL_COREPACK 변수를 1 로 설정하십시오.
설명이 곧 제공됩니다.
Docker에 배포하려면 다음 단계를 따르십시오.
pnpm run docker:build 실행하십시오.pnpm run docker:run 으로 컨테이너를 시작할 수 있습니다. YNS는 매일 진화하며, 개선 할 내용에 대한 피드백을 적극적으로 추구합니다. 궁금한 점이 있거나 문제가 있으시면 Discord 서버에서 우리와 연락을 주시기 바랍니다.
structuredClone 사용하여 데이터를 서버에서 클라이언트 구성 요소로 전달합니다. 왜? 특정 유형의 데이터 만 서버에서 클라이언트로 직접 전달할 수 있습니다. Stripe SDK의 데이터에는 종종 클래스 인스턴스가 포함됩니다. 이 문제를 해결하기 위해, 우리는 structuredClone 사용하여 그것들을 제거하고 평범한 오래된 물건을 클라이언트에게 전달합니다.
