/saleor-nextjs-storefront

Saleor storefront built using Next.js 13 and the new App Router.

Primary LanguageTypeScriptMIT LicenseMIT

Saleor storefront built using Next.js 13 and the new App Router.

Note

This repository is currently 👷‍♀️ WIP 👷 and it's NOT a production ready storefront. Feel free to open an issue if you see bugs or sections that could be improved!

Features

  • 🕺 Fully functional Saleor storefront using the new Next 13 app router
  • 💅 Styled using Tailwind
  • 🛒 Multi steps checkout with Stripe (using the Saleor Stripe App)
  • 📚 Out of the box i18n with next-intl
  • 💁‍♀️ User profile page handling the latest orders, all the personal addresses and the security informations
  • 🏛️ Fully developed using Apollo with the new useFragment hook in order to react to data changes

Getting Started

Requirements:

  • An instance of the Saleor backend up and running (the easiest way is probably to use Saleor Cloud and its free tier)
  • The Saleor Stripe App installed in the dashboard

Follow these steps in order to execute the project correctly:

  1. Rename the .env.local.example into .env.local and fill the NEXT_PUBLIC_GRAPHQL_URL environment variable with the correct URL to your GraphQL API
  2. Generate the GraphQL types using pnpm generate:graphql
  3. Start the project in development mode using pnpm dev
  4. Open http://localhost:3000 with your browser
  5. 🎉

Configuration

You can configure your storefront using the environment variables in src/misc/config.ts. The only required configuration is NEXT_PUBLIC_GRAPHQL_URL, everything else is optional and has been documented directly in the file.