{"id":545558,"date":"2026-07-02T07:35:10","date_gmt":"2026-07-02T07:35:10","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=545558"},"modified":"2026-07-02T07:41:18","modified_gmt":"2026-07-02T07:41:18","slug":"how-to-build-ecommerce-in-next-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/","title":{"rendered":"How to build eCommerce in Next.js"},"content":{"rendered":"\n

Modern eCommerce websites need to be fast, responsive, and easy to find on search engines.<\/p>\n\n\n\n

Next.js helps meet these requirements with built-in performance optimizations, strong SEO support, and flexible rendering options.<\/p>\n\n\n\n

In this guide, you’ll build a headless eCommerce<\/a> store using Next.js and Bagisto.<\/p>\n\n\n\n

Next.js will power the storefront, while Bagisto will manage products, customers, orders, and other commerce features.<\/p>\n\n\n\n

You’ll install Bagisto, connect it to Next.js using GraphQL, and display real product data in the storefront.<\/p>\n\n\n\n

\"ecommerce<\/figure>\n\n\n\n

What is eCommerce in Next.js ?<\/strong><\/strong><\/h2>\n\n\n\n

Next.js eCommerce uses Next.js to build the storefront\u2014the part of your online store that customers interact with.<\/p>\n\n\n\n

The backend manages products, prices, orders, customers, and other store data. The storefront retrieves this data through APIs.<\/p>\n\n\n\n

This architecture is known as headless commerce<\/strong>, where the frontend and backend run independently.<\/p>\n\n\n\n

The main advantage is flexibility. You can build a custom storefront without being tied to a traditional eCommerce theme or platform.<\/p>\n\n\n\n

Why use Next.js for eCommerce?<\/strong><\/h2>\n\n\n\n

Next.js provides the performance, SEO capabilities, and rendering flexibility needed for modern eCommerce applications.<\/p>\n\n\n\n

Here are some of the key reasons developers choose it for online stores.<\/p>\n\n\n\n

Reason<\/strong><\/td>What it means<\/strong><\/td><\/tr>
Great SEO<\/td>Pages render on the server, so search engines can read them easily<\/td><\/tr>
Fast performance<\/td>Built-in optimizations keep load times low<\/td><\/tr>
Flexible rendering<\/td>Choose SSR, SSG, or ISR depending on the page<\/td><\/tr>
Headless-friendly<\/td>Connects cleanly to backends like Bagisto<\/td><\/tr>
Full design control<\/td>Build the storefront exactly how you want it<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

A Quick Note on Rendering Modes<\/strong><\/h3>\n\n\n\n

Next.js gives you three main ways to render a page, and each one fits a different situation.<\/p>\n\n\n\n

SSR<\/strong> builds the page fresh on every request. It works well for things that change often, like a shopping cart.<\/p>\n\n\n\n

SSG<\/strong> builds the page once, at build time. It’s a good fit for content that barely changes.<\/p>\n\n\n\n

ISR<\/strong> sits in between. Pages stay static, but they refresh quietly in the background. That makes it a strong choice for product listing pages.<\/p>\n\n\n\n

What is Bagisto ?<\/h2>\n\n\n\n

Bagisto is an open source eCommerce platform built on Laravel. It manages products, orders, customers, inventory, and other store operations.<\/p>\n\n\n\n

In a headless setup, Bagisto acts as the backend and exposes store data through a GraphQL API.<\/p>\n\n\n\n

Bagisto provides store data through its GraphQL API, allowing your Next.js storefront to fetch products, categories, customers, and other information whenever it’s needed.<\/p>\n\n\n\n

Next.js eCommerce Tech Stack<\/h2>\n\n\n\n

A real storefront needs a few more tools beyond just Next.js. Here’s the stack we’ll be using.<\/p>\n\n\n\n

Tool<\/strong><\/td>Role in the Storefront<\/strong><\/td><\/tr>
Next.js<\/td>The core frontend framework<\/td><\/tr>
Apollo Client<\/td>Sends and caches GraphQL requests<\/td><\/tr>
Redux<\/td>Manages cart and global state<\/td><\/tr>
NextAuth.js<\/td>Handles customer login and sessions<\/td><\/tr>
TypeScript<\/td>Adds type safety to the code<\/td><\/tr>
ISR<\/td>Keeps product pages fast and fresh<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Prerequisites<\/h3>\n\n\n\n

Before you begin, install the required software for running Bagisto.<\/p>\n\n\n\n

Since Bagisto is built on Laravel, it requires a standard Laravel development environment.<\/p>\n\n\n\n

Requirement<\/strong><\/th>Version<\/strong><\/th><\/tr><\/thead>
PHP<\/strong><\/td>8.3 or higher<\/td><\/tr>
Composer<\/strong><\/td>2.5 or higher<\/td><\/tr>
MySQL<\/strong><\/td>8.0.32 or higher<\/td><\/tr>
Web Server<\/strong><\/td>Apache 2 or NGINX<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

One more thing worth knowing upfront: the GraphQL package we’ll install needs Bagisto 2.3 or later. If you’re working from an older Bagisto install, update it first.<\/p>\n\n\n\n

Part 1: Install and Run Bagisto<\/strong><\/h2>\n\n\n\n

Let’s start with the backend. We’ll install Bagisto using Composer.<\/p>\n\n\n\n

This command creates a new Bagisto project inside a folder called my-store<\/strong><\/code>.<\/p>\n\n\n\n

composer create-project bagisto\/bagisto my-store\ncd my-store\nphp artisan bagisto:install\nphp artisan serve\n<\/pre>\n\n\n\n
The install command walks you through an interactive setup. It configures your database and creates an admin account for you.<\/p>\n\n\n\n
Once it’s done, your store will be running locally. You can refer to the official Bagisto documentation<\/a> for more detailed setup steps.<\/p>\n\n\n\n
Enable the GraphQL API<\/h3>\n\n\n\n
Install the GraphQL package to expose Bagisto’s APIs.<\/p>\n\n\n\n
The installation registers the GraphQL routes and generates the required configuration. You can use the GraphQL Playground<\/a> to test queries and explore the available operations.<\/p>\n\n\n\n
composer require bagisto\/graphql-api\nphp artisan optimize:clear\n<\/pre>\n\n\n\n
The install command registers the GraphQL routes and generates a few config values you’ll need in a moment.<\/p>\n\n\n\n
Generate a Storefront API Key<\/strong><\/h3>\n\n\n\n
Bagisto secures its headless API with an access key. Your Next.js application must include this key when sending API requests.<\/p>\n\n\n\n
Run this command to create one.<\/p>\n\n\n\n
php artisan bagisto-api:generate-key --name="My Storefront" --rate-limit=null<\/pre>\n\n\n\n
Save the generated key, as you’ll use it in your Next.js .env.local<\/code> file in the next section.<\/p>\n\n\n\n
Once configured, your storefront can securely access product, customer, and other store data through the GraphQL API.<\/p>\n\n\n\n
\"bagisto<\/figure>\n\n\n\n
Part 2: Set Up the Next.js Storefront<\/h2>\n\n\n\n
With the backend ready, it’s time to build the part your customers will actually use.<\/p>\n\n\n\n
Step 1: Create the Next.js App<\/h3>\n\n\n\n
Start by generating a fresh Next.js project.<\/p>\n\n\n\n
npx create-next-app@latest<\/pre>\n\n\n\n
Next, copy the example environment file. This is where your Bagisto backend URL and API key will go.<\/p>\n\n\n\n
cp .env.example .env.local<\/pre>\n\n\n\n
Open .env.local<\/code> and add these two values. Use the storefront key you generated in Part 1<\/code>.<\/p>\n\n\n\n
NEXT_PUBLIC_BAGISTO_ENDPOINT=https:\/\/your-bagisto-url.com\nNEXT_PUBLIC_BAGISTO_STOREFRONT_KEY=your_storefront_key_here<\/pre>\n\n\n\n
Then start the dev server.<\/p>\n\n\n\n
npm run dev<\/pre>\n\n\n\n
Visit your local storefront in the browser to confirm it’s running.<\/p>\n\n\n\n
\"bagisto-home-page<\/figure>\n\n\n\n
Step 2: Add a GraphQL Proxy Route<\/h3>\n\n\n\n
Create an API route (app\/api\/graphql\/route.js <\/strong>)  to securely connect your Next.js application with Bagisto.<\/p>\n\n\n\n
This route forwards GraphQL requests to Bagisto and attaches the storefront access key on the server before sending the request.<\/p>\n\n\n\n
import { NextResponse } from 'next\/server';\n\nexport async function POST(req) {\n  const { query, variables } = await req.json();\n\n  const response = await fetch(`${process.env.NEXT_PUBLIC_BAGISTO_ENDPOINT}\/api\/graphql`, {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application\/json',\n      'X-STOREFRONT-KEY': process.env.NEXT_PUBLIC_BAGISTO_STOREFRONT_KEY,\n    },\n    body: JSON.stringify({ query, variables }),\n  });\n\n  const data = await response.json();\n  return NextResponse.json(data);\n}<\/pre>\n\n\n\n
Every GraphQL call from here on goes through this route instead of hitting Bagisto directly.<\/p>\n\n\n\n
Step 3: Fetch Products with GraphQL<\/h3>\n\n\n\n
Now we connect the two sides. GraphQL acts as the bridge between Bagisto and Next.js.<\/p>\n\n\n\n
The big advantage is that you fetch only the data you need. Nothing extra is sent over the wire.<\/p>\n\n\n\n
Write the Query<\/h4>\n\n\n\n
Now we connect the two sides. GraphQL acts as the bridge between Bagisto and Next.js.<\/p>\n\n\n\n
The nice part about GraphQL is that you only fetch the data you actually need. Nothing extra gets sent over the wire.<\/p>\n\n\n\n
Create a graphql<\/strong><\/code> folder and add a queries.j<\/strong>s<\/code> file inside it. This query asks Bagisto for product details like ID, name, SKU, price, and images.<\/p>\n\n\n\n
import { gql } from 'graphql-request';\n\nexport const GET_PRODUCTS = gql`\n  query GetProducts {\n    products(input: {}) {\n      data {\n        id\n        name\n        sku\n        price\n        description\n        images {\n          url\n          path\n        }\n      }\n    }\n  }\n`;<\/pre>\n\n\n\n
Check the Bagisto product GraphQL API<\/a><\/p>\n\n\n\n
Fetch on the Server Side<\/strong><\/strong><\/h4>\n\n\n\n
The App Router lets us fetch data on the server. This means products load before the page reaches the browser.<\/p>\n\n\n\n
The result is faster pages and better SEO out of the box.<\/p>\n\n\n\n
This page component requests the products and renders them in a grid.<\/p>\n\n\n\n
import { client } from '..\/..\/lib\/bagisto';\nimport { GET_PRODUCTS } from '..\/..\/graphql\/queries';\n\nexport default async function ProductsPage() {\n  const data = await client.request(GET_PRODUCTS);\n  const products = data.products.data;\n\n  return (\n    <div>\n      <h1>Products<\/h1>\n      <div className="product-grid">\n        {products.map((product) => (\n          <div key={product.id} className="product-card">\n            <img\n              src={product.images[0]?.url}\n              alt={product.name}\n            \/>\n            <h2>{product.name}<\/h2>\n            <p>SKU: {product.sku}<\/p>\n            <p>${product.price}<\/p>\n          <\/div>\n        ))}\n      <\/div>\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
The data is fetched on the server, so the browser receives a ready-made page.<\/p>\n\n\n\n
Part 3: Add Customer Sign Up<\/strong><\/h3>\n\n\n\n
Every store needs customers, and customers need accounts. Sign-up is where that starts.<\/p>\n\n\n\n
In a headless setup, the registration form lives inside Next.js. The actual account, though, gets created by Bagisto through a GraphQL mutation.<\/p>\n\n\n\n
The flow is simple. The shopper fills out a form, Next.js passes the data along, and Bagisto creates the account and sends it back.<\/p>\n\n\n\n
\"signup<\/figure>\n\n\n\n
Step 1: Write the Registration Mutation<\/strong><\/h4>\n\n\n\n
GraphQL uses mutations whenever you want to change data, not just read it.<\/p>\n\n\n\n
Add a mutations.js<\/strong><\/code> file inside your graphql<\/strong><\/code> folder. This mutation sends the new customer’s details to Bagisto and asks for the saved account in return.<\/p>\n\n\n\n
import { gql } from 'graphql-request';\n\nexport const CUSTOMER_REGISTRATION = gql`\n  mutation registerCustomer($input: createCustomerInput!) {\n    createCustomer(input: $input) {\n      customer {\n        id\n        firstName\n        lastName\n        email\n        status\n        apiToken\n        token\n      }\n    }\n  }\n`;<\/pre>\n\n\n\n
The apiToken<\/code> and token<\/code> fields matter here. They’re what keep the customer signed in right after they register.<\/p>\n\n\n\n
One detail worth catching early: Bagisto’s API expects the confirmation field as confirmPassword<\/strong><\/code>, not passwordConfirmation<\/strong><\/code>.<\/p>\n\n\n\n
It’s a small naming mismatch, but it’s the kind of thing that throws an unhelpful GraphQL error if you miss it.<\/p>\n\n\n\n
Step 2: Build the Sign Up Form<\/strong><\/h4>\n\n\n\n
Now let’s build the form itself. We’ll use react-hook-form<\/code> to handle inputs and validation.<\/p>\n\n\n\n
This form collects a name, email, and password. It also checks that both password fields match before submitting anything.<\/p>\n\n\n\n
'use client';\nimport { useForm } from 'react-hook-form';\nimport { createUser } from '..\/..\/lib\/actions';\n\nexport default function RegistrationForm() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors, isSubmitting },\n  } = useForm();\n\n  const onSubmit = async (data) => {\n    if (data.password !== data.passwordConfirmation) {\n      alert('The passwords do not match.');\n      return;\n    }\n    const res = await createUser(data);\n    if (res?.success) {\n      window.location.href = '\/customer\/login';\n    } else {\n      alert(res?.error?.message || 'Failed to create user');\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)} noValidate>\n      <input\n        placeholder="First name"\n        {...register('firstName', { required: 'First name is required' })}\n      \/>\n      <input\n        placeholder="Last name"\n        {...register('lastName', { required: 'Last name is required' })}\n      \/>\n      <input\n        placeholder="Email"\n        {...register('email', { required: 'Email is required' })}\n      \/>\n      <input\n        type="password"\n        placeholder="Password"\n        {...register('password', {\n          required: 'Password is required',\n          minLength: { value: 8, message: 'Must be at least 8 characters' },\n        })}\n      \/>\n      <input\n        type="password"\n        placeholder="Confirm password"\n        {...register('passwordConfirmation', { required: 'Please confirm password' })}\n      \/>\n      <button type="submit" disabled={isSubmitting}>\n        Sign Up\n      <\/button>\n    <\/form>\n  );\n}<\/pre>\n\n\n\n
Each field has its own validation rule. If something’s missing or wrong, the shopper sees a clear message right away.<\/p>\n\n\n\n
Step 3: Send the Data to Bagisto<\/strong><\/h4>\n\n\n\n
The form doesn’t talk to GraphQL directly. Instead, it calls a server action that handles the request for us.<\/p>\n\n\n\n
Keeping this logic on the server is safer. Your API details never get exposed to the browser.<\/p>\n\n\n\n
'use server';\nimport { client } from '.\/bagisto';\nimport { CUSTOMER_REGISTRATION } from '..\/graphql\/mutations';\n\nexport async function createUser(formData) {\n  try {\n    const { firstName, lastName, email, password, passwordConfirmation } = formData;\n    const data = await client.request(CUSTOMER_REGISTRATION, {\n      input: {\n        firstName,\n        lastName,\n        email,\n        password,\n        confirmPassword: passwordConfirmation,\n      },\n    });\n    return { success: true, customer: data.createCustomer.customer };\n  } catch (err) {\n    return { success: false, error: { message: err?.message || 'An error occurred' } };\n  }\n}<\/pre>\n\n\n\n
Notice the form still collects passwordConfirmation<\/strong><\/code>, but we map it to confirmPassword<\/strong><\/code> right before sending it to Bagisto.<\/p>\n\n\n\n
That keeps the form code readable while still matching what the API actually expects.<\/p>\n\n\n\n
If Bagisto accepts the data, it sends back the new customer. If something goes wrong, the error comes back too, so the form can show it.<\/p>\n\n\n\n
How the Sign-Up Flow Works<\/strong><\/h4>\n\n\n\n
It helps to see the whole journey laid out step by step.<\/p>\n\n\n\n
1. The customer fills out the sign-up form in Next.js.<\/p>\n\n\n\n
2. react-hook-form<\/strong><\/code> checks the fields on the client side.<\/p>\n\n\n\n
3. The form calls the createUser<\/strong><\/code> server action.<\/p>\n\n\n\n
4. The server action sends a GraphQL mutation to Bagisto.<\/p>\n\n\n\n
5. Bagisto creates the account and sends back the customer with a token.<\/p>\n\n\n\n
6. The customer lands on the login page, ready to sign in.<\/p>\n\n\n\n
The frontend handles the experience. Bagisto handles the account. That split is really the whole idea behind headless commerce.<\/p>\n\n\n\n
\"signup-flow\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n
Key Features of eCommerce in Next.js Storefront<\/h3>\n\n\n\n
A storefront built with Next.js and Bagisto delivers a fast, scalable shopping experience while giving developers the flexibility to build modern eCommerce applications.<\/p>\n\n\n\n
Product & Shopping Experience<\/h4>\n\n\n\n
Create engaging product pages with support for multiple product types, while secure customer accounts, carts, and checkout ensure a smooth buying journey.<\/p>\n\n\n\n
\"bagisto<\/figure>\n\n\n\n
High Performance<\/h4>\n\n\n\n
Built-in server-side rendering, incremental static regeneration (ISR), and intelligent caching keep pages fast and responsive, improving the shopping experience on every device.<\/p>\n\n\n\n
\"bagisto<\/figure>\n\n\n\n
SEO & Accessibility<\/h4>\n\n\n\n
Generate search engine-friendly pages with server-rendered content, responsive layouts, and accessible interfaces that help your store reach more customers.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Next.js and Bagisto provide a solid foundation for building headless eCommerce applications. Next.js delivers a fast, flexible storefront, while Bagisto handles products, orders, customers, and the rest of your commerce operations.<\/p>\n\n\n\n
You now have a working setup with GraphQL connecting both applications. From here, you can continue building your storefront by adding features such as product search, shopping carts, user authentication, and checkout.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Modern eCommerce websites need to be fast, responsive, and easy to find on search engines. Next.js helps meet these requirements with built-in performance optimizations, strong SEO support, and flexible rendering options. In this guide, you’ll build a headless eCommerce store using Next.js and Bagisto. Next.js will power the storefront, while Bagisto will manage products, customers, […]<\/a><\/p>\n","protected":false},"author":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-545558","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to build eCommerce in Next.js - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to build eCommerce in Next.js - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-02T07:35:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-02T07:41:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp\" \/>\n<meta name=\"author\" content=\"Ritu\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ritu\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\"},\"author\":{\"name\":\"Ritu\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5e29ed784b7f9445c4e3ff7543bfa29f\"},\"headline\":\"How to build eCommerce in Next.js\",\"datePublished\":\"2026-07-02T07:35:10+00:00\",\"dateModified\":\"2026-07-02T07:41:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\"},\"wordCount\":1617,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\",\"name\":\"How to build eCommerce in Next.js - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp\",\"datePublished\":\"2026-07-02T07:35:10+00:00\",\"dateModified\":\"2026-07-02T07:41:18+00:00\",\"description\":\"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2.webp\",\"width\":1536,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to build eCommerce in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/5e29ed784b7f9445c4e3ff7543bfa29f\",\"name\":\"Ritu\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9bc2529731debbaa3262752e12dd0beadbf918c5a3eb2461dc39f50e155236d9?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9bc2529731debbaa3262752e12dd0beadbf918c5a3eb2461dc39f50e155236d9?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g\",\"caption\":\"Ritu\"},\"description\":\"Ritu is a software engineer specializing in building modern, high-performance web applications with Next.js. With expertise in UI\/UX design and headless theme development, she creates fast, scalable, and user-centric digital experiences. Having contributed to numerous projects across different domains, she combines technical expertise with a strong design perspective to deliver seamless, responsive, and engaging web solutions.\",\"sameAs\":[\"https:\/\/in.linkedin.com\/in\/rituthakur03\/\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/ritu-uxlab322\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to build eCommerce in Next.js - Webkul Blog","description":"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/","og_locale":"en_US","og_type":"article","og_title":"How to build eCommerce in Next.js - Webkul Blog","og_description":"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.","og_url":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2026-07-02T07:35:10+00:00","article_modified_time":"2026-07-02T07:41:18+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp","type":"","width":"","height":""}],"author":"Ritu","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ritu","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/"},"author":{"name":"Ritu","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5e29ed784b7f9445c4e3ff7543bfa29f"},"headline":"How to build eCommerce in Next.js","datePublished":"2026-07-02T07:35:10+00:00","dateModified":"2026-07-02T07:41:18+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/"},"wordCount":1617,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/","url":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/","name":"How to build eCommerce in Next.js - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2-1200x800.webp","datePublished":"2026-07-02T07:35:10+00:00","dateModified":"2026-07-02T07:41:18+00:00","description":"Learn how to build eCommerce in Next.js using Bagisto as a headless backend. Set up GraphQL APIs, fetch products, and create a fast, scalable online store.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/06\/bagisto-2.webp","width":1536,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-build-ecommerce-in-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to build eCommerce in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/5e29ed784b7f9445c4e3ff7543bfa29f","name":"Ritu","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9bc2529731debbaa3262752e12dd0beadbf918c5a3eb2461dc39f50e155236d9?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9bc2529731debbaa3262752e12dd0beadbf918c5a3eb2461dc39f50e155236d9?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Feva.png&r=g","caption":"Ritu"},"description":"Ritu is a software engineer specializing in building modern, high-performance web applications with Next.js. With expertise in UI\/UX design and headless theme development, she creates fast, scalable, and user-centric digital experiences. Having contributed to numerous projects across different domains, she combines technical expertise with a strong design perspective to deliver seamless, responsive, and engaging web solutions.","sameAs":["https:\/\/in.linkedin.com\/in\/rituthakur03\/"],"url":"https:\/\/webkul.com\/blog\/author\/ritu-uxlab322\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/545558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=545558"}],"version-history":[{"count":102,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/545558\/revisions"}],"predecessor-version":[{"id":546862,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/545558\/revisions\/546862"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=545558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=545558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=545558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}