<p>
  </a>
</p>

<blockquote>
  <p>
    <strong>Prerequisites</strong>: To use the starter you should have a Medusa server running locally on port 9000. Check out medusa-starter-default for a quick setup.
  </p>
</blockquote>

<h1 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-overview" class="anchor" aria-hidden="true" href="#overview"></a>Overview
</h1>

<p>
  <a rel="nofollow noopener" target="_blank" href="https://user-images.githubusercontent.com/45367945/182571697-a68c502f-5844-4eea-8735-7683f775ac8b.png"></a><br /> The Medusa Next.js Starter is built with:
</p>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://nextjs.org/">Next.js</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://tailwindcss.com/">Tailwind CSS</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.typescriptlang.org/">Typescript</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://medusajs.com/">Medusa</a>
  </li>
</ul>

<h1 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-quickstart" class="anchor" aria-hidden="true" href="#quickstart"></a>Quickstart
</h1>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-deploy-in-5-minutes" class="anchor" aria-hidden="true" href="#deploy-in-5-minutes"></a>Deploy in 5 minutes
</h2>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-setting-up-the-environment-variables" class="anchor" aria-hidden="true" href="#setting-up-the-environment-variables"></a>Setting up the environment variables
</h2>

<p>
  Navigate into your projects directory and get your enviroment variables ready:
</p>

<pre>cd nextjs-starter-medusa/

mv .env.template .env.local

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-install-dependencies" class="anchor" aria-hidden="true" href="#install-dependencies"></a>Install dependencies
</h3>

<p>
  Use Yarn to install all dependencies.
</p>

<pre>yarn</pre>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-start-developing" class="anchor" aria-hidden="true" href="#start-developing"></a>Start developing
</h3>

<p>
  You are now ready to start up your project.
</p>

<pre>yarn dev</pre>

<h3 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-open-the-code-and-start-customizing" class="anchor" aria-hidden="true" href="#open-the-code-and-start-customizing"></a>Open the code and start customizing
</h3>

<p>
  Your site is now running at <a rel="nofollow noopener" target="_blank" href="http://localhost:8000">http://localhost:8000</a>!<br /> Edit <code>/pages/index.tsx</code> to see your site update in real-time!
</p>

<h1 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-payment-integrations" class="anchor" aria-hidden="true" href="#payment-integrations"></a>Payment integrations
</h1>

<p>
  By default this starter supports the following payment integrations
</p>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://stripe.com/">Stripe</a>
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.paypal.com/">Paypal</a>
  </li>
</ul>

<p>
  To enable the integrations you need to add the following to your <code>.env.local</code> file:
</p>

<pre>NEXT_PUBLIC_STRIPE_KEY=&lt;your-stripe-public-key&gt;

NEXT_PUBLIC_PAYPAL_CLIENT_ID=<your-paypal-client-id>

<p>
  You will also need to setup the integrations in your Medusa server. See the <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com">Medusa documentation</a> for more information on how to configure <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com/add-plugins/stripe">Stripe</a> and <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com/add-plugins/paypal">PayPal</a> in your Medusa project.
</p>

<h1 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-search-integration" class="anchor" aria-hidden="true" href="#search-integration"></a>Search integration
</h1>

<p>
  This starter is configured to support using the <code>medusa-search-meilisearch</code> plugin out of the box. To enable search you will need to enable the feature flag in <code>./store-config.json</code>, which you do by changing the config to this:
</p>

<pre>{

“features”: { “search”: true } }

<p>
  Before you can search you will need to install the plugin in your Medusa server, for a written guide on how to do this – <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com/add-plugins/meilisearch">see our documentation</a>.<br /> The search components in this starter are developed with Algolia&#8217;s <code>react-instant-search-hooks-web</code> library which should make it possible for you to seemlesly change your search provider to Algoli instead of MeiliSearch.<br /> To do this you will need to add <code>algoliasearch</code> to the project, by running
</p>

<pre>yarn add algoliasearch</pre>

<p>
  After this you will need to switch the current MeiliSearch <code>SearchClient</code> out with a Alogolia client. To do this update <code>@lib/search-client</code>.
</p>

<pre>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”

<p>
  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 – <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com/add-plugins/algolia">see our documentation</a>, and the <a rel="nofollow noopener" target="_blank" href="https://www.algolia.com/doc/guides/building-search-ui/getting-started/react-hooks/">documentation for using <code>react-instantsearch-hooks-web</code></a>.
</p>

<h1 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-resources" class="anchor" aria-hidden="true" href="#resources"></a>Resources
</h1>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-learn-more-about-medusa" class="anchor" aria-hidden="true" href="#learn-more-about-medusa"></a>Learn more about Medusa
</h2>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://www.medusajs.com/">Website</a>
  </li>
  <li>
    GitHub
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://docs.medusajs.com/">Documentation</a>
  </li>
</ul>

<h2 dir="auto">
  <a rel="nofollow noopener" target="_blank" id="user-content-learn-more-about-nextjs" class="anchor" aria-hidden="true" href="#learn-more-about-nextjs"></a>Learn more about Next.js
</h2>

<ul dir="auto">
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://nextjs.org/">Website</a>
  </li>
  <li>
    GitHub
  </li>
  <li>
    <a rel="nofollow noopener" target="_blank" href="https://nextjs.org/docs">Documentation</a>
  </li>
</ul>

<p>
</p>