{"id":21179486,"url":"https://github.com/microdotmatrix/hygraph-nextjs","last_synced_at":"2026-07-01T18:32:33.960Z","repository":{"id":129674218,"uuid":"589152005","full_name":"microdotmatrix/hygraph-nextjs","owner":"microdotmatrix","description":"Messing around with Hygraph and Next.js","archived":false,"fork":false,"pushed_at":"2023-01-15T08:33:14.000Z","size":94,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-29T01:37:10.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microdotmatrix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-15T08:33:11.000Z","updated_at":"2023-01-15T08:33:20.000Z","dependencies_parsed_at":"2023-04-13T21:24:58.682Z","dependency_job_id":null,"html_url":"https://github.com/microdotmatrix/hygraph-nextjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"hygraph/hygraph-commerce-starter","purl":"pkg:github/microdotmatrix/hygraph-nextjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microdotmatrix%2Fhygraph-nextjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microdotmatrix%2Fhygraph-nextjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microdotmatrix%2Fhygraph-nextjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microdotmatrix%2Fhygraph-nextjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microdotmatrix","download_url":"https://codeload.github.com/microdotmatrix/hygraph-nextjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microdotmatrix%2Fhygraph-nextjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35019032,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-01T02:00:05.325Z","response_time":130,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T17:31:20.491Z","updated_at":"2026-07-01T18:32:33.938Z","avatar_url":"https://github.com/microdotmatrix.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hygraph Commerce Starter\n\nBuild modern, SEO ready commerce storefronts with Hygraph, Next.js, Stripe and Tailwind CSS\n\n[![Clone project](https://graphcms.com/button)](https://app.graphcms.com/clone/d6ae678601534be5a7bde7fba69acd24?name=Commerce%20Shop)\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter\u0026env=HYGRAPH_MUTATION_TOKEN,HYGRAPH_QUERY_TOKEN,HYGRAPH_ENDPOINT,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY\u0026envDescription=Stripe%20keys%20and%20GraphCMS%20tokens\u0026envLink=https%3A%2F%2Fgithub.com%2FGraphCMS%2Fgraphcms-commerce-starter%23usage\u0026demo-title=GraphCMS%20Commerce%20Starter\u0026demo-description=Build%20modern%2C%20SEO%20ready%20commerce%20storefronts%20with%20GraphCMS%2C%20Next.js%2C%20Stripe%20and%20Tailwind%20CSS\u0026demo-url=https%3A%2F%2Fcommerce.withheadlesscms.com)\n\n## About\n\nThis project is an example of how to build fully-functioning Next.js commerce storefront with Hygraph and Stripe. View the demo on [https://commerce.withheadlesscms.com/](https://commerce.withheadlesscms.com/).\n\n## Features\n\n- Fully localized product catalogue built with [Hygraph localization](https://hygraph.com/content-localization) and [Next.js](https://nextjs.org/docs/advanced-features/i18n-routing).\n- Pre-rendered catalogue pages via [`getStaticProps`](https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation) and [`getStaticPaths`](https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation).\n- Dynamic client-side data fetching via [SWR](https://swr.vercel.app).\n- Localized shopping cart with [`react-use-cart`](https://github.com/notrab/react-use-cart).\n- Hosted checkout and payment flow with [Stripe Checkout](https://stripe.com/docs/payments/checkout).\n- Use the [Hygraph mutation API](https://hygraph.com/mutation-api) with [API Routes](https://nextjs.org/docs/api-routes/introduction) to create orders on successful checkout (via webhook).\n- Multiple currency support.\n\n## Usage\n\n\u003e This reference application requires a Stripe account\n\n1. Clone the repository with [`degit`](https://github.com/Rich-Harris/degit) and install project dependencies.\n\n```bash\nnpx degit Hygraph/hygraph-commerce-starter#main hygraph-commerce-starter\ncd hygraph-commerce-starter\nyarn\n```\n\n2. Create a new Hygraph project using the `Commerce Starter` template.\n\n3. Add a `.env` file by cloning `.env.sample` and providing the required variable values.\n\n\u003e It is recommended you create separate Hygraph [auth tokens](https://hygraph.com/docs/authorization#permanent-auth-tokens) to handle querying and mutating data.\n\n```\nHYGRAPH_MUTATION_TOKEN=\nHYGRAPH_QUERY_TOKEN=\nHYGRAPH_ENDPOINT=\nNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=\nSTRIPE_SECRET_KEY=\nSTRIPE_WEBHOOK_SIGNING_SECRET=\n```\n\n4. Setup a [Stripe webhook](https://stripe.com/docs/payments/handling-payment-events) for the `checkout.session.completed` event to order to enable Hygraph fulfilment via the mutation API.\n\n5. Configure support for more locales or currencies in [`hygraph.config.js`](hygraph.config.js) if required. Learn more [here](#configuration).\n\n6. Run `yarn dev`\n\n## Configuration\n\nProject configuration for supported locales and currencies is managed in [`hygraph.config.js`](hygraph.config.js).\n\n\u003e It is important that the `locales` array reflects the enabled locales in your Hygraph project.\n\n```js\nmodule.exports = {\n  locales: [\n    {\n      value: 'en',\n      label: 'English',\n      default: true\n    },\n    {\n      value: 'de',\n      label: 'German'\n    }\n  ],\n  currencies: [\n    {\n      code: 'GBP',\n      default: true\n    },\n    {\n      code: 'EUR'\n    }\n  ]\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrodotmatrix%2Fhygraph-nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrodotmatrix%2Fhygraph-nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrodotmatrix%2Fhygraph-nextjs/lists"}