A dazzlingly fast E-Commerce solution built with Typescript and NextJS
Tags: ecommerce
Published: 2023-12-06 09:11:07

---
title: A dazzlingly fast E-Commerce solution built with Typescript and NextJS
published: true
date: 2023-12-04 00:47:00 UTC
tags: Ecommerce
canonical_url: https://reactjsexample.com/a-dazzlingly-fast-e-commerce-solution-built-with-typescript-and-nextjs/
---

 ![A dazzlingly fast E-Commerce solution built with Typescript and NextJS](https://reactjsexample.com/content/images/2023/12/Code_2023-12_12-41-57.jpg)

[![A dazzlingly fast E-Commerce solution built with Typescript and NextJS](https://raw.githubusercontent.com/RobertBroersma/next-storefront/main/logo.svg)](https://github.com/albert0331/next-storefront-main/blob/main)

### Next Storefront

* * *

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

## 🧐 About 

Visit the demo here: [https://next-storefront-statik.vercel.app/](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](https://shopify.dev/docs/storefront-api/getting-started).

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 

- [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):

- 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](https://github.com/albert0331/next-storefront-main?ref=reactjsexample.com)