Hygraph Commerce Starter

Theme by Hygraph

|

Updated: 18 Jul 2024

|

174 Stars

Categories

Overview:

Hygraph Commerce Starter is a project that allows users to build modern and SEO ready commerce storefronts using Hygraph, Next.js, Stripe, and Tailwind CSS. It provides an example of how to build a fully-functioning Next.js commerce storefront with Hygraph and Stripe.

Features:

• Fully localized product catalogue built with Hygraph localization and Next.js.
• Pre-rendered catalogue pages via getStaticProps and getStaticPaths.
• Dynamic client-side data fetching via SWR.
• Localized shopping cart with react-use-cart.
• Hosted checkout and payment flow with Stripe Checkout.
• Use the Hygraph mutation API with API Routes to create orders on successful checkout (via webhook).
• Multiple currency support.

Installation:

1. Clone the repository using degit and install project dependencies.

degit [repository_url]
npm install

2. Create a new Hygraph project using the Commerce Starter template.
3. Add a .env file by cloning .env.sample and providing the required variable values.
4. Create separate Hygraph auth tokens to handle querying and mutating data.
5. Setup a Stripe webhook for the checkout.session.completed event to enable Hygraph fulfilment via the mutation API.
6. Configure support for more locales or currencies in hygraph.config.js if required.
7. Run npm run dev to start the project.

Summary:

Hygraph Commerce Starter is a powerful tool for building commerce storefronts with modern features such as localization, pre-rendered pages, dynamic client-side data fetching, and multiple currency support. It integrates with Hygraph, Next.js, and Stripe to provide a seamless and efficient commerce solution. The installation process is straightforward and can be customized according to specific project requirements. With its ability to handle product catalogues, shopping carts, and payments, Hygraph Commerce Starter is a valuable resource for developers looking to build robust and scalable commerce websites.