README.md 9.4 KB
Website | Documentation | Forums | Community
Bagisto Next.js Commerce
A headless eCommerce framework built with Next.js and powered by Bagisto, designed for modern scalability and flexibility. Through layered caching and optimized rendering strategies, it consistently achieves a 100/100 Core Web Vitals score, delivering lightning-fast performance and seamless shopping experiences.
Check the Documentation to quickly set up your Headless eCommerce store.
Bagisto Version: v2.3.0
Bagisto GraphQL API: v2.3.0
Features
- Ultra-fast storefront with 100/100 Core Web Vitals score.
- Layered caching for API responses and page rendering.
- Fully responsive and mobile-friendly design.
- SEO optimized with meta tags, OpenGraph, and Twitter cards.
- Secure authentication via NextAuth.js.
- Powered by Bagisto GraphQL APIs for robust commerce functionality.
- Incremental Static Regeneration (ISR) with revalidation.
Bagisto Open Source Headless eCommerce is optimized to deliver a 100/100 Core Web Vitals score across devices, ensuring top-tier performance and user experience.
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js 18+ and pnpm
- Check Bagisto backend requirement detail
Installation
1) Install Bagisto
Begin by [installing the Bagisto](https://devdocs.bagisto.com/) eCommerce platform on your server or local environment.
2) Install the Bagisto Headless Extension
After installing Bagisto, install the [Bagisto Headless Extension](https://github.com/bagisto/bagisto-api) to expose the required APIs for your frontend.
3) Get your storefront up and running in one command:
npx -y @bagisto-headless/create your-storefront
4) Configure .env.local in the Next.js Project
In your Next.js frontend project, create or update your .env.local file with the following variables:
| Variable | Description | Example |
|---|---|---|
NEXT_PUBLIC_BAGISTO_ENDPOINT |
Enter Your Bagisto Shop URL | https://your-store.bagisto.com/ |
NEXT_PUBLIC_BAGISTO_STOREFRONT_KEY |
Enter Your Bagisto Storefront Key | pk_storefront_************************* |
NEXT_PUBLIC_NEXT_AUTH_URL |
Enter Your Headless Shop URL | https://headless-store.com/ |
NEXT_PUBLIC_NEXT_AUTH_SECRET |
Enter Your Headless Shop Secret | Generate with openssl rand -base64 32 |
COMPANY_NAME |
Enter Your company name | Bagisto Headless Store |
关于NEXT_PUBLIC_NEXT_AUTH_URL和NEXT_PUBLIC_NEXT_AUTH_SECRET本来是next-auth要用的，next-auth文档中这两个变量名是NEXTAUTH_URL和NEXTAUTH_SECRET，bagisto官方给改成了NEXT_PUBLIC_NEXT_AUTH_URL和NEXT_PUBLIC_NEXT_AUTH_SECRET，但是没有改彻底（估计也改不彻底，因为next-auth没有暴露NEXTAUTH_URL的自定义接口）导致next-auth根本无法获取到NEXT_PUBLIC_NEXT_AUTH_URL，导致用户退出登录时signout接口返回的域名是默认的localhost:3000
Important Notes
- You will need to use the environment variables defined in
.env.exampleto run Next.js Commerce. - It’s recommended to use Vercel Environment Variables, but a
.envfile is sufficient for local development. - Never commit your
.envfile to version control — it contains secrets that would allow others to control your Bagisto store.
One-Click Deploy to Netlify
Click the button above to deploy your own copy of Bagisto Headless eCommerce to Netlify instantly!
Vercel Setup
Install the Vercel CLI:
npm i -g vercel
Link your local instance with Vercel and GitHub accounts (this creates the .vercel directory):
vercel link
Download your environment variables:
vercel env pull
Run the development server:
pnpm dev
Build for production:
pnpm build
pnpm start
Usage
Start the development server:
pnpm dev
Access the store at:http://localhost:3000
Products
The Open Source Headless eCommerce allows users to browse a wide range of products with built-in pagination and search functionality. Each product has its own detailed page showcasing images, descriptions, pricing, reviews, and availability.
Bagisto Headless Commerce APIs support multiple product types, including simple, configurable, bundled, and downloadable products, ensuring flexibility for different business needs.
Categories
Products are neatly organized into hierarchical categories, making it easy for customers to navigate the store. Each category page displays relevant product listings with filtering and sorting options for a better shopping experience.
The Open Source Headless eCommerce also ensures SEO-friendly category URLs with meta titles, descriptions, and breadcrumbs for improved discoverability.
Checkout
The checkout process is fully functional, featuring complete cart management where customers can add, update, or remove items.
Both guest and logged-in users can proceed through checkout, selecting shipping addresses and preferred payment methods.
Once the order is placed, it is instantly synchronized with the Bagisto backend, enabling smooth order processing and management.
Community
Get Bagisto Headless Commerce support on Facebook Group and Forum
License
Bagisto headless eCommerce framework that will always remain free under the MIT License.
Security Vulnerabilities
If you think that you have found a security issue in Bagisto Headless Commerce, please do not use the issue tracker and do not post it publicly. Instead, all security issues must be sent to mailto:support@bagisto.com.
关于Next.js的缓存机制
https://www.cnblogs.com/xibaoyu/p/18898224
关于next-auth
https://next-auth.js.org/getting-started/introduction
关于.env
.env中NEXTAUTH_SECRET字段的值是openssl rand -base64 32 生成的，应该是生成token时或者session签名时用到
本地开发时把根目录下的.env.example复制一份，文件名改为.env或者.env.local，测试站配置如下：
# Bagisto API Configuration
# 测试站网址
NEXT_PUBLIC_BAGISTO_ENDPOINT=https://sisbridal.com/
# 测试站api key
NEXT_PUBLIC_BAGISTO_STOREFRONT_KEY=pk_storefront_5JHJ7e8Vb10aCmlTexi5OaaFRqPYsrOy
# NextAuth Configuration
# 本地开发的域名
NEXTAUTH_URL=http://localhost:3001
# NextAuth 使用 secret（下面的值）对 session中的token 对象进行 签名 + 加密，生成一个 JWT 字符串，解密这个JWT字符串就可以还原token对象。
# 由命令： openssl rand -base64 32 生成
NEXTAUTH_SECRET=9jstKgQ1Q22PlDDhPtXTZ6G4MEzHGDJIkebcd/5UyZ4=
# Application Settings
# 本地开发时可以随便写个
COMPANY_NAME=Your Company Name