dgopsq / saleor-nextjs-storefront

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

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.