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:

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.

If you have any issues with setting up the app please refer to our FAQ

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