Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robertbroersma/next-storefront
🛍️ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
https://github.com/robertbroersma/next-storefront
nextjs shopify storefront typescript
Last synced: about 2 months ago
JSON representation
🛍️ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
- Host: GitHub
- URL: https://github.com/robertbroersma/next-storefront
- Owner: RobertBroersma
- Created: 2020-09-29T19:02:28.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2020-10-15T07:37:37.000Z (about 4 years ago)
- Last Synced: 2023-02-28T21:45:38.948Z (almost 2 years ago)
- Topics: nextjs, shopify, storefront, typescript
- Language: TypeScript
- Homepage: https://next-storefront-statik.vercel.app/
- Size: 17.3 MB
- Stars: 96
- Watchers: 9
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Next Storefront
[]()
[](https://github.com/RobertBroersma/funk/issues)
[](https://github.com/RobertBroersma/funk/pulls)
[](/LICENSE)
---
A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
)
## 📝 Table of Contents
- [About](#about)
- [Getting Started](#getting_started)
- [Usage](#usage)
- [TODO](#todo)
Visit the demo here: https://next-storefront-statik.vercel.app/
> 📝 This demo will be updated regularly as cool new features are rolled out!
### Installing
Firstly, install `@next-storefront/core`. This package contains an adapter to pull in and transform data from different data sources. It also contains contexts and hooks.
```
npm install @next-storefront/core --save
```
Or
```
yarn add @next-storefront/core
```
Secondly, pick one or more data sources, and a checkout system.
### Use with Shopify
When working with Shopify, Shopify acts as both the source of products and the checkout.
1. Install `@next-storefront/shopify`
2. Configure Shopify as a source:
```js
// next-storefront.config.js
module.exports = {
sources: [require('@next-storefront/shopify')],
}
```
3. Configure Shopify Checkout:
```tsx
// App layout
import { CartProvider } from '@next-storefront/core'
import * as shopifyCheckout from '@next-storefront/shopify/checkout'
export function Layout({ Component, pageProps }) {
return (
...
)
}
```
Get a Shopify _storefront_ api access token. The best way is to [create a private app](https://shopify.dev/docs/storefront-api/getting-started#private).
Set environment variables:
`NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN=woohoobigtoken`
`NEXT_PUBLIC_SHOPIFY_STORE_NAME=statikly` (as in statikly.myshopify.com)
### Use With Stripe
When working with Stripe, Stripe Checkout acts as the checkout. You can pull in product data from anywhere! (Even Shopify)
1. Install any data source, e.g. `@next-storefront/json`
2. Configure your data source:
```js
// next-storefront.config.js
module.exports = {
sources: [require('@next-storefront/json')],
}
```
3. Install `@next-storefront/stripe`
4. Configure Stripe Checkout:
```tsx
// App layout
import { CartProvider } from '@next-storefront/core'
import * as stripeCheckout from '@next-storefront/stripe/checkout'
export function Layout({ Component, pageProps }) {
return (
...
)
}
```
Set environment variables:
`STRIPE_SECRET_KEY`
`NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`
Create some products by adding `.json` files to the `products` directory.
## ⛏️ Built Using
- [React](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [React Query](https://github.com/tannerlinsley/react-query)
- [TypeScript](https://www.typescriptlang.org/)
## 🎉 Acknowledgements
- [Vue Storefront](https://www.vuestorefront.io/) - Inspiration
- [Gatsby Theme Shopify Manager](https://gatsbythemeshopifymanager.com/) - Inspiration
## TODO Features (in no particular order):
- [x] Static Generation
- [x] Serverless deploy with Vercel or Netlify
- [x] Work with SSG
- [x] Work with Incremental Static (Re)generation
- [ ] Work with live-updates for things like inventory
- [x] Use with Shopify
- [x] Use with Stripe Checkout (This paves the way for retrieving products from anywhere!)
- [ ] Use with Stripe Products
- [ ] Use with other sources
- [ ] Wishlists
- [ ] Search & Filters
- [ ] Custom Checkout
- [ ] Order Pages
- [ ] PWA