Skip to content

πŸ›οΈ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.

Notifications You must be signed in to change notification settings

RobertBroersma/next-storefront

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

28 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Project logo

Next Storefront

Status GitHub Issues GitHub Pull Requests License


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

πŸ“ Table of Contents

🧐 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')],
}
  1. 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')],
}
  1. Install @next-storefront/stripe
  2. 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

πŸŽ‰ Acknowledgements

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

About

πŸ›οΈ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published