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
Deploy in 5 minutes
Setting up the environment variables
Navigate into your projects directory and get your enviroment variables ready:
cd nextjs-starter-medusa/
mv .env.template .env.localInstall dependencies
Use Yarn to install all dependencies.
yarnStart developing
You are now ready to start up your project.
yarn devOpen 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 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 algoliasearchAfter 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 || "test_app_id" // You should add this to your environment variables
const apiKey = process.env.NEXT_PUBLIC_SEARCH_API_KEY || "test_key"
export 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.