Start To : NextKart - Headless Magento 2 React NextJs Theme

Sticky Notes React JS
  • Created On: 30-04-2024
  • Current Version: 1.0.0
  • Last Updated On: N/A

Information

NextKart - Headless Magento 2 React NextJs Theme is a powerful and efficient eCommerce solution based on Next.js involves combining the flexibility and performance of Next.js with robust eCommerce features, Tailwind CSS, TypeScript, MAGENTO 2 and GRAPHQL. Integrate with Magento 2 platform with Next.js. This typically involves setting up GraphQL calls to fetch product data, manage cart and checkout, and handle orders.

Backend will be Magento 2, and the frontend will be Next.js.


Requirements

There are system requirements in order to install and setup script properly. Make sure that you are running the node.js & npm install.

Recommended node (v20.0.0 or higher version)

								
								node install
								
								node -v

Recommended npm (10.0.0 or higher version)

								npm install	
								
								npm -v

Install npm Packages

NPM : You must have to npm install packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Go to the folder ./nextkart-code, open it by a code editor like vscode ,and run npm install

								
								npm install

Configure (next.config.mjs)

open ./next.config.mjs file from root folder and edit it

Add your magento setup URL 

								
								const nextConfig = {
									reactStrictMode: false,
									pageExtensions: ['html', 'jsx', 'js', 'tsx', 'ts'],
									env: {
										API_URL: process.env.NODE_ENV === 'development'
												? 'https://domain-name.com/graphql' 
												: 'https://domain-name.com/graphql' ,	
									},
									images: {
										remotePatterns: [
										  {
											protocol: 'https',
											hostname: 'domain-name.com',
											pathname: '**',
										  },
										],
									},
									
								}

								export default nextConfig;

Header Request

You must allow Request Origin as well as Request headers to make it work 

								
								
								# For Apache

								Header set Access-Control-Allow-Origin "https://theme-url.com/"
								Header set Access-Control-Allow-Headers "Accept, Content-Type, Authorization, Store"

								# For Nginx

								add_header 'Access-Control-Allow-Origin' 'https://theme-url.com/';
								add_header 'Access-Control-Allow-Headers' 'Accept, Content-Type, Authorization, Store';

Note: If use "*" at Access-Control-Allow-Origin then it will allow all Request

Magento htaccess Configure (permission to access data via GraphQL)

open .htaccess file from magento

Magento htaccess

Unzip cynoinfotech_nextkart-1.0.0.zip

Install Magento 2 Cynoinfotech_ContactFormGraphql-1.0.0 module for contact us form which is available in package

magento-module

Development Server (Local Server Development)

Run npm run start for a dev server.

								
								npm run dev

Navigate to http://localhost:3000/ . The app will automatically reload if you change any of the source files.

Customization

1. Change Logo

The logo is located in the public directory. The logo is used in the header component.

To chnage the logo:

  • Go to the public directory.
  • Replace the public/logo/logo.svg file with your logo.

Example

							
									{'logo'}
change-logo

2. Change Theme Color

Customize the theme colors by modifying the Tailwind CSS configuration. Open the Tailwind config file and update the color variables to your preferred choices..

theme-colors

3. Hot Sellers Product

Go to src/app/(main)/page.tsx and update SKUS of products

hero-sellers

4. For update Product tabs slide/h3>

Home page products tabs slider

products-tabs-slider

Go to src/components/producttabs/ProductTabs.jsx and update SKUS of products

tabs-skus

Deploy On Server

Before Deploy build your app using below command

								
									npm run build

How to Deploy Next.js on Vercel?

Step 1: Add and Upload your Next.js project to GitHub or a similar version control system.

Step 2: Sign up for a Vercel account at https://vercel.com/signup.

Step 3: Add your project to Vercel by importing it from your version control system. Vercel will automatically detect that it is a Next.js application and create a build.

Step 4: Once the build is complete, Vercel will deploy your application and provide you with a URL to access it.

Features

You can find these features below:

  • Next.js 14 version
  • Next.js APP Dir
  • Manage Product from Magento 2
  • Use Magento 2 GraphQL
  • Developer Friendly Coding
  • User Dashboard, Order List
  • Manage SEO From Magento 2 and set meta title and description
  • Apollo Client For connect Magento 2 and NextJs
  • Responsive
  • Clean & Modern Design

Demo

Sources and Credits

  • Next JS
  • Tailwindcss
  • Magento 2
  • Apollo Client
  • GraphQL

support

Note

Note: Theme is compatible with the default Magento 2 .