🛍️ A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
A dazzlingly fast E-Commerce solution built with Typescript and NextJS.
Visit the demo here: https://next-storefront-statik.vercel.app/
📝 This demo will be updated regularly as cool new features are rolled out!
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.
When working with Shopify, Shopify acts as both the source of products and the checkout.
@next-storefront/shopify
// next-storefront.config.js
module.exports = {
sources: [require('@next-storefront/shopify')],
}
// 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)
When working with Stripe, Stripe Checkout acts as the checkout. You can pull in product data from anywhere! (Even Shopify)
@next-storefront/json
// next-storefront.config.js
module.exports = {
sources: [require('@next-storefront/json')],
}
@next-storefront/stripe
// 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.