Open source

Next.js Commerce x Geins

GitHubCheckout on Vercel
High-performance, server-rendered Next.js 15 ecommerce application integrating Geins Commerce API with Next.js Commerce

Vercel's Next.js Commerce x Geins is a high-performance, server-rendered Next.js 15 ecommerce template that integrates the Geins Commerce API with Next.js Commerce, showcasing React Server Components, Server Actions, and modern React APIs.

Why use Next.js Commerce x Geins?

Server-first architecture

Built on Next.js 15 RC with App Router, the template leverages React Server Components for fast, scalable UIs. Server-first rendering means better performance, reduced client-side JavaScript, and optimal Core Web Vitals scores.

Modern React APIs

The template showcases cutting-edge React features including Server Actions for simplified backend logic, Suspense for better loading states, and useOptimistic for responsive user interactions. These modern patterns enable a superior developer experience and faster development.

Geins SDK integration

Pre-configured with the open-source Geins SDK, the template seamlessly connects to Geins' commerce backend. Product catalogs, cart management, and checkout flows are integrated out of the box, so you can focus on building your unique shopping experience.

Open source and community-driven

Next.js Commerce x Geins is open source under the MIT License, meaning you can contribute improvements, customize for your needs, and benefit from community-driven enhancements. We believe in transparency and collaborative development.

Getting started

Prerequisites

Installation

Clone the repository:

git clone https://github.com/geins-io/vercel-nextjs-commerce.git
cd vercel-nextjs-commerce

Install dependencies:

pnpm install

Basic setup

Link your local instance with Vercel and pull environment variables:

npm i -g vercel
vercel link
vercel env pull

Environment variables are defined in .env.example and include:

  • GEINS_API_KEY - Your Geins API key
  • GEINS_ACCOUNT_NAME - Your Geins account name
  • GEINS_CHANNEL - Channel ID
  • GEINS_TLD - Top-level domain
  • GEINS_LOCALE - Language/locale
  • GEINS_MARKET - Market alias
  • GEINS_IMAGE_URL - Image CDN URL
  • GEINS_CURRENCY_CODE - Currency code
  • GEINS_CHECKOUT_ID - Checkout ID

Start the development server:

pnpm dev

Access the app on http://localhost:3000.

What can you build?

Next.js Commerce x Geins empowers you to build:

  • High-performance storefronts - Server-rendered ecommerce sites with optimal performance and SEO
  • Modern commerce experiences - Leverage React Server Components and Server Actions for responsive, interactive shopping experiences
  • Headless commerce solutions - Integrate with Geins backend while maintaining complete control over frontend design
  • Multi-market e-commerce - Support multiple channels, markets, and languages with Geins' built-in multi-market support

Core features

React Server Components

Build fast, scalable UIs with Next.js's server-first approach. Server Components reduce client-side JavaScript and improve initial load times.

Server Actions

Simplify backend logic and data fetching with Server Actions. No need for separate API routes—handle mutations directly in your components.

Geins integration

The template integrates with Geins Commerce API using the Geins SDK, providing access to product catalogs, cart management, checkout flows, and order processing.

Technology stack

Core technologies

  • Next.js 15 RC - React framework with App Router, React Server Components, and Server Actions
  • TypeScript - Statically typed JavaScript for enhanced code quality and developer experience
  • React - Modern React APIs including Suspense and useOptimistic
  • Geins SDK - Open-source SDK for Geins Commerce API integration

Repository resources

Official links

Contributing

Next.js Commerce x Geins is open source under the MIT License, and we welcome contributions! Whether you're fixing bugs, adding features, improving documentation, or reporting issues, your contributions help make the starter template better for everyone.

To get started:

  1. Report issues - Found a bug or have a feature request? Open an issue on GitHub
  2. Submit pull requests - Check the contributing guidelines in the repository's README and submit improvements
  3. Improve documentation - Help us make the starter template easier to understand and use
  4. Share feedback - Let us know what features would make your development experience better

Examples and starter templates

See Next.js Commerce x Geins in action with these resources:

  • TypeScript SDK - Learn how to integrate Geins SDK packages in your application
  • Geins Checkout - Explore the checkout solution that can be integrated with this starter template

For more examples, check the repository's README or explore the codebase to see Next.js Commerce and Geins integration patterns.

Geins Checkout

Open-source checkout solution for Geins e-commerce backend. Use it to manage transactions with or without a storefront.

Nuxt starter

Production-ready PWA storefront template for building commerce applications with Nuxt