Nextjs Starter Medusa

Overview:

The Medusa Next.js Starter is a ready-to-use template built with Next.js, Tailwind CSS, and Typescript. It is designed to work with a Medusa server and provides full e-commerce support. The template includes features such as product detail and overview pages, search functionality with Algolia, product collections, cart and checkout options with PayPal and Stripe integration, user accounts, order details, and more. It also leverages the latest version of Next.js (version 13) and offers support for dynamic routing and route groups. Additionally, it has plans to include a product module support in the future.

Features:

• Full e-commerce support
• Product detail and overview pages
• Search functionality with Algolia integration
• Product collections
• Cart and checkout options with PayPal and Stripe integration
• User accounts
• Order details
• Next.js 13
• Full App Router support with Dynamic Routes and Route Groups
• Product Module support (coming soon)

Installation:

To get started with the Medusa Next.js Starter, follow these steps:

Prerequisites:

• Ensure that you have a Medusa server running locally on port 9000.
• If you need a quick setup, run the command provided in the “Check out create-medusa-app docs” for more details and troubleshooting.

Deploy with Vercel:

• Click on the “Deploy with Vercel” button to initiate the deployment process.
• Set up the environment variables by navigating to your project directory and getting the required variables ready.
• Install all dependencies using Yarn.
• Start developing by opening the code and customizing it according to your requirements.
• Access your site at http://localhost:8000 and see the changes in real-time by editing the /pages/index.tsx file.

Payment Integrations:

• By default, the starter supports Stripe and PayPal as payment integrations.
• To enable these integrations, add the required credentials to your .env.local file.
• Additionally, configure the integrations in your Medusa server. Refer to the Medusa documentation for detailed instructions on setting up Stripe and PayPal.

Search Integration:

• The Medusa Next.js Starter is pre-configured to use the medusa-search-meilisearch plugin for search functionality.
• To enable search, make sure to enable the feature flag in the ./store-config.json file.
• Before performing a search, install the plugin in your Medusa server. Refer to the documentation for a guide on how to do this.
• The search components in the starter are built using Algolia’s react-instant-search-hooks-web library, allowing you to seamlessly switch to Algolia as a search provider.
• To switch to Algolia, you need to add algoliasearch to the project by running a command.
• Update the search client in the @lib/search-client file to use Algolia instead of MeiliSearch.
• Set up Algolia with your Medusa server, and you should be ready to use Algolia for search functionality. Refer to the documentation for more information and a walkthrough of using Algolia with Medusa.

Summary:

The Medusa Next.js Starter is a powerful and feature-rich template for building e-commerce websites. With its integration of Next.js and Tailwind CSS, it provides a solid foundation for creating fast and visually appealing online stores. The template supports essential e-commerce features such as product pages, search functionality, cart and checkout options, and user accounts. It also offers flexibility with payment integrations and search providers. Whether you’re starting a new e-commerce project or looking to enhance an existing one, the Medusa Next.js Starter is a valuable resource.