Next.js Storefront

Next.js Storefront: Your open-source frontend starter pack for building performant e-commerce experiences with Saleor.

Saleor Checkout: Extensible Next.js checkout application and payment integrations powered by Saleor API.

🏠 Website • 📚 Docs • 📰 Blog • 🐦 Twitter

▶️ Demo • 🔎 Explore Code

Motivation

🏎️ modern & fast: The project utilizes all the best practices for e-commerce, like SSR, ISR, and image optimization.

💳 integrated payments: Reduce the purchase friction by taking advantage of integrations with modern payment providers such as Adyen, Mollie or Stripe.

🛠️ easily customizable: TailwindCSS can be easily extended and tweaked, or completely replaced with your favorite CSS solution.

👌 works out-of-the-box: Pre-configured tools built with DX in mind.

Stack

Next.js
TypeScript
GraphQL with Apollo Client
Tailwind CSS
Turborepo
Saleor Checkout

Quickstart

Supercharge your development with our CLI tool and free developer account at Saleor Cloud. To download and install Saleor CLI, run the following command:

npm i -g @saleor/cli

Learn more about Saleor CLI

Set up your local storefront development environment by running the storefront create command with --demo attribute. It will create a fresh clone, install dependencies and create a Saleor instance in the Saleor Cloud. The backend will be set to the newly created Cloud instance.

saleor storefront create --demo

You can also spawn your local storefront development environment without using the --demo attribute. It will create a fresh clone and install dependencies. The default configuration uses the master staging environment of the Saleor Cloud as a backend.

saleor storefront create

Development

First install pnpm (an alternative to npm, focused on performance) globally:

npm install -g pnpm

Note
You might also consider using proto for managing your pnpm and node versions across different projects. This repository has a configuration for proto.

Then install dependencies: