https://github.com/bagisto/nextjs-commerce
Develop and deploy headless commerce storefronts that convert with Vercel + Bagisto. Build your next store with Next.js and Bagisto
https://github.com/bagisto/nextjs-commerce
headless headless-commerce nextjs nextjs-commerce
Last synced: 3 months ago
JSON representation
Develop and deploy headless commerce storefronts that convert with Vercel + Bagisto. Build your next store with Next.js and Bagisto
- Host: GitHub
- URL: https://github.com/bagisto/nextjs-commerce
- Owner: bagisto
- License: mit
- Created: 2022-02-16T09:28:57.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-27T05:09:25.000Z (5 months ago)
- Last Synced: 2025-03-28T13:11:12.397Z (4 months ago)
- Topics: headless, headless-commerce, nextjs, nextjs-commerce
- Language: TypeScript
- Homepage: https://v2-bagisto-demo.vercel.app/
- Size: 6.21 MB
- Stars: 106
- Watchers: 5
- Forks: 39
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# Next.js Commerce Bagisto
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
## Configuration
### Setup Bagisto Store
- For `BAGISTO_PROTOCOL`, `BAGISTO_STOREFRONT_ACCESS_TOKEN`, `BAGISTO_REVALIDATION_SECRET` and `BAGISTO_STORE_DOMAIN`, you need to install the [Bagisto](https://github.com/bagisto/bagisto).
- Then, you need to install the [Bagisto Headless Extension](https://github.com/bagisto/headless-ecommerce) 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`](.env.example) to run Next.js Commerce. It's recommended you use [Vercel Environment Variables](https://vercel.com/docs/concepts/projects/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`
```bash
pnpm install
pnpm dev
```
Your app should now be running on [localhost:3000](http://localhost:3000/).