Next.js Saleor Commerce

• Next.js 14: File-based routing, React 18, Fast Refresh, Image Optimization, and more.
• App Router: Utilizes React Server Components, Data Cache, and async components.
• TypeScript: Strongly typed codebase and GraphQL payloads with strict mode.
• GraphQL best practices: Uses GraphQL Codegen and TypedDocumentString to reduce boilerplate and bundle size.
• Customizable CSS: TailwindCSS can be extended or replaced with an alternative CSS solution.
• Tooling included: Comes with ESLint, Prettier, Husky, Lint Staged, and Codegen preconfigured.

Global:

• Channel switcher and Geo detection (coming soon)
• Dynamic menu
• Hamburger menu
• SEO data

Checkout:

• Single-page checkout (including login)
• Portable to other frameworks (doesn’t use Next.js components)
• Adyen integration
• Stripe integration
• Customer address book
• Vouchers and Gift Cards

Product catalog:

• Categories
• Variant selection
• Product attributes
• Image optimization

My account:

• Order history (coming soon)
• Order completion
• Order details

Quickstart:

1. Create Saleor Backend Instance
   • Quickly start with the backend by using a free developer account at Saleor Cloud.
   • Alternatively, run Saleor locally using Docker.
2. Clone Storefront
   • Option 1: Using Command Line Tools
     • Install or update to the latest version of the Saleor CLI with: npm i -g @saleor/cli@latest.
     • Clone the storefront, install dependencies, and connect with the provided Saleor instance hostname:
       cssCopy code

       saleor storefront create --url https://{SALEOR_HOSTNAME}/graphql/

   • Option 2: Manual Install
     • Clone the repository: git clone https://github.com/saleor/storefront.git.
     • Copy environment variables from .env.example to .env: cp .env.example .env.
     • Edit .env and set NEXT_PUBLIC_SALEOR_API_URL to your Saleor GraphQL endpoint URL, e.g., https://example.saleor.cloud/graphql/.
     • Install pnpm and run: pnpm i.

Payments:

• Saleor Storefront currently supports payments via the Saleor Adyen App. To install and configure the payment app, go to the “Apps” section in the Saleor Dashboard (App Store is only available in Saleor Cloud).
  • WARNING: To configure the Adyen App, you must have an account with Adyen.
  • NOTE: Saleor Stripe App integration is a work in progress.

Development:

• Start the development server with: pnpm dev.
• The app is now running at http://localhost:3000.

GraphQL Queries and Mutations:

• After altering or creating new GraphQL queries in the gql folder, run: pnpm run generate to generate types and JavaScript queries.

Preview Content Changes Instantly (Draft Mode):

• Visit http://{your-host}/api/draft to enable cookies that disable caching for previewing catalog and content changes instantly. Learn more about Draft Mode in Next.js docs.