bagisto / nextjs-commerce

Develop and deploy headless commerce storefronts that convert with Vercel + Bagisto. Build your next store with Next.js and Bagisto

Next.js Commerce Bagisto

Note: Looking for Bagisto Next.js Commerce v1? View the code, demo, and release notes

A Next.js 14 and App Router-ready ecommerce template featuring:

• Next.js App Router
• Optimized for SEO using Next.js's Metadata
• React Server Components (RSCs) and Suspense
• Server Actions for mutations
• Edge Runtime
• New fetching and caching paradigms
• Dynamic OG images
• Styling with Tailwind CSS
• Checkout and payments with Bagisto
• Automatic light/dark mode based on system settings

Demo live at: Bagisto Store

Configuration

Setup Bagisto Store

• For BAGISTO_CURRENCY_CODE and BAGISTO_STORE_ENDPOINT, you need to install the Bagisto.
• Then, you need to install the Bagisto Headless Extension in the Bagisto.
• Now you need to host the full application so that you have store endpoint and if you are in development mode then you can use Ngrok also.
• After that you can proceed with setting up Next.js commerce.

Running locally

You will need to use the environment variables defined in .env.example to run Next.js Commerce. It's recommended you use Vercel Environment Variables for this, but a .env file is all that is necessary.

Note: You should not commit your .env file or it will expose secrets that will allow others to control your Bagisto store.

1. Install Vercel CLI: npm i -g vercel
2. Link local instance with Vercel and GitHub accounts (creates .vercel directory): vercel link
3. Download your environment variables: vercel env pull

pnpm install
pnpm dev

Your app should now be running on localhost:3000.

Features Available

The following features can be enabled or disabled. This means that the UI will remove all code related to the feature. For example: Turning cart off will disable Cart capabilities.

• cart
• search
• customerAuth
• customCheckout

nextjs-commerce's Issues

Ordered product qty over stock qty

Hello. There is such a mistake on the site. So, when ordering a product that has 2 in stock, it gives an error when choosing 3 as the number and adding it to the cart. This is clear. But when you select 2 pieces and add them to the cart, then click on the cart icon at the top, you can change the number, increase it to any number, and order from the side menu that opens. However, there are not so many products in stock

is this nextjs with bagisto ready for production

Hi Great Team
is this project is ready to use in production
I am creating a project so should i use it ?

created issue because discussion panel is not enabled in this repo

Demo: Images point to offline `ngrok` instance

Hi Team,

Was just clicking around the demo, and noticed that in the current deployment, all the images are attempting to be loaded from an ngrok instance, which is obviously no longer online / hostname potentially changed after restart.

See:

Just figured I'd bring this to your attention.

Unable to run the app locally

I am running node v20.10.0 and npm v 10.2.4, but on npm run dev the node server is not running and getting following response

λ npm run dev

> dev
> turbo run dev

 WARNING  Issues occurred when constructing package graph. Turbo will function, but some features may not be available: could not resolve workspaces: io error: The system cannot find the file specified. (os error 2)
• Packages in scope: @vercel/commerce, @vercel/commerce-bagisto, @vercel/commerce-bigcommerce, @vercel/commerce-commercejs, @vercel/commerce-kibocommerce, @vercel/commerce-local, @vercel/commerce-ordercloud, @vercel/commerce-saleor, @vercel/commerce-shopify, @vercel/commerce-spree, @vercel/commerce-swell, @vercel/commerce-vendure, next-commerce, taskr-swc
• Running dev in 14 packages
• Remote caching disabled
@vercel/commerce-local:dev: cache bypass, force executing 0e7877725585d035
@vercel/commerce-commercejs:dev: cache bypass, force executing e18300c86287fc39
@vercel/commerce:dev: cache bypass, force executing 0cf8f3f0871856b4
next-commerce:dev: cache bypass, force executing 6cfa05b961a30cef
@vercel/commerce-swell:dev: cache bypass, force executing b6ec92b0c5469e48
@vercel/commerce-vendure:dev: cache bypass, force executing 85f79bfb18d4774c
@vercel/commerce-saleor:dev: cache bypass, force executing ffe942860da23eee
@vercel/commerce-bagisto:dev: cache bypass, force executing 26bf8a1653399624
@vercel/commerce-spree:dev: cache bypass, force executing d8f35d200631b4c9
@vercel/commerce-shopify:dev: cache bypass, force executing e66897da546b8ce6
@vercel/commerce-ordercloud:dev: cache bypass, force executing bc089e6c427ac08e
@vercel/commerce-bigcommerce:dev: cache bypass, force executing 99c7623b86d71940
@vercel/commerce-kibocommerce:dev: cache bypass, force executing 344df0c2ec9adbbb

 Tasks:    0 successful, 13 total
Cached:    0 cached, 13 total
  Time:    1.303s
  

Thanks

Graphql queries missmatch with backend

.env.local variables

COMMERCE_PROVIDER=@vercel/commerce-bagisto
BAGISTO_CURRENCY_CODE=USD
BAGISTO_STORE_ENDPOINT=http://localhost:8000/graphql

Graphql query

query getProductListing(
    $input: FilterProductListingInput
    $first: Int = 10
    $page: Int = 1
  ) {
    getProductListing(input: $input, first: $first, page: $page) {
      paginatorInfo {
        count
        currentPage
        lastPage
        total
      }
      data {
        ...productInfo
      }
    }
  }

Nextjs app is trying to fetch the above query but, fails because the FilterProductListingInput type doesn't have the same type name on the backend side. Below is the query declaration on the backend side

extend type Query {
  products(input: FilterProductsInput @builder(method: "Webkul\\GraphQLAPI\\Queries\\Admin\\Catalog\\Products\\FilterProducts")): [Product!] @paginate(type: "PAGINATOR", defaultCount: 10, model: "Webkul\\GraphQLAPI\\Models\\Catalog\\Product")
}

as you can see the backend query expects the input variable to be of type FilterProductsInput but the frontend is using FilterProductListingInput

Using Bagisto version: v2.0.0
nextjs-commerce version: latest