DesignMint
  • DesignMint Designer Docs
  • DesignMint Medusa Monorepo Setup
  • admin
    • integration-tests
      • Integration Tests
    • src
      • Admin Customizations
      • Custom API Routes
      • Custom scheduled jobs
      • Module Links
      • Custom Module
      • Custom CLI Script
      • Custom subscribers
      • Custom Workflows
  • storefront
  • DesignMint License Notice
Powered by GitBook
On this page
  • Medusa Next.js Starter Template
  • Overview
  • Quickstart
  • Payment integrations
  • Resources
  • Learn more about Medusa
  • Learn more about Next.js

storefront

PreviousCustom WorkflowsNextDesignMint License Notice

Last updated 18 days ago

Medusa Next.js Starter Template

Combine Medusa's modules for your commerce backend with the newest Next.js 15 features for a performant storefront.

Prerequisites

To use the , you should have a Medusa server running locally on port 9000. For a quick setup, run:

npx create-medusa-app@latest

Check out for more details and troubleshooting.

Overview

The Medusa Next.js Starter is built with:

Features include:

  • Full ecommerce support:

    • Product Detail Page

    • Product Overview Page

    • Product Collections

    • Cart

    • Checkout with Stripe

    • User Accounts

    • Order Details

  • Full Next.js 15 support:

    • App Router

    • Next fetching/caching

    • Server Components

    • Server Actions

    • Streaming

    • Static Pre-Rendering

Quickstart

Setting up the environment variables

Navigate into your projects directory and get your environment variables ready:

cd nextjs-starter-medusa/
mv .env.template .env.local

Install dependencies

Use Yarn to install all dependencies.

yarn

Start developing

You are now ready to start up your project.

yarn dev

Open the code and start customizing

Your site is now running at http://localhost:8000!

Payment integrations

By default this starter supports the following payment integrations

To enable the integrations you need to add the following to your .env.local file:

NEXT_PUBLIC_STRIPE_KEY=<your-stripe-public-key>

Resources

Learn more about Medusa

Learn more about Next.js

You'll also need to setup the integrations in your Medusa server. See the for more information on how to configure .

Stripe
Medusa documentation
Stripe
Website
GitHub
Documentation
Website
GitHub
Documentation
Next.js Starter Template
create-medusa-app docs
Next.js
Tailwind CSS
Typescript
Medusa