{"id":18455842,"url":"https://github.com/basementstudio/next-shopify","last_synced_at":"2025-04-08T04:34:13.687Z","repository":{"id":42624679,"uuid":"400279802","full_name":"basementstudio/next-shopify","owner":"basementstudio","description":"A context, a hook, and an API route handler, to manage a Shopify Storefront in your Next.js app.","archived":false,"fork":false,"pushed_at":"2023-01-06T20:27:01.000Z","size":1111,"stargazers_count":31,"open_issues_count":16,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T06:11:35.646Z","etag":null,"topics":["e-commerce","nextjs","react-query","shopify","storefront-api","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/basementstudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-26T19:12:29.000Z","updated_at":"2024-12-14T20:24:32.000Z","dependencies_parsed_at":"2023-02-06T08:46:00.852Z","dependency_job_id":null,"html_url":"https://github.com/basementstudio/next-shopify","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-shopify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-shopify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-shopify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basementstudio%2Fnext-shopify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basementstudio","download_url":"https://codeload.github.com/basementstudio/next-shopify/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779796,"owners_count":20994569,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["e-commerce","nextjs","react-query","shopify","storefront-api","typescript"],"created_at":"2024-11-06T08:09:16.054Z","updated_at":"2025-04-08T04:34:13.322Z","avatar_url":"https://github.com/basementstudio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-shopify\n\n[![from the basement.](https://basement.studio/gh-badge.svg)](https://basement.studio)\n\n\u003e 🚨 Shopify is improving their APIs, and we are updating our integration. Don't use just yet.\n\u003e \n\u003e Take a look at Shopify's [Hydrogen](https://hydrogen.shopify.dev/).\n\n---\n\nA context, a hook, and an API route handler, to manage a Shopify Storefront in your Next.js app.\n\n- ✅ Easy to use, Next.js friendly implementation of the [Shopify Storefront API](https://shopify.dev/api/storefront).\n- 🗄 Store your cart id in [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).\n- 🐎 Global app cache with [`react-query`](https://react-query.tanstack.com/).\n- 💥 API route handler with [catch-all API routes](https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes).\n\n## Install\n\n```bash\nyarn add next-shopify\n```\n\nOr with npm:\n\n```bash\nnpm i next-shopify\n```\n\n## Before You Start\n\nIn order to use the Storefront API, which is what this library uses, you'll need to set up your Shopify Store with a private app.\n\n1. Go to your private apps: `https://\u003cyour-shopify-domain\u003e/admin/apps/private`, and create one.\n2. Down at the bottom of your app's dashboard, you'll need to enable the Storefront API and give it the correct permissions.\n3. Take hold of the Storefront Access Token — we'll need it later.\n\n## Usage\n\nJust three steps and we'll be ready to roll.\n\n```bash\nyarn add next-shopify\n```\n\n### 1. Wrap Your Application with the Context Provider\n\n```tsx\n// pages/_app.tsx\nimport { AppProps } from 'next/app'\nimport { ShopifyContextProvider } from 'next-shopify'\n\nconst App = ({ Component, pageProps }: AppProps) =\u003e {\n  return (\n    \u003cShopifyContextProvider\u003e\n      \u003cComponent {...pageProps} /\u003e\n    \u003c/ShopifyContextProvider\u003e\n  )\n}\n\nexport default App\n```\n\n### 2. Add the API Route\n\nWe add an API Route, and we use `next-shopify`'s built in handler.\n\n```ts\n// pages/api/shopify/[...storefront].ts\nimport { handleShopifyStorefront } from 'next-shopify'\n\n// be sure to add the correct env variables.\n\nexport default handleShopifyStorefront({\n  domain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN as string,\n  storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN as string\n})\n```\n\n### 3. Use the Hook\n\nThis is just an example.\n\n```tsx\nimport { useShopify } from 'next-shopify'\n\nexport const Cart = () =\u003e {\n  const {\n    cart,\n    cartToggleState\n    // cartItemsCount,\n    // onAddLineItem,\n    // onRemoveLineItem,\n    // onUpdateLineItem\n  } = useShopify()\n\n  if (!cartToggleState.isOn || !cart) return null\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003eCart\u003c/h2\u003e\n      \u003cbutton onClick={cartToggleState.handleOff}\u003eClose\u003c/button\u003e\n      {cart.lineItems.map(lineItem =\u003e {\n        return (\n          \u003cdiv key={lineItem.id}\u003e\n            \u003cp\u003e{lineItem.title}\u003c/p\u003e\n          \u003c/div\u003e\n        )\n      })}\n      \u003ca href={cart.webUrl}\u003eCheckout\u003c/a\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport const Header = () =\u003e {\n  const { cartToggleState } = useShopify()\n\n  return (\n    \u003c\u003e\n      \u003cheader\u003e\n        \u003ca\u003eLogo\u003c/a\u003e\n        \u003cbutton onClick={cartToggleState.handleOn}\u003eOpen cart\u003c/button\u003e\n      \u003c/header\u003e\n      \u003cCart /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n## Fetching Products\n\nIn the following example, we explain how to use some helper methods to fetch products. Be aware that `shopify-buy` typings are wrong, and thus our methods can receive a custom `formatProduct` function that can help you have a better TypeScript experience.\n\n```ts\n// lib/shopify.ts\nimport { createClient } from 'next-shopify'\n\nconst { fetchAllProducts, fetchProductByHandle, client } = createClient({\n  domain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN as string,\n  storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN as string\n})\n\nfetchAllProducts().then(products =\u003e {\n  console.log(products)\n})\n\nfetchProductByHandle('\u003cslug\u003e').then(product =\u003e {\n  console.log(product)\n})\n\n// Passing a formatter (for better TypeScript experience) --------\n\nfunction formatProduct(p: ShopifyBuy.Product) {\n  return {\n    id: p.id.toString(),\n    title: p.title,\n    slug: (p as any).handle as string, // shopify buy typings are wrong, sorry for this...\n    images: p.images.map(img =\u003e ({\n      src: img.src,\n      alt: (img as any).altText ?? null\n    }))\n  }\n}\n\nfetchAllProducts(formatProduct).then(products =\u003e {\n  console.log(products)\n})\n\nfetchProductByHandle('\u003cslug\u003e', formatProduct).then(product =\u003e {\n  console.log(product)\n})\n\n// We also expose the whole client -------------------------------\n\nconsole.log(client)\n```\n\n## Using Other `shopify-buy` Methods\n\n[`shopify-buy`](https://www.npmjs.com/package/shopify-buy) is the official Storefront API JavaScript SDK. It's robust, but not easy to integrate — precisely why we created `next-shopify`. Therefore, if you still need to use other `shopify-buy` methods, we expose the whole client like this:\n\n```ts\n// lib/shopify.ts\nimport { createClient } from 'next-shopify'\n\nexport const { client } = createClient({\n  domain: process.env.NEXT_PUBLIC_SHOPIFY_DOMAIN as string,\n  storefrontAccessToken: process.env.SHOPIFY_STOREFRONT_ACCESS_TOKEN as string\n})\n```\n\n---\n\n![we make cool sh*t that performs](https://basement.studio/images/index/twitter-card.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasementstudio%2Fnext-shopify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasementstudio%2Fnext-shopify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasementstudio%2Fnext-shopify/lists"}