RobertBroersma/next-storefront

Next Storefront

A dazzlingly fast E-Commerce solution built with Typescript and NextJS.

📝 Table of Contents

• About
• Getting Started
• Usage
• TODO

🧐 About

Visit the demo here: https://next-storefront-statik.vercel.app/

📝 This demo will be updated regularly as cool new features are rolled out!

🏁 Getting Started

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

🎈 Usage

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:

// next-storefront.config.js

module.exports = {
  sources: [require('@next-storefront/shopify')],
}

3. Configure Shopify Checkout:

// App layout

import { CartProvider } from '@next-storefront/core'
import * as shopifyCheckout from '@next-storefront/shopify/checkout'

export function Layout({ Component, pageProps }) {
  return (
    <CartProvider checkout={shopifyCheckout}>
      ...
    </CartProvider>
  )
}

Get a Shopify storefront api access token. The best way is to create a private app.

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:

// next-storefront.config.js

module.exports = {
  sources: [require('@next-storefront/json')],
}

3. Install @next-storefront/stripe
4. Configure Stripe Checkout:

// App layout

import { CartProvider } from '@next-storefront/core'
import * as stripeCheckout from '@next-storefront/stripe/checkout'

export function Layout({ Component, pageProps }) {
  return (
    <CartProvider checkout={stripeCheckout}>
      ...
    </CartProvider>
  )
}

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
• Next.js
• React Query
• TypeScript

🎉 Acknowledgements

• Vue Storefront - Inspiration
• Gatsby Theme Shopify Manager - Inspiration

TODO Features (in no particular order):

• Static Generation
• Serverless deploy with Vercel or Netlify
• Work with SSG
• Work with Incremental Static (Re)generation
• Work with live-updates for things like inventory
• Use with Shopify
• 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