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.

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

Then install dependencies:

pnpm i

To start the servers, run:

pnpm dev

The command will boot up 4 applications running on different ports.
Read more about development in docs/development.md.

Payment gateways

Saleor App Checkout supports three configurable payment gateways:

For further information, please go to docs/payment/index.md.

Deployment

Read Vercel deployment guide in docs/vercel.md

FAQ

Read FAQ in docs/faq.md