Nextjs Ecommerce Starter Kit

Overview

The Next.js v14 E-commerce Starter Kit is a ready-to-use e-commerce solution that is built on Next.js v14 with TypeScript. It offers features such as different checkout flows, integration with payment gateways like Stripe and PayPal, authentication functionality, and more. The codebase is simple and does not rely on complex dependencies like Redux. Users can clone the kit and deploy it easily.

Features

• Next.js v14 - The new App router
• 3 different checkout flows - Provides tips for implementing custom checkout flows and integrating payment gateways.
• Stripe Checkout
• Boundless Checkout with PayPal
• Custom Checkout form
• Authentication: Sign Up, Sign In, Password Restore, Sign Out
• My orders page
• Boundless Webhook handler: Invalidates cache on update/insert/delete operations.
• Simple codebase without complex dependencies

Installation

To install and use the Next.js v14 E-commerce Starter Kit, follow the steps below:

1. Go to Boundless-commerce.com and create a free account (no credit card required).
2. In the “Control panel”, navigate to “Settings” -> “Access tokens” and create a new token. Copy the generated token.
3. Copy the .env.example file to .env.local.
4. Modify the .env.local file and update the following values:
   • Set values for NEXT_PUBLIC_BOUNDLESS_API_PERMANENT_TOKEN and NEXT_PUBLIC_BOUNDLESS_INSTANCE_ID by copying the values from the generated token.
   • If you want to use Stripe, set values for NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY, and BOUNDLESS_MANAGEMENT_TOKEN. BOUNDLESS_MANAGEMENT_TOKEN is similar to NEXT_PUBLIC_BOUNDLESS_API_PERMANENT_TOKEN but should have management rights enabled.
5. Install the dependencies by running npm install.
6. Start the local server by running npm run dev. Open http://localhost:3000 in your web browser.
7. Set up the Webhook handler by going to “Control panel” -> “Settings” -> “Webhooks” and creating a new webhook.
   • Specify the absolute URL to the webhook handler (e.g., http://localhost:3000/api/on-update-hook).
   • Specify a secret key and set it as an ENV variable named WEBHOOK_SIGN_KEY.
8. Save the webhook configuration.

Summary

The Next.js v14 E-commerce Starter Kit is a comprehensive and easy-to-use solution for building e-commerce websites. It offers features like different checkout flows, authentication functionality, and integration with payment gateways like Stripe and PayPal. The installation process is straightforward, and the codebase is simple without complex dependencies. Users can quickly clone and deploy the kit to get started with their e-commerce project.