WooCommerce with Next.js
Getting Started
Quick Start Guide

Getting Started


Prerequisites: Before you begin, ensure that you have a Code Editor (such as VS Code), the latest version of Node.js, and a package manager (PNPM) installed on your computer. If you do not have these installed, please install them.

  • pnpm Installation (Recommended)
npm install pnpm@latest -g

NOTE: If you are not familiar with coding, version control (GitHub), or hosting, please contact our support team at support@jstemplate.net. We will assist you.

1. Download the Theme


Prerequisites: Make sure your WordPress is installed with the recommended plugins below. We will need the WordPress API endpoint.


  1. Open the code in your code editor and terminal.

  2. Run the following command:

pnpm install

Configure the Environment Variables

  • Create a .env.local file in the apps/site directory.

  • Copy the contents of .env.example into .env.local.

  • Replace the values with your own.

# API Config
# Next Auth Config
# WooCommerce Config

Ensure that you have included all key-value pairs in the .env.local file located in the apps/site directory.

Required WordPress Plugins:

Start The Application

To start the application in development mode, run the following command from the project root:

pnpm -F site dev

It will start on your localhost port http://localhost:3000

Build The Production

To build for production, run the following command:

pnpm -F site build

Thank you for choosing Metashop for Headless WooCommerce Store! If you have any questions or issues, please reach out to our support team at support@jstemplate.net