DEV Community

MD Taseen Khan
MD Taseen Khan

Posted on • Originally published at reactjsexample.com on

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

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

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

Next Storefront


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

🧐 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

Enter fullscreen mode Exit fullscreen mode

Or

yarn add @next-storefront/core

Enter fullscreen mode Exit fullscreen mode

🎈 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')],
}
Enter fullscreen mode Exit fullscreen mode
  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>
  )
}
Enter fullscreen mode Exit fullscreen mode

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

Set environment variables:NEXT_PUBLIC_SHOPIFY_STOREFRONT_TOKEN=woohoobigtokenNEXT_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')],
}
Enter fullscreen mode Exit fullscreen mode
  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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Set environment variables:STRIPE_SECRET_KEYNEXT_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

GitHub

View Github

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.