Medusa Next.js Starter
Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences.
Prerequisites: To use the starter you should have a Medusa server running locally on port 9000. Check out medusa-starter-default for a quick setup.
Overview
The Medusa Next.js Starter is built with:
Quickstart
Setting up the environment variables
Navigate into your projects directory and get your enviroment 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!
Edit /pages/index.tsx
to see your site update in real-time!
Payment integrations
By default the this starter supports the following payment integrations
To enable the integrations you need to add the following to your .env.local
file:
MEDUSA_PAYMENT_STRIPE_PUBLIC_KEY=<your-stripe-public-key>
MEDUSA_PUBLIC_PAYPAL_CLIENT_ID=<your-paypal-client-id>
You will also need to setup the integrations in your Medusa server. See the Medusa documentation for more information on how to configure Stripe and PayPal in your Medusa project.
Search integration
This starter is configured to support using the medusa-search-meilisearch
plugin out of the box. To enable search you will need to enable the feature flag in ./store-config.json
, which you do by changing the config to this:
{
"features": {
"search": true
}
}
Before you can search you will need to install the plugin in your Medusa server, for a written guide on how to do this – see our documentation.
The search components in this starter are developed with Algolia's react-instant-search-hooks-web
library which should make it possible for you to seemlesly change your search provider to Algoli instead of MeiliSearch.
To do this you will need to add algoliasearch
to the project, by running
yarn add algoliasearch
After this you will need to switch the current MeiliSearch SearchClient
out with a Alogolia client. To do this update @lib/search-client
.
import algoliasearch from "algoliasearch/lite"
const appId = process.env.NEXT_PUBLIC_SEARCH_APP_ID | "" // You should add this to your environment variables
const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"
const searchClient = algoliasearch(appId, apiKey)
export const SEARCH_INDEX_NAME =
process.env.NEXT_PUBLIC_INDEX_NAME || "products"
After this you will need to set up Algolia with your Medusa server, and then you should be good to go. For a more thorough walkthrough of using Algolia with Medusa – see our documentation, and the doucmentation for using react-instantsearch-hooks-web
.